您好,欢迎访问一九零五行业门户网

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

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编辑器——作业部落
其它类似信息

推荐信息