版本记录
vue: v2.6.10@vue/cli-plugin-babel: v3.12.0typescript: v3.4.3showdown: v1.9.1
安装 showdown
npm install showdown -D npm install @types/showdown -D 复制代码
基础使用
在显示 Markdown 内容的 Component 中引入 showdown
import showdown from 'showdown' 复制代码
自定义 Markdown 字符串页面显示，先 new 一个 Converter() 函数对象，然后调用 makeHtml() 函数双向绑定 template 进行内容显示，如下代码
<template> <div> <div v-html="html" class="center"></div> </div> </template> <script lang="ts"> import { Component, Vue } from 'vue-property-decorator' import showdown from 'showdown' @Component({ components: {} }) export default class Showdown extends Vue { private html: string = '' private mounted() { const converter = new showdown.Converter() const markdownContent: string = '# Markdown Title `showdown.js`' this.html = converter.makeHtml(markdownContent) } } </script> 复制代码
到这一步应该就能看到 Markdown 基本内容显示了，如下图效果
引入项目中的 md 文件并显示
这里引入项目根目录下的 README.md 文件并显示，使用 import 引入 README.md
import * as readmeContent from '../../../README.md'
控制台报错，提示 Cannot find module '../../../README.md' or its corresponding type declarations
文件路径路径是正确的，缺少类型声明导致，添加类型声明即可。在 src 目录下的 types.d.ts 文件中添加 declare module "*.md", 如下图效果
这时候 md 文件引入就没问题了，使用 console.info(readmeContent) 输出看下内容如何，这时候提示模块解析失败
这个情况需要使用 loader 来处理，分别安装配置 html-loader 和 markdown-loader
npm install html-loader markdown-loader -D
在 vue.config.js 中配置这两个 loader
module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/vue-vuetify-admin/' : '/', outputDir: 'docs', // configureWebpack: { // devtool: 'source-map' // }, chainWebpack: config => { config.module .rule('md') .test(/\.md/) .use('html-loader') .loader('html-loader') .end() .use('markdown-loader') .loader('markdown-loader') .end() } }
配置完以后，需要重新执行 npm run dev 运行服务，操作都OK的话这时候页面的控制台就输出了 README.md 的内容，如下图效果
在页面中显示 README.md 文件中的内容，调整 makeHTML() 的参数为文件内容参数即可
this.html = converter.makeHtml(readmeContent)
通过在 <style lang="scss"></style> 设置样式效果，可以控制页面 Markdown 显示的风格, 最终效果如下
注意：<sytle> 标签中没有 scoped 属性， 添加 scoped 属性后页面样式设置会无效
