markdown-it+highlight.js后端渲染的代码高亮问题解决

起因

想把自己写的Vue学习笔记挂到自己用heroku搭的小网站上去,已经在npm上搜到GitHub风格的插件,配合markdown-it可以做到GitHub的markdown风格显示效果,但是昨天发现代码没有高亮,想做好代码高亮效果

解决过程

  1. 首先查看markdown-it,毕竟这样一个大插件没有自带的highlight效果可能性很小,Ctrl+F搜索后发现了相关代码,发现了,后端直接赋值。
  2. 复制的代码要用到highlight.js,npm安装之。
  3. 完了发现,没有效果!查看代码,发现确实添上了highlight.js的类了啊,咋回事儿呢?
  4. 各种看相应的文档,百度搜相应的题目,最后还是回归原点,猜吧可能是没有应用相关的样式,添了类也没用,试试吧——BootCDN搜highlight.js找css样式引入到页面上去,成功了,有样式了。
  5. 同时还可以看不同风格的highlight.js的demo,选一个喜欢的风格引入
  6. 其实npm安装后,node_modules里highlight.js文件夹里面就有各种css文件,可是该咋用呢?文档里好像没写啊?目前我没用之前说的CDN,而是直接link引入本地路径调用的。如果有知道怎么用的同学请务必告诉我!
  7. 引入highlight.js的样式后与之前的GitHub样式文件背景色有冲突,想在不改变样式文件的情况下改变背景色的话,代码如下,不过刷新时代码部分会闪动,还不如直接改了样式文件算了
window.onload = function () {
 document.styleSheets[0].cssRules[117].style.backgroundColor="";
}
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
如果你需要在 markdown-it 中同时渲染文本和代码块,并为代码块设置深色背景和高亮效果,你可以使用 markdown-it-highlightjs 插件来实现。以下是具体的步骤: 1. 在你的 UniApp 项目根目录下,通过命令行安装 markdown-it、highlight.js 和 @types/markdown-it: ``` npm install markdown-it highlight.js @types/markdown-it ``` 2. 在你需要使用 markdown-it 的页面或组件中,引入 markdown-it 和 highlight.js: ```javascript import MarkdownIt from 'markdown-it' import hljs from 'highlight.js' ``` 3. 引入 markdown-it-highlightjs 插件并将其应用到 markdown-it 实例上: ```javascript import MarkdownIt from 'markdown-it' import hljs from 'highlight.js' import md from 'markdown-it-highlightjs' md.setOptions({ highlight: function (code, lang) { if (lang && hljs.getLanguage(lang)) { try { return '<pre class="hljs"><code>' + hljs.highlight(lang, code).value + '</code></pre>'; } catch (__) {} } return '<pre class="hljs"><code>' + md.utils.escapeHtml(code) + '</code></pre>'; } }) const markdown = new MarkdownIt().use(md) ``` 4. 使用 markdown-it 解析 markdown 文本,并将结果渲染到页面中: ```javascript const result = markdown.render('# Hello, Markdown!') ``` 5. 在页面中使用渲染结果: ```html <template> <view> <rich-text :nodes="result"></rich-text> </view> </template> <script> export default { data() { return { result: '' } }, mounted() { this.result = result } } </script> <style> pre.hljs { background-color: #333; color: #fff; padding: 10px; } </style> ``` 这样,你就可以在 UniApp 项目中使用 markdown-it 和 highlight.js 来同时渲染文本和代码块,并为代码块设置深色背景和高亮效果了。记得根据你的实际需求进行配置和使用,并在样式中设置代码块的背景色和颜色。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值