只需一步，修改博客园的代码高亮效果

　　如题，博客园自带的代码高亮不好看，这里有个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="//alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
<script src="//alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js" type="text/javascript"></script>

　　这是使用该项目自己服务器托管的js和CSS，可能不稳定，但网速可以，对于我们够用了。

 

 2.　在代码中使用

　　使用时，需要打开 编辑HTML源码状态，把 pre 标签套在代码外面，然后修正自己的 clss="brush: xxx"，最后也是最重要的就是：

　　把要贴的代码中的 < 全都改为 &lt;

　　推荐使用EditPlus等替换完后，再粘到网页上来。

　　这是个不带 < 的例子：

<pre class="brush: js">

    /**

     * SyntaxHighlighter

     */

    function foo()

    {

        if (counter <= 10)

            return;

        // it works!

    }

</pre>

　　效果：

　　

1 2 3 4 5 6 7 8 9

/**  * SyntaxHighlighter  */ function foo() {     if (counter <= 10)         return;     // it works! }

　

　　这是个HTML带 < 的例子：

<pre class="brush: js"> 

<scripttype="text/javascript">

　　SyntaxHighlighter.all()
</script>

</pre>

　　效果：

　　

1 2 3

<script>      SyntaxHighlighter.all() </script>