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

秒速五厘米 2022-03-01 14:10 1218阅读 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 条评论，1218人围观）

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

相关阅读

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

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

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

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

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

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

相关 VsCode打开.vue文件代码高亮

下载扩展程序里下载 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6L

亦凉/ 2023年07月24日 08:17/ 0 赞/ 24 阅读

相关 Vue2 中使用 highlight 代码高亮插件

[安装通过npm安装，淘宝镜像用cnpm命令][npm_cnpm] npm install --save vue-highlightjs 使用 vue-hi

朴灿烈づ我的快乐病毒、/ 2023年07月18日 02:40/ 0 赞/ 28 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关代码高亮

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

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