改进博客园Markdown显示功能(加代码行号、显示代码所用编程语言)
博客园的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()对文章内容和博客首页都是有效的~
欢迎在留言区留下你的观点，一起讨论提高。如果今天的文章让你有新的启发，学习能力的提升上有新的认识，欢迎转发分享给更多人。
欢迎各位读者加入 .NET技术交流群，在公众号后台回复“加群”或者“学习”即可。
文末彩蛋
微信后台回复“asp”，给你：一份全网最强的ASP.NET学习路线图。
回复“cs”，给你：一整套 C# 和 WPF 学习资源！
回复“core”，给你：2019年dotConf大会上发布的.NET core 3.0学习视频！
