更新记录

1.0.0（2024-01-06）

1.0.0

平台兼容性

使用插件前需要安装如下依赖

npm i classnames unified hast-util-sanitize rehype-raw rehype-sanitize rehype-stringify remark-breaks remark-gemoji remark-gfm remark-parse remark-rehype unist-util-visit rehype-prism-plus

{
  "classnames": "^2.3.2",
  "hast-util-sanitize": "^5.0.1",
  "rehype-prism-plus": "^1.6.3",
  "rehype-raw": "^7.0.0",
  "rehype-sanitize": "^6.0.0",
  "rehype-stringify": "^10.0.0",
  "remark-breaks": "^4.0.0",
  "remark-gemoji": "^8.0.0",
  "remark-gfm": "^4.0.0",
  "remark-parse": "^11.0.0",
  "remark-rehype": "^11.0.0",
  "unified": "^11.0.4",
  "unist-util-visit": "^5.0.0",
}

由于小程序不支持dom操作，接下来需要配置 vite.config.ts 将 decode-named-character-reference 解析到无 dom 环境的版本

import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [uni()],
  resolve: {
    alias: {
      'decode-named-character-reference': 'node_modules/decode-named-character-reference/index.js',
    },
  },
});

小程序示例

<template>
  <view>
    <markdown-viewer :node="node" />
  </view>
</template>

<script lang="ts" setup>
import MarkdownViewer from '@/components/markdown-viewer/markdown-viewer.vue';
import { articleStrategy, toHast } from '@/markdown';
import { useHast } from '@/hooks';

const md = 'markdown 内容';
const { node, setChunkHast } = useHast();

const hast = toHast(md, articleStrategy);
node.value = hast;
// 小程序 setData 方法内容过大会有性能问题，这时候可以使用 setChunkHast
// setChunkHast(hast);
</script>

h5示例

<template>
  <view>
    <view v-html="html" />
  </view>
</template>

<script lang="ts" setup>
import { articleStrategy, getProcessor } from '@/markdown';

const md = 'markdown 内容';

const html = getProcessor(articleStrategy).processSync(md).toString()
.toString()
</script>

h5 需要单独引入css