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

发布时间:2025-09-01 00:36:48 作者:益华网络 来源:undefined 浏览量(0) 点赞(0)
摘要:博客园的markdown模式下的代码高亮功能使用的是highlight.js,没有行号和显示相应编程语言的功能,只好自己将其改造了一下(将这两种功能一并实现了)~

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

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

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

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

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

尝试了很多方法,最后选择了开源的插件 highlightjs-line-numbers.js,其原理是生成一个新的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;
}

实现加代码行号、显示代码所用语言的具体 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

二维码

扫一扫,关注我们

声明:本文由【益华网络】编辑上传发布,转载此文章须经作者同意,并请附上出处【益华网络】及本页链接。如内容、图片有任何版权问题,请联系我们进行处理。

感兴趣吗?

欢迎联系我们,我们愿意为您解答任何有关网站疑难问题!

您身边的【网站建设专家】

搜索千万次不如咨询1次

主营项目:网站建设,手机网站,响应式网站,SEO优化,小程序开发,公众号系统,软件开发等

立即咨询 15368564009
在线客服
嘿,我来帮您!