改進部落格園Markdown顯示功能(加代碼行号、顯示代碼所用程式設計語言)
部落格園的markdown模式下的代碼高亮功能使用的是
highlight.js
,沒有行号和顯示相應程式設計語言的功能,隻好自己将其改造了一下(将這兩種功能一并實作了)~
先看一下效果,再詳細介紹方法~
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIyZuBnL1MjMxczMzkjNtkTN0AzM0QTMyYjMyATOxAjMtgzM5YzM08CXyATOxAjMvwFOzkjNzQzLcd2bsJ2Lc12bj5ycn9Gbi52YugTMwIzZtl2Lc9CX6MHc0RHaiojIsJye.png)
檢視部落格園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/[email protected]/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
代碼
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學習視訊!