分享

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

 strangedbly 2016-03-17

  如题,博客园自带的代码高亮不好看,这里有个github上的比较好看的高亮样式,是个JQuery插件,SyntaxtaxHighLighter。

  这里吐槽下,现在的SASS都要Ruby编译一下才能用,何必把简单的CSS搞的这么复杂呢?更恶心的是这个github工程作者也是用SASS,真难用,又费劲儿。

谁下载谁知道,下了一堆不能用的SASS。所以我没有用自己下载js和CSS,再上传的办法,直接用了 该插件自己官网托管的 CDN 链接。

  这个方法以方便快捷为主,只需一步复制粘贴即可。

 

1. 设置

  在博客园“设置面板”的“页首HTML代码”中加入三行即可完成设置。(可直接复制粘贴,不用修改什么)

<link href="/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
<script src="/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
<script src="/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"> 

&lt;scripttype="text/javascript">

  SyntaxHighlighter.all()
&lt;/script>

</pre>

  效果:

  

1
2
3
<script>
     SyntaxHighlighter.all()
</script>

 

 

 

 

 

 

 

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 全屏 打印 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多