博客園的markdown模式下的代碼高亮功能使用的是highlight.js，沒有行號和顯示相應編程語言的功能，只好自己將其改造了一下(將這兩種功能一并實現了)~

先看一下效果，再詳細介紹方法~

查看博客園markdown所使用的代碼高亮插件

先找到一篇markdown模式下寫的文章，然后打開Chrome，依次使用 F12 -> network -> filter ".js"，可知 代碼高亮插件是 highlight.js.
同理可知博客園文章編輯器TinyMCE模式(即 富文本編輯模式)下使用的是SyntaxHighlighter插件.

嘗試了很多方法，最后選擇了開源的插件 highlightjs-line-numbers.js，其原理是生成一個新的table，增加tr、 td標簽, 并設置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>

調整markdown的相關css

接著按需要改進一下markdown的樣式，將下面內容貼到頁面定制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代碼

然后在頁腳HTML中加入如下js代碼~

<script> $(function () {if ($(".cnblogs-post-body pre > code").length > 0) setCodeRowWithLang($(".cnblogs-post-body pre"));else setCodeRowWithLang($(".cnblogs-markdown pre"));/* markdown模式下為代碼加入行號, 調用插件highlightjs-line-numbers.js */hljs.initHighlightingOnLoad();hljs.initLineNumbersOnLoad(); });function setCodeRowWithLang(pre) {/* var pre = $(".cnblogs-post-body pre"); 選中需要處理的代碼塊, 如果不是首頁，選擇器為 .cnblogs-markdown pre */if (pre && pre.length) {pre.each(function () {var item = $(this);var lang = item[0].className; /* 獲取高亮的語言，得到js/html/cpp等全小寫的語言名，下面進行一個轉換 */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="當前Code所用語言">' +displayLangText +'</font></div>');});}; } </script>

使用 highlight-line-number.js的前提是已經include進來highlight.js，雖然首頁是默認不load highlight.js的，但可使用JQuery的getScript函數去加載之。

上述js函數setCodeRowWithLang()對文章內容和博客首頁都是有效的~

轉載于:https://www.cnblogs.com/enjoy233/p/10410089.html

總結

以上是生活随笔為你收集整理的改进博客园Markdown显示功能(加代码行号、显示代码所用编程语言)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。