版本记录
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'
<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()
的参数为文件内容参数即可
注意:<sytle>
标签中没有 scoped
属性, 添加 scoped
属性后页面样式设置会无效