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

2022-12-29 14:58:46 浏览数 (1)

问题描述

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

原因分析

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

解决办法

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

代码语言:javascript复制
prismjs:
  enable: true

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

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

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

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

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

代码语言:javascript复制
<link rel="stylesheet" href="/css/prism.css">

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

代码语言:javascript复制
<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代码高亮

0 人点赞