改进博客园Markdown显示功能(加代码行号、显示代码所用编程语言)

博客园的改进markdown模式下的代码高亮功能使用的是highlight.js，没有行号和显示相应编程语言的博客编程功能，只好自己将其改造了一下(将这两种功能一并实现了)~

先看一下效果，园M语再详细介绍方法~

查看博客园markdown所使用的显行号显示代码高亮插件

先找到一篇markdown模式下写的文章，然后打开Chrome，示功所用依次使用 F12 -> network -> filter “.js”，代码代码可知 代码高亮插件是改进 highlight.js.

同理可知TinyMCE模式下使用的是SyntaxHighlighter插件.

尝试了很多方法，香港云服务器最后选择了开源的博客编程插件 highlightjs-line-numbers.js，其原理是园M语生成一个新的table，增加tr、显行号显示 td标签,示功所用 并设置border为none。

该插件官方文档中提到的代码代码方法为:

1 2 <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一栏即可。改进

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 .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; }

实现加代码行号、显示代码所用语言的园M语具体 js 代码

然后在页脚HTML中加入如下js代码~

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 <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": "Renpy", "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

很赞哦!（8598）