zoukankan      html  css  js  c++  java
  • 只需一步,修改博客园的代码高亮效果

      如题,博客园自带的代码高亮不好看,这里有个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=" xxx",最后也是最重要的就是:

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

      推荐使用EditPlus等替换完后,再粘到网页上来。
     
      
      这是个不带 < 的例子:
    <pre class=" js">
        /**
         * SyntaxHighlighter
         */
        function foo()
        {
            if (counter <= 10)
                return;
            // it works!
        }
    </pre>

      效果:

      

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

     

      这是个HTML带 < 的例子:

    <pre class=" js"> 

    &lt;scripttype="text/javascript">

      SyntaxHighlighter.all()
    &lt;/script>

    </pre>

      效果:

      

    <script>
         SyntaxHighlighter.all()
    </script>
  • 相关阅读:
    20190922 模拟
    poj3417 Network/闇の連鎖[树上差分]
    poj3280 Cheapest Palindrome[区间DP]
    poj3691 DNA repair[DP+AC自动机]
    BZOJ1030 [JSOI2007]文本生成器[DP+AC自动机]
    loj2424 「NOIP2015」子串[字符串DP]
    poj1038 Bugs Integrated, Inc.[状压DP]
    第05组 Beta冲刺 (2/5)(组长)
    第05组 Beta冲刺 (1/5)(组长)
    第05组 Alpha冲刺 总结(组长)
  • 原文地址:https://www.cnblogs.com/muyun/p/3573150.html
Copyright © 2011-2022 走看看