只需一步,修改博客园的代码高亮效果
如题,博客园自带的代码高亮不好看,这里有个github上的比较好看的高亮样式,是个JQuery插件,SyntaxtaxHighLighter。
这里吐槽下,现在的SASS都要Ruby编译一下才能用,何必把简单的CSS搞的这么复杂呢?更恶心的是这个github工程作者也是用SASS,真难用,又费劲儿。
谁下载谁知道,下了一堆不能用的SASS。所以我没有用自己下载js和CSS,再上传的办法,直接用了 该插件自己官网托管的 CDN 链接。
这个方法以方便快捷为主,只需一步复制粘贴即可。
1. 设置
在博客园“设置面板”的“页首HTML代码”中加入三行即可完成设置。(可直接复制粘贴,不用修改什么)
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js" type="text/javascript"></script>
这是使用该项目自己服务器托管的js和CSS,可能不稳定,但网速可以,对于我们够用了。
2. 在代码中使用
使用时,需要打开 编辑HTML源码状态,把 pre 标签套在代码外面,然后修正自己的 clss="brush: xxx",最后也是最重要的就是:
把要贴的代码中的 < 全都改为 <
<pre class=
"brush: js"
>
/**
* SyntaxHighlighter
*/
function
foo()
{
if
(counter <= 10)
return
;
// it works!
}
</pre>
效果:
/** * SyntaxHighlighter */ function foo() { if (counter <= 10) return; // it works! }
这是个HTML带 < 的例子:
<pre class=
"brush: js"
>
<scripttype="text/javascript">
SyntaxHighlighter.all()
</script></pre>
效果:
<script> SyntaxHighlighter.all() </script>