「Hexo」设置代码语法高亮

🕓 · ☕1 min read
🏷️
  • #hexo
  • 在使用某个hexo主题的时候,我们有时候会觉得文章详情中的代码高亮显示的样式并不是很好看,通过下面的方式我们可以选择一套自己喜爱的代码高亮样式,让我们的文章阅读起来更有视觉触动。

    配置markdown渲染引擎

    • 使用新的渲染引擎

      1
      2
      
      npm un hexo-renderer-marked --save
      npm i hexo-renderer-markdown-it --save
    • 在_config.yml中配置渲染参数

      1
      
      markdown: 'commonmark'
    • 重新预览

      1
      2
      
      hexo clean
      hexo s --draft

    配置代码高亮

    • 设置code-prettify

      1
      2
      3
      4
      5
      6
      
      # 下载源码
      git clone https://github.com/google/code-prettify.git
      
      # 拷贝样式
      cp code-prettify/src/prettify.css hexo/themes/hyde/source/css/
      cp code-prettify/src/prettify.js hexo/themes/hyde/source/js/
    • 设置皮肤

      1
      2
      3
      4
      5
      6
      
      # 下载源码
      git clone https://github.com/jmblog/color-themes-for-google-code-prettify.git
      
      # 拷贝样式
      cd color-themes-for-google-code-prettify/dist/themes
      cp tomorrow-night.min.css hexo/themes/hyde/source/css/
    • 禁用默认的高亮设置

      1
      2
      3
      4
      5
      6
      
      # 修改_config.yml
      highlight:
      enable: false
      line_number: false
      auto_detect: false
      tab_replace: false
    • 在主题模板文件中设置高亮

       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      12
      13
      14
      
      # head标签里引入css
      <%- css('css/prettify.css', 'css/tomorrow-night.min') %>
      
      # 文档底部引入js
      <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
      <%- js('js/prettify.js') %>
      
      # 高亮设置
      <script type="text/javascript">
      $(window).on('load', function(){ 
      $('pre').addClass('prettyprint linenums');
      prettyPrint();
      });
      </script>
    • 刷新预览

      1
      2
      
      hexo clean
      hexo s --draft

    参考