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)
"
+ "图片
"
+ " 文件", }, //数据,可以从数据库中读取 }; }, computed: { compiledMarkdown() { return marked.parse(this.articleDetail.context); }, }, }; </script> <style scoped></style>

效果图
Vue中使用Marked_第1张图片
另外代码高亮还要另外解析,用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/

你可能感兴趣的:(Marked,vue,markdown)