vue 中使用 marked + highlight.js 代码高亮

秒速五厘米 2022-03-01 14:10 1183阅读 0赞

# markdown 代码高亮 #

需要依赖

*  `npm install marked --save`
 *  `npm install highlight.js --save`

这里使用的主题是`monokai-sublime.css`可以自行更换主题。

结果

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NyaWJ1ZzgwODA_size_16_color_FFFFFF_t_70_pic_center]

<template>
      <div>
        <div class="hljs" ref="hlDiv" v-html="code"></div>
      </div>
    </template>
    
    <script> import marked from 'marked' import hljs from "highlight.js"; import javascript from 'highlight.js/lib/languages/javascript'; import 'highlight.js/styles/monokai-sublime.css'; export default { name: "height", data(){ return { code:'```javascript\nfunction(){\n\tconsole.log(123)\n}\n```' } }, mounted(){ marked.setOptions({ renderer: new marked.Renderer(), highlight: function(code) { return hljs.highlightAuto(code).value; }, pedantic: false, gfm: true, tables: true, breaks: false, sanitize: false, smartLists: true, smartypants: false, xhtml: false } ); this.code = marked(this.code) }, } </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NyaWJ1ZzgwODA_size_16_color_FFFFFF_t_70_pic_center]: /images/20220301/6f7992993d4645c5ad4e88f08550736b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1183人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue中如何进行代码高亮与语法着色？

Vue中如何进行代码高亮与语法着色？在Vue的开发过程中，我们经常需要展示代码片段或者进行代码高亮与语法着色。Vue提供了多种方式来实现代码高亮与语法着色，本文将为你详

╰半橙微兮°/ 2024年03月16日 17:53/ 0 赞/ 71 阅读

相关使用highlight.js和marked.js格式代码和高亮代码

使用highlight.js和marked.js格式代码和高亮代码 highlight.js是什么？ highlight.js 是一个语法高亮的 JavaScrip

港控/mmm°/ 2023年10月14日 18:39/ 0 赞/ 42 阅读

相关 highlight 代码高亮

`hljs.initHighlightingOnLoad();` //高亮全部 `hljs.highlightBlock(document.getElementBy

﹏ヽ暗。殇╰゛Y/ 2023年10月09日 12:05/ 0 赞/ 73 阅读

相关 wangeditor3如何集成highlightJs实现代码高亮？

最近在整改个人博客的过程中，想顺手将以前使用的一个富文本编辑器wangEditor也升级一下，却碰到了一个非常操蛋的问题，在版本迭代到了3.x的时候（本文中使用的是3.1.1版

怼烎@/ 2022年12月11日 09:09/ 0 赞/ 412 阅读

相关 Vue中使用Prismjs高亮TinyMCE富文本编辑保存的代码

1.安装Prism.js cnpm install prismjs -S 2.安装prismjs编译器 cnpm install babel-pl

短命女/ 2022年11月02日 15:28/ 0 赞/ 26 阅读

相关 html文档支持代码高亮,vue.js中如何实现代码高亮功能？

vue.js中如何实现代码高亮功能？下面本篇文章给大家介绍一下Vue中实现代码高亮功能的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 ![189bc

桃扇骨/ 2022年10月06日 06:58/ 0 赞/ 470 阅读

相关 vue 中 wangeditor3 使用highlight 代码高亮【最新解读】

目的：vue 中 wangeditor3 使用highlight 代码高亮很遗憾，在我花了2个时间研究这个问题之后得出的结论是，无法完成。 ![watermark_t

分手后的思念是犯贱/ 2022年04月14日 04:59/ 0 赞/ 900 阅读

相关 vue 中使用 marked + highlight.js 代码高亮

markdown 代码高亮需要依赖 `npm install marked --save` `npm install highlight.js --sav

秒速五厘米/ 2022年03月01日 14:10/ 0 赞/ 1184 阅读

相关 Quill使用highlightjs做代码块高亮失效问题

先给出官方实例  <link href="high

末蓝、/ 2022年01月21日 09:55/ 0 赞/ 291 阅读

相关代码高亮

知识点代码高亮显示符号 \` 代码高亮显示符号 ~(不推荐) 演示内容 ```java public static void

ゞ浴缸里的玫瑰/ 2021年12月14日 00:27/ 0 赞/ 412 阅读