vue使用v-html如何渲染markdown?

原创已于 2022-03-09 15:55:09 修改 · 3.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2022-03-08 18:48:50 首次发布

vue 专栏收录该内容

61 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中使用Markdown，从基本的安装到深入的使用，包括引入marked库进行Markdown转HTML，结合highlight.js实现代码高亮。在深入使用部分，提到了如何配置marked选项以达到理想效果，并提供了遇到问题时如表格样式调整的解决方案。文章还分享了引入highlight.js库和相关样式的步骤，帮助改善Markdown渲染的视觉体验。

1.简单使用

安装marked的插件

npm install marked -S

2.文件内引入

import { marked } from 'marked'

3.使用计算属性进行markdown to html

computed: {
	markdownToHtml(){
		return marked('# 我是markdown的一级标题');
	}
}

4.页面使用

<div v-html="markdownToHtml"></div>

2. 深入使用

上述是最简单的用法，再高深一些的使用方式如下：

1.和上述一致

2.和上述一致

3.使用computed转换成html
语法：marked(markdownString, options, callback )
该种使用 + highlight 可高亮语法

  computed: {
    markdownToHtml() {
      return marked(this.vHtml, {
        renderer: new marked.Renderer(),
        highlight: function(code, lang, callback) {
          return require("highlight.js").highlight(lang, code).value;
        },
        langPrefix: "hljs ",
        pedantic: false,
        gfm: true,
        tables: true,
        breaks: false,
        sanitize: false,
        smartLists: true,
        smartypants: false,
        xhtml: false
      });
    }
  },

4.和上述一致

5.在html引入highlight
highlight官网

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js"></script>

或者:
安装依赖

npm install highlight.js

引入依赖

import highlight from "highlight.js";
import "highlight.js/styles/default.css";

3. 遇到的问题

在渲染markdown的table时，只有难看的格式，和期望的不一样。实际此时已经渲染出来样式了，只需要重写样式即可
将如下样式引入项目即可:

// markdown里的部分样式重写
.markdown_article {
    table {
        width: 100%;
        /*表格宽度*/
        max-width: 65em;
        /*表格最大宽度，避免表格过宽*/
        border: 1px solid #dedede;
        /*表格外边框设置*/
        // margin: 15px auto;
        /*外边距*/
        border-collapse: collapse;
        /*使用单一线条的边框*/
        empty-cells: show;
        /*单元格无内容依旧绘制边框*/
    }

    table th,
    table td {
        height: 35px;
        /*统一每一行的默认高度*/
        border: 1px solid #dedede;
        /*内部边框样式*/
        padding: 0 10px;
        /*内边距*/
    }

    table th {
        font-weight: bold;
        /*加粗*/
        text-align: center !important;
        /*内容居中，加上 !important 避免被 Markdown 样式覆盖*/
        background: rgba(158, 188, 226, 0.2);
        /*背景色*/
    }

    table tbody tr:nth-child(2n) {
        background: rgba(158, 188, 226, 0.12);
    }

    // table tr:hover {
    //     background: #efefef;
    // }
}