优化Markdown样式及实现代码行号显示_html/css

优化Markdown样式及实现代码行号显示_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:27:01

原创

2622人浏览过

1.写在前面

之前使用过有道云笔记和为知笔记，后来偶然喜欢上用markdown写文档。被markdown的简洁与大气所折服，因此抛弃了有道云，专心使用为知笔记，这样github上的文档和笔记都能统一起来了。最后索性把园子的编辑器改为markdown了。

但是园子里的Markdown渲染效果和为知笔记、github上的比起来不够美观，因此决心改造园子的Markdown样式。

2.改造之路

2.1 修改CSS

在github上搜索到了针对园子的CSS，并且进行了修改，CSS的修改方在此就不赘述了，右键->审查元素即可。

/*部分代码如下*/.cnblogs-markdown a {    background: transparent;}.cnblogs-markdown a:active,.cnblogs-markdown a:hover {    outline: 0;}

登录后复制

2.2 支持代码行号显示

灵思AI

专业的智能写作辅助平台

202

查看详情

尝试书写一些内容后，发现虽然支持代码高亮，但是不支持行号显示。代码怎么能没有行号呢？

审查元素后发现，当使用Markdown编辑器后，代码被加上了很多html标签，园子自带的SyntaxHighlighter插件并不能完全发挥作用。因此考虑添加Javascript语句，重新渲染代码部分。

<script type="text/javascript">      // 博客内的链接在新窗口打开    $("#cnblogs_post_body a").each(function(){        $(this).attr("target","_blank");    })     var pre = $("pre.sourceCode"); //选中需要更改的部分    if(pre && pre.length){        pre.each(function() {            var item = $(this);            var lang = item.attr("class").split(" ")[1]; //判断高亮的语言            item.html(item.html().replace(/<[^>]+>/g,"")); //将<pre class="brush:php;toolbar:false;">标签中的html标签去掉            item.removeClass();   //移除 class            item.addClass("brush: " + lang +";"); //根据语言添加笔刷            SyntaxHighlighter.all();        })    }</script>

登录后复制

2.3 下载完整源码

立即学习“前端免费学习笔记（深入）”；

完整代码已经上传至 github，后期不断优化、更新，欢迎关注留言。