您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“怎么改進(jìn)Markdown顯示功能”的有關(guān)知識(shí),在實(shí)際案例的操作過(guò)程中,不少人都會(huì)遇到這樣的困境,接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
先看一下效果,再詳細(xì)介紹方法~
先找到一篇markdown模式下寫的文章,然后打開Chrome,依次使用 F12 -> network -> filter “.js”,可知 代碼高亮插件是 highlight.js.
同理可知TinyMCE模式下使用的是SyntaxHighlighter插件.
嘗試了很多方法,最后選擇了開源的插件 highlightjs-line-numbers.js,其原理是生成一個(gè)新的table,增加tr、 td標(biāo)簽, 并設(shè)置border為none。
該插件官方文檔中提到的方法為:
<script src="//cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.6.0/dist/highlightjs-line-numbers.min.js"></script><script>hljs.initHighlightingOnLoad(); hljs.initLineNumbersOnLoad();<script>
接著按需要改進(jìn)一下markdown的樣式,將下面內(nèi)容貼到頁(yè)面定制css一欄即可。
.cnblogs-markdown .hljs { border: none !important;}#cnblogs_post_body th, #cnblogs_post_body td, .cnblogs-post-body th, .cnblogs-post-body td { border: none !important; padding: 0;}.postCon { font-size: 15px;}.cnblogs-markdown .hljs, .cnblogs-post-body .hljs { font-family: "Consolas",sans-serif !important; font-size: 15px! important;}.cnblogs-markdown .hljs, .cnblogs-post-body .hljs { font-family: "Courier New",sans-serif!important; font-size: 15px!important; line-height: 1.5!important; padding: 5px!important;}#cnblogs_post_body table, .cnblogs-post-body table { border: none !important; border-collapse: collapse; word-break: break-word; }
js
代碼然后在頁(yè)腳HTML中加入如下js代碼~
<script> $(function () { if ($(".cnblogs-post-body pre > code").length > 0) setCodeRowWithLang($(".cnblogs-post-body pre")); else setCodeRowWithLang($(".cnblogs-markdown pre")); /* markdown模式下為代碼加入行號(hào), 調(diào)用插件highlightjs-line-numbers.js */ hljs.initHighlightingOnLoad(); hljs.initLineNumbersOnLoad();});function setCodeRowWithLang(pre) { /* var pre = $(".cnblogs-post-body pre"); 選中需要處理的代碼塊, 如果不是首頁(yè),選擇器為 .cnblogs-markdown pre */ if (pre && pre.length) { pre.each(function () { var item = $(this); var lang = item[0].className; /* 獲取高亮的語(yǔ)言,得到j(luò)s/html/cpp等全小寫的語(yǔ)言名,下面進(jìn)行一個(gè)轉(zhuǎn)換 */ var langMap = { "html": "HTML", "xml": "XML", "svg": "SVG", "mathml": "MathML", "css": "CSS", "clike": "C-like", "js": "JavaScript", "abap": "ABAP", "apacheconf": "Apache Configuration", "apl": "APL", "arff": "ARFF", "asciidoc": "AsciiDoc", "adoc": "AsciiDoc", "asm6502": "6502 Assembly", "aspnet": "ASP.NET (C#)", "autohotkey": "AutoHotkey", "autoit": "AutoIt", "shell": "Bash", "basic": "BASIC", "csharp": "C#", "dotnet": "C#", "cpp": "C++", "cil": "CIL", "csp": "Content-Security-Policy", "css-extras": "CSS Extras", "django": "Django/Jinja2", "jinja2": "Django/Jinja2", "dockerfile": "Docker", "erb": "ERB", "fsharp": "F#", "gcode": "G-code", "gedcom": "GEDCOM", "glsl": "GLSL", "gml": "GameMaker Language", "gamemakerlanguage": "GameMaker Language", "graphql": "GraphQL", "hcl": "HCL", "http": "HTTP", "hpkp": "HTTP Public-Key-Pins", "hsts": "HTTP Strict-Transport-Security", "ichigojam": "IchigoJam", "inform7": "Inform 7", "javastacktrace": "Java stack trace", "json": "JSON", "jsonp": "JSONP", "latex": "LaTeX", "emacs": "Lisp", "elisp": "Lisp", "emacs-lisp": "Lisp", "lolcode": "LOLCODE", "markup-templating": "Markup templating", "matlab": "MATLAB", "mel": "MEL", "n1ql": "N1QL", "n4js": "N4JS", "n4jsd": "N4JS", "nand2tetris-hdl": "Nand To Tetris HDL", "nasm": "NASM", "nginx": "nginx", "nsis": "NSIS", "objectivec": "Objective-C", "ocaml": "OCaml", "opencl": "OpenCL", "parigp": "PARI/GP", "objectpascal": "Object Pascal", "php": "PHP", "php-extras": "PHP Extras", "plsql": "PL/SQL", "powershell": "PowerShell", "properties": ".properties", "protobuf": "Protocol Buffers", "q": "Q (kdb+ database)", "jsx": "React JSX", "tsx": "React TSX", "renpy": "Ren'py", "rest": "reST (reStructuredText)", "sas": "SAS", "sass": "Sass (Sass)", "scss": "Sass (Scss)", "sql": "SQL", "soy": "Soy (Closure Template)", "tap": "TAP", "toml": "TOML", "tt2": "Template Toolkit 2", "ts": "TypeScript", "vbnet": "VB.Net", "vhdl": "VHDL", "vim": "vim", "visual-basic": "Visual Basic", "vb": "Visual Basic", "wasm": "WebAssembly", "wiki": "Wiki markup", "xeoracube": "XeoraCube", "xojo": "Xojo (REALbasic)", "xquery": "XQuery", "yaml": "YAML" }; var displayLangText = ""; if (lang in langMap) displayLangText = langMap[lang]; else displayLangText = lang; item.find('.hljs') .prepend( '<div align="right" top="0px" right="10px" position="relative"><a href="javascript:void(0);"></a> <font class="codeLang" title="當(dāng)前Code所用語(yǔ)言">' + displayLangText + '</font></div>'); }); }; } </script>
使用 highlight-line-number.js的前提是已經(jīng)include進(jìn)來(lái)highlight.js,雖然首頁(yè)是默認(rèn)不load highlight.js的,但可使用JQuery的getScript函數(shù)去加載之。
“怎么改進(jìn)Markdown顯示功能”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。