Rumah >hujung hadapan web >html tutorial >优化Markdown样式及实现代码行号显示_html/css_WEB-ITnose
之前使用过有道云笔记和为知笔记,后来偶然喜欢上用Markdown写文档。被Markdown的简洁与大气所折服,因此抛弃了有道云,专心使用为知笔记,这样github上的文档和笔记都能统一起来了。最后索性把园子的编辑器改为Markdown了。
但是园子里的Markdown渲染效果和为知笔记、github上的比起来不够美观,因此决心改造园子的Markdown样式。
2.1 修改CSS
/*部分代码如下*/.cnblogs-markdown a { background: transparent;}.cnblogs-markdown a:active,.cnblogs-markdown a:hover { outline: 0;}
2.2 支持代码行号显示
<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 下载完整源码