更新记录

1.0.0(2024-01-06) 下载此版本

1.0.0


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.6.0 app-vue × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

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

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

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问