zoukankan      html  css  js  c++  java
  • 博客园设置Google-code-prettify渲染代码高亮

    一段废话:

    其实早就知道可以用google-code-prettify来设置高亮,但是比较懒,现在才折腾了一下。看见好看的代码高亮,心情都变好啦~
    感觉博客园的代码高亮,尤其是Markdown编辑模式下的,可定制性好差。可是在博客园发博客比在自己的独立博客发要比较方便(我的独立博客用的是hexo静态博客),而且也习惯了在这里发布。

    首先说一下用pretty的缺点

    • 之前的TinyMCE编辑器下发布代码,如果是插入代码的两个按钮里的右边的那个,pretty渲染后会变成错乱的,<span>标签都会显示出来。
      解决方法就是手动去改以前的文章(这个过程可以让你逃避一下复杂的现实世界,还可以回顾一下以前写过的东西,好吧。。其实就是要花很长时间去干重复的工作)。
    • 如果要设置行号,Markdown编辑模式的代码会渲染成一行一块,很奇怪,因为每一行都有<code>标签,所以只好选择不要行号。

    接下来是设置的步骤

    • 首先要确保你已经开启js功能。

      jQuery博客园已经自动加载了。就不用我们加了。
      prettify.js是在这里下载的:https://code.google.com/p/google-code-prettify/
      我把它传到了博客的文件里。
      博客设置页面的页脚Html代码:

    <script src="http://files.cnblogs.com/files/flipped/prettify.js"></script>
    <script type="text/javascript">
    (function() {
         $("pre").addClass("prettyprint");
         prettyPrint();
    })();
    </script>
    
    • 配色和字体
      默认的配色不喜欢,可以设置css,推荐参考https://jmblog.github.io/color-themes-for-google-code-prettify/
      例如我的就是:
    
    /*! Color themes for Google Code Prettify | MIT License | github.com/jmblog/color-themes-for-google-code-prettify */
    .pln{color:#4d4d4c}ol.linenums{margin-top:0;margin-bottom:0;color:#8e908c}li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9{padding-left:1em;background-color:#fff;list-style-type:decimal!important;}@media screen{.str{color:#718c00}.kwd{color:#8959a8}.com{color:#8e908c}.typ{color:#4271ae}.lit{color:#f5871f}.pun{color:#4d4d4c}.opn{color:#4d4d4c}.clo{color:#4d4d4c}.tag{color:#c82829}.atn{color:#f5871f}.atv{color:#3e999f}.dec{color:#f5871f}.var{color:#c82829}.fun{color:#4271ae}}
    
    /*下面是我设置背景色,字体大小和字体*/
    .cnblogs-markdown code{
    background:#fff!important;
    }
    .cnblogs_code,.cnblogs_code span,.cnblogs-markdown .hljs{
    	font-size:16px!important;
    }
    
    .syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption, .syntaxhighlighter textarea {
        font-size: 16px!important;
    }
    
    .cnblogs_code, .cnblogs_code span, .cnblogs-markdown .hljs{
    font-family:consolas, "Source Code Pro", monaco, monospace !important;
    }
    
    • 然后就大功告成啦O(∩_∩)O
  • 相关阅读:
    破解VNC密码
    word无法插入页码
    修改windows远程桌面端口号
    系统每次进入桌面报错“由于启动计算机时出现了页面文件配置问题”
    树梅派安装GMChess中国象棋
    Linux命令Top详解
    树梅派修改root密码及切换账户
    树梅派安装截图工具
    Linux有趣的应用,画只小猫陪伴你
    Windows 10访问XP系统共享文件报”因为文件共享不安全,所以你不能连接到文件共享。。。“
  • 原文地址:https://www.cnblogs.com/flipped/p/6789821.html
Copyright © 2011-2022 走看看