VueCli3+TypeScript3项目显示Markdown内容

版本记录

vue: v2.6.10 @vue/cli-plugin-babel: v3.12.0 typescript: v3.4.3 showdown: 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 属性后页面样式设置会无效

项目链接

github.com/gywgithub/v…