Vue中使用Marked

使用marked解析markdown文本

Marked只能解析markdown文本，并不能编辑，倒是可以从数据库中读取markdown文字进行解析

Marked使用也很简单

首先npm install marked -s安装好

然后在你需要使用的组件中直接引入就能用了

完整的代码：

<template>
  <div>
    <div class="context" v-html="compiledMarkdown"></div>
  </div>
</template>

<script>
import { marked } from "marked";
export default {
  name: "index",
  data() {
    return {
      articleDetail: {
        context:
          "[连接](https://maosource.com)<br>" +
          "图片<br>" +
          " <img width='200' height='100' alt=文件 src= https://files.maosource.com/20211108/889e273d2c1c44ecad229dd0100564cc.jpg />",
      }, //数据，可以从数据库中读取
    };
  },
  computed: {
    compiledMarkdown() {
      return marked.parse(this.articleDetail.context);
    },
  },
};
</script>

<style scoped></style>

效果图

另外代码高亮还要另外解析，用highlight.js

// Create reference instance
import { marked } from 'marked';

// Set options
// `highlight` example uses https://highlightjs.org
marked.setOptions({
  renderer: new marked.Renderer(),
  highlight: function(code, lang) {
    const hljs = require('highlight.js');
    const language = hljs.getLanguage(lang) ? lang : 'plaintext';
    return hljs.highlight(code, { language }).value;
  },
  langPrefix: 'hljs language-', // highlight.js css expects a top-level 'hljs' class.
  pedantic: false,
  gfm: true,
  breaks: false,
  sanitize: false,
  smartLists: true,
  smartypants: false,
  xhtml: false
});

// Compile
console.log(marked.parse(markdownString));

更多详细的使用教程可以去看官方文档：https://marked.js.org/