markdown-typora

介绍

这是一个markdown文件解析加渲染一体的功能，可以很好的适应Typora的主题模板

下载

npm i markdown-typora

使用

以vue3为例：

//模块引入
import {markdownToHTML, hljs} from 'markdown-typora'
import md from '@/article/1.md?raw'
import {onMounted} from 'vue'

onMounted(() => {
  const write = document.querySelector('#write')
  write.innerHTML = markdownToHTML(md)
// 代码高亮调用函数
  hljs.highlightAll()
})

此时md文件被转为了html，但是没有css样式，可以自己找css样式，推荐的网站：Themes Gallery — Typora，也可以使用我为你准备的，放在源代码的dist/styles中，直接复制里面的内容，自己新建一个css文件即可，比如：src/assets/css/md_theme.css，然后再main.js中引入即可：

import '@/assets/css/md_theme.css'

引入库

1. markdown-it
2. highlight.js

ts版本

可以查看https://www.npmjs.com/package/markdown-typora-ts