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

配置markdown渲染引擎

  • 使用新的渲染引擎
npm un hexo-renderer-marked --save
npm i hexo-renderer-markdown-it --save
  • 在_config.yml中配置渲染参数
markdown: 'commonmark'
  • 重新预览
hexo clean
hexo s --draft

配置代码高亮

  • 设置code-prettify
# 下载源码
=======



    
    
    「Hexo」设置代码语法高亮 – 艾逗笔个人博客
    

    
    





    

















    

    









    
    

「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
      
      # 下载源码
      >>>>>>> 88cd131d189d9d876938cf7072c5049d5300cb56
      git clone https://github.com/google/code-prettify.git
      
      # 拷贝样式
      cp code-prettify/src/prettify.css hexo/themes/hyde/source/css/
      <<<<<<< HEAD
      cp code-prettify/src/prettify.js hexo/themes/hyde/source/js/
      
      
      • 设置皮肤
      # 下载源码
      =======
      cp code-prettify/src/prettify.js hexo/themes/hyde/source/js/
    • 设置皮肤

      1
      2
      3
      4
      5
      6
      
      # 下载源码
      >>>>>>> 88cd131d189d9d876938cf7072c5049d5300cb56
      git clone https://github.com/jmblog/color-themes-for-google-code-prettify.git
      
      # 拷贝样式
      cd color-themes-for-google-code-prettify/dist/themes
      <<<<<<< HEAD
      cp tomorrow-night.min.css hexo/themes/hyde/source/css/
      
      • 禁用默认的高亮设置
      # 修改_config.yml
      highlight:
        enable: false
        line_number: false
        auto_detect: false
        tab_replace: false
      
      • 在主题模板文件中设置高亮
      # 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>
      
      • 刷新预览
      hexo clean
      hexo s --draft
      

      参考

      Powered by Hexo, Theme by Concise
      ======= 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

    参考

    >>>>>>> 88cd131d189d9d876938cf7072c5049d5300cb56