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

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

先看一下效果,再详细介绍方法~
改进博客园Markdown显示功能(加代码行号、显示代码所用编程语言)_第1张图片

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

先找到一篇markdown模式下写的文章,然后打开Chrome,依次使用 F12 -> network -> filter ".js",可知 代码高亮插件是 highlight.js.
同理可知博客园文章编辑器TinyMCE模式(即 富文本编辑模式)下使用的是SyntaxHighlighter插件.
改进博客园Markdown显示功能(加代码行号、显示代码所用编程语言)_第2张图片

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

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



使用 highlight-line-number.js的前提是已经include进来highlight.js,虽然首页是默认不load highlight.js的,但可使用JQuerygetScript函数去加载之。

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

你可能感兴趣的:(改进博客园Markdown显示功能(加代码行号、显示代码所用编程语言))