【BLOG】HEXO实现代码高亮的方法

BLOG

字数统计: 407阅读时长: 1 min

 2020/03/10   Share

以前只是听到过代码高亮这个概念但不了解，昨晚终于完全理解，但可能永远不想再看见highlight这个单词了，这东西坑真的太多了，凌晨调到一点多才调试完成。

参考

1
2
3

<div class="header">头部区域</div>
<div class="banner">banner区域</div>
<div class="main">主体部分</div>

我使用的是HEXO下的archer主题，所以以这个主题作为范例。

首先查阅开发者文档得知该主题已预先设置好highlight.js内的atom-one-dark配色，因为这正好是我在编程时所习惯使用的代码配色，所以就直接使用了（其他主题也可查看开发者文档相应内容）。

将需要代码高亮的代码块用如下格式输入即可实现。

1
2
3

``` key        //key指语言类型，如javascript等，你的代码是什么语言就输入什么
      code     //你的代码
```

注意，在第一行三个反引号后语言类型前须加一个空格！这是个大坑！

如果在自己的md编辑器运行预览高亮效果不存在也没有关系，比如我用的MarkdownPad2预览就没有高亮效果，但是部署到博客之后就正常显示了，但是这样调试特别麻烦，出了问题需要反复部署，以后有时间再去研究解决一下这个问题。

Author：oCodeHoney

Date：2020-3-10

CATALOG

