首页 > 其他分享 >使用3-hexo主题时无法正常渲染html代码

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

时间:2022-12-25 21:55:24浏览次数:59  
标签:插件 hexo 渲染 prism html prismjs css

问题描述

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

原因分析

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

解决办法

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

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

<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代码高亮

标签:插件,hexo,渲染,prism,html,prismjs,css
From: https://www.cnblogs.com/nuccch/p/17004669.html

相关文章