使用3-hexo主题时无法正常渲染html代码

问题描述

在hexo框架中使用3-hexo主题时，会遇到这样一个问题：在markdown中嵌入html代码，这些嵌入的html代码无法正常显示。

原因分析

在使用3-hexo主题时，默认使用主题自带的渲染插件（会禁用highlight和prismjs），该插件会把这些嵌入的html代码进行渲染，所以无法正常显示html代码本身。

解决办法

使用hexo框架默认自带的prismjs插件进行渲染，具体实现：编辑项目根目录下的_config.yml文件，启用prismjs插件。

prismjs:
  enable: true

只要启用hexo框架默认自带的prismjs高亮插件即可实现对嵌入html代码的正常显示。

但是默认情况下，渲染的html代码样式可能不满足需求，此时可以对prismjs插件进行定制。

首先， 重新下载prismjs插件对应的css文件和js文件，重命名为：prism.css和prism.js。并分别放置到3-hexo主题目录路径下，即：themes/3-hexo/source/css/prism.css和themes/3-hexo/source/js/prism.js。

其次， 在3-hexo主题文件中分别引入prism插件css文件和js文件，具体来说：

在themes/3-hexo/layout/_partial/header.ejs文件中引入prism.css：

<link rel="stylesheet" href="/css/prism.css">

在themes/3-hexo/layout/_partial/footer.ejs中引入prism.js：

<script src="/js/prism.js" async></script>

最后，根据具体需要再次细调相应文件中的css样式即可。

【参考】

https://zicowarn.github.io/2020/09/02/hexo-02-embed-html-and-downloads-code/ Hexo 解决嵌入的html被渲染的问题和code_dir的配置项的用法

https://www.jianshu.com/p/f395d92a1110 Hexo博客：六、prism代码高亮