vue 使用markedjs

最新推荐文章于 2025-02-11 10:57:15 发布

catgray

最新推荐文章于 2025-02-11 10:57:15 发布

阅读量3.4k

点赞数

分类专栏： GUI 文章标签： vue marked highlight

本文链接：https://blog.youkuaiyun.com/catgray/article/details/95728375

版权

GUI 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何在Vue项目中集成Marked.js库，用于渲染Markdown文本。通过安装和配置，实现了将Markdown内容转化为HTML展示，同时结合highlight.js库对代码块进行高亮显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装

yarn add marked -S
yarn add highlight.js -S

模板

<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>