0%

hexo添加google code prettify代码高亮

hexo本身的代码高亮不好看,用google的换掉

  1. 下载google code prettify,解压后把代码放到hexo/source/plugins/prettify目录下

  2. 将hexo本身的代码高亮禁用
    修改总配置文件*_config.yml*

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    # highlight:
    # enable: true
    # line_number: true
    # auto_detect: true
    # tab_replace:

    highlight:
    enable: false
    line_number: false
    auto_detect: false
    tab_replace:
  3. 添加prettify
    在/themes/cyanstyle/layout/_partial/head.ejs(找自己主题对应的文件)中添加css

    1
    2
    3
    4
      <!--prettify代码高亮主题css引入-->
    <link href="/plugins/prettify/prettify.css" rel="stylesheet">
    <%- css('css/style') %>
    <%- partial('google-analytics') %>

    在/themes/cyanstyle/layout/_partial/after-footer.ejs中添加js

    1
    2
    3
    4
    5
    6
    <!--prettify代码高亮脚本引入-->
    <script src="/plugins/prettify/prettify.js"></script>
    <script type="text/javascript">
    $(window).load(function(){
    $('pre').addClass('prettyprint').attr('style', 'overflow:auto;');
    prettyPrint();
  4. 重新生成博客看下一般就好了

  5. 换主题
    要想换主题,只需要把/themes/cyanstyle/layout/_partial/head.ejs里的css指向想要的文件就好
    比如换成:

    1
    <link href="/plugins/prettify/skins/sunburst.css" rel="stylesheet">

    这里(官方的)和这里有很多主题,随便换就好🙂