如何让hexo代码高亮？

Posted 2023-04-08

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何让hexo代码高亮？相关的知识，希望对你有一定的参考价值。

由于hexo代码使用的Markdown语法，Markdown的语法可以参考Markdown语法介绍。所以可以使用Markdown的方式实现代码的高亮，通常有以下三种方式：使用双空格缩进的方式（这种方式在Hexo中代码不支持高亮），使用```code block```的方式（这种方式在部分情况下可以高亮，但是在我的机器上却不能实现高亮），使用代码块的语法，具体可以看Codeblock - Octopress。我使用这种方式在我的hexo博客代码的高亮。hexo使用highlight.js. 在markdown中用```cppthis is cpp code```告诉hexo生成带高亮的codeblock然而highlight.js支持的格式较少而且好像不太好配置，unix user可以用我写的一个hexo插件: GitHub - ppwwyyxx/hexo-tag-vimhighlight: Highlight code using vim in hexo. 这个插件调用vim, 把vim的代码高亮嵌入html. vim里什么颜色最后blog里就是什么颜色.

参考技术A

很久以前就想搭建一个个人技术博客的网站了，但是那时候接触的东西不多，没有听说过hexo、jekyll、wordpress等快速blog生成工具，自己在网上找了博客模板，修改了一下前端代码，用eclipse基于jsp搭建了一个小型博客发布到阿里云，但是时间久了发现自己写的代码不稳定，经常获取不到数据库数据，于是放弃了做个人博客网站的想法。后来听说了hexo，但是一直没有定下心去看官方文档，于是搭博客网站的想法再一次不了了之。今晚闲暇，实在不知道该干什么，于是捡起了搭博客的想法，入门了hexo搭建github博客，现在记录下来，也算是作个念象，给想要搭建个人博客网站的小伙伴们一个参考。

《Hexo: 从零开始编写自己的主题》4. fancybox优化图片展示效果代码高亮以及数学公式

《Hexo: 从零开始编写自己的主题》

1. Hexo概述以及Hexo工作原理
 2. 入门Hexo主题编写
 3. 优化样式，设计自己的主题
 4. fancybox优化图片展示效果、代码高亮以及数学公式
 5. 添加本地搜索功能以及发布博客让官网接收
 6. 添加自己的脚本处理数学公式

4. fancybox优化图片展示效果、代码高亮与数学公式

查看效果 https://smileyan.cn/heyan/ 。

这部分内容非常简单，但我也是琢磨了不少时间，踩了不少的坑才完成的。

4.1 添加 fancybox

如果 csdn 博客一样，我们点击博客中的图片可以用放大的效果，这个功能的实现只需要以下几个步骤即可。

4.1.1 引入 css / js 资源

在header.ejs 中引入以下资源（也可以认为是在 layout.ejs 中引入）

<link rel="stylesheet" href="https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.css">

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="//lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.js"> </script>

4.1.2 添加fancybox.js文件

在自己主题的source 目录下添加 js 文件夹，并新建 fancybox.js 文件，复制以下代码并张贴进去。

$(document).ready(function() 
    $('img').each(function() 
      if ($(this).parent().hasClass('fancybox')) return;
      if ($(this).hasClass('nofancybox')) return;
      var alt = this.alt;
      if (alt) $(this).after('<span class="caption">' + alt + '</span>');
      $(this).wrap('<a href="' + ($(this).attr('data-src') == null ? this.src : $(this).attr('data-src')) + '" title="' + alt + '" class="fancybox"></a>');
    );
    $(this).find('.fancybox').each(function()
      $(this).attr('rel', 'article');
    );
  );
  $(document).ready(function() 
    $("a[href$='.jpg'],a[href$='.png'],a[href$='.gif'],a[href$='.webp']").attr('rel', 'gallery').fancybox(
      helpers : 
      title:  type: 'inside'
      
    );
);

很明显用到的jQuery，这个地方确实可以替换成为不含jquery的方法，但是没有必要，jquery 后面我们也需要用到。

4.1.3 引入这个 js 文件

同样是在 header.ejs 或者说 layout.ejs 中引入这个 js 文件。

<%- js('js/fancybox.js') %>

4.1.4 配置样式

修改一下 css 文件，以保证图片的显示不会超出它所在的父级容器。我们将所有的 post 内容被 <div class="markdown-section"> 所包围，接下来指定其中的 img 标签即可。

// fancybox 
.markdown-section img 
  max-width: 100%;
  padding: 0.5em 0;
  margin: auto;
  display: block;

// fancybox 
.caption 
  color: #444;
  display: block;
  font-size: 0.9em;
  margin-top: 0.1em;
  position: relative;
  text-align: center;

4.1.5 查看效果

编写md文件，引入某张图片进行展示，然后重新启动 hexo 就可以看到如下效果：

点击猫咪后，可以看到

表示工作已经完成。

4.2 代码高亮

代码高亮的原理为，Hexo 引擎根据markdown的文字在生成 html 文件的时候，附加一些类，比如说默认情况下代码块中是不含关键字，不好代码高亮，但是配置 hexo 以后生成的文件会附带一些 class = ‘xxx’ ，然后我们导入相关的css文件就可以进行渲染了。

一般情况下hexo提供两种方法，highlight.js 与 prism.js，踩过一些坑，我最后从 hljs 迁移到 prism.js 。主要理由是 prism.js 更加简单方便，灵活可控，支持的语言更多，提供一些好用的插件。

4.2.1 下载个性化 prism

前去官网https://prismjs.com/download.html 选择自己喜欢的主题，并勾选自己需要的语言，就可以点击下载 prism.js 与 prism.css 两个文件了。

选择自己需要用到的语言。

左上角四个
bash
java
C
C++
Go
python
scala
yaml
等

选择自己需要的插件，比如代码行数，代码块右上角代码复制功能，显示代码的语言。

点击下面的两个下载按钮，分别得到 css 与 js 文件。

然后将这两个文件分别放到主题的source/js source/css 目录下，最后在我们的header.ejs / layout.ejs 中引入这两个文件即可。

<%- css('css/prism')  %> 
<%- js('js/prism.js') %>

查看效果：

4.3 数学公式

在header.ejs / layout.ejs 中添加依赖，并初始化。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML" async></script>
<script type="text/javascript">hljs.initHighlightingOnLoad();</script>