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

谁说胖子不能爱 提交于 2020-02-28 06:12:15

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

先看一下效果,再详细介绍方法~
img

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

先找到一篇markdown模式下写的文章,然后打开Chrome,依次使用 F12 -> network -> filter ".js",可知 代码高亮插件是 highlight.js.
同理可知博客园文章编辑器TinyMCE模式(即 富文本编辑模式)下使用的是SyntaxHighlighter插件.
EditorModes

尝试了很多方法,最后选择了开源的插件 highlightjs-line-numbers.js,其原理是生成一个新的table,增加trtd标签, 并设置bordernone

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

<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的,但可使用JQuerygetScript函数去加载之。

上述js函数setCodeRowWithLang()对文章内容和博客首页都是有效的~



欢迎在留言区留下你的观点,一起讨论提高。如果今天的文章让你有新的启发,学习能力的提升上有新的认识,欢迎转发分享给更多人。


欢迎各位读者加入 .NET技术交流群,在公众号后台回复“加群”或者“学习”即可。


dotNET匠人 公众号名片

文末彩蛋

微信后台回复“asp”,给你:一份全网最强的ASP.NET学习路线图。

回复“cs”,给你:一整套 C# 和 WPF 学习资源!

回复“core”,给你:2019年dotConf大会上发布的.NET core 3.0学习视频!

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!