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

来源：动视网责编：小采时间：2020-11-27 16:19:36

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

优化Markdown样式及实现代码行号显示_html/css_WEB-ITnose:1.写在前面之前使用过有道云笔记和为知笔记，后来偶然喜欢上用Markdown写文档。被Markdown的简洁与大气所折服，因此抛弃了有道云，专心使用为知笔记，这样github上的文档和笔记都能统一起来了。最后索性把园子的编辑器改为Markdown了。但是园子里

推荐度：

点击下载本文 文档为doc格式

导读优化Markdown样式及实现代码行号显示_html/css_WEB-ITnose:1.写在前面之前使用过有道云笔记和为知笔记，后来偶然喜欢上用Markdown写文档。被Markdown的简洁与大气所折服，因此抛弃了有道云，专心使用为知笔记，这样github上的文档和笔记都能统一起来了。最后索性把园子的编辑器改为Markdown了。但是园子里

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 支持代码行号显示

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

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

2.3 下载完整源码

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

3.使用方法

如您喜欢本文样式，可以按照尝试以下方法。

将style.css的代码复制到博客园后台管理的页面定制CSS代码中。

将footer.js的代码复制到博客园后台管理的页脚Html代码中，添加script标签需要发送邮件至 contact@cnblogs.com，注明用途。

在编辑器设置中设置默认编辑器为Markdown

推荐一个所见即所得在线Markdown编辑器——作业部落

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

推荐度：

点击下载本文 文档为doc格式

标签：代码 html htm

热门焦点

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

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

1.写在前面

2.改造之路

3.使用方法

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

最新推荐

猜你喜欢

热门推荐