本篇内容介绍了“怎么改进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一栏即可。
.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函数去加载之。
“怎么改进Markdown显示功能”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
