hexo代码高亮的问题

2017-09-01

分析

首先,看了一下代码块区域的dom结构 发现代码区域的关键字的classkeyword

然后,发现highlight官网给出样式是下图这样的

对比发现,我的class少了hljs-前缀,这样问题就很清晰了

思考

这段markdown代码是如何转换成html格式的呢,只要我们发现了转换的代码, 在其中加上这个前缀,问题不就解决了吗?

解决

查询了相关资料,发现了 hexo 的一个 issue : #434,其中提供这么一段代码hljs.configure({classPrefix: ''})highlight.js,发现它就在node_modules/hexo-util/lib/highlight.js下,这段代码可以给我们的 code css 加上一个前缀,那么这个问题就解决了。

当我调试的时候,发现仍然没有高亮,原因是我们并没有引入highlight.js的高亮 css 文件, 果然在 head 中引入 css 后,起作用了,代码高亮了,真是令人高兴的消息!

接下来,我又想定制高亮主题,我们可以在_config.yml文件中配置主题,从而在 head 中引入相关的 css 文件,这样就可以起到了定制主题的作用。

  • 在 css 文件夹中引入 highlight 的全部主题 css 文件

  • head:

    <% if (theme.highlight_theme){ %>
        <link rel="stylesheet" href="<%- config.root %>css/highlight/<%- theme.highlight_theme %>.css">
    <% } %>
  • _config:
    highlight_theme: atom-one-dark

完~

锁窗前月明色, 雕阑外夜气清