附cherry-markdown官網及api使用示例
官網：https://github.com/Tencent/cherry-markdown/blob/main/README.CN.md
api：Cherry Markdown API
考慮到復用性，我在插件的基礎上做了二次封裝，步驟如下：
1.下載 （一定要指定版本0.8.22，否則會報錯： [vitel Internal server error: Failed to parse soERRORrce for import analysis because the content contains invalid Js syntax. If you are using JSX, make sure to name the file with the...）
npm i cherry-markdown@0.8.22如果需要開啟 mermaid 畫圖、表格自動轉圖表功能，需要同時添加mermaid 與echarts包。
目前Cherry推薦的插件版本為echarts@5.3.3、mermaid@9.4.3
# 安裝mermaid依賴開啟mermaid畫圖功能
npm i mermaid@9.4.3# 安裝echarts依賴開啟表格自動轉圖表功能
npm i echarts@5.3.3基礎應用代碼示例
<template><div @click.prevent.stop><div id="markdown-container"></div></div>
</template><script>
import 'cherry-markdown/dist/cherry-markdown.css';
import Cherry from 'cherry-markdown';
const cherryInstance = new Cherry({id: 'markdown-container',value: '# welcome to cherry editor!',
});
</script>關于 mermaid（插件注冊必須在Cherry實例化之前完成）
核心構建包不包含 mermaid 依賴，需要手動引入相關插件。
import 'cherry-markdown/dist/cherry-markdown.css';
import Cherry from 'cherry-markdown/dist/cherry-markdown.core';
import CherryMermaidPlugin from 'cherry-markdown/dist/addons/cherry-code-block-mermaid-plugin';
import mermaid from 'mermaid';// 插件注冊必須在Cherry實例化之前完成
Cherry.usePlugin(CherryMermaidPlugin, {mermaid, // 傳入mermaid引用// mermaidAPI: mermaid.mermaidAPI, // 也可以傳入mermaid API// 同時可以在這里配置mermaid的行為，可參考mermaid官方文檔// theme: 'neutral',// sequence: { useMaxWidth: false, showSequenceNumbers: true }
});const cherryInstance = new Cherry({id: 'markdown-container',value: '# welcome to cherry editor!',
});2.附上組件代碼
<template><div @click.prevent.stop style="position: relative; width: 100%; height: 100%; z-index: 9999999999;text-align: left;"><!-- ------- markdown組件容器 --------- --><div ref="markdownContainerRef" :id="mdId" class="cherry_container scroll":style="{ 'left': toc_Visiable ? '262px' : '0px' }" @scroll="onScroll"></div><!-- ------- 顯示目錄 --------- --><!-- <div class="toc_container" v-show="toc_Visiable"><div class="toc_header">目錄</div><div class="toc_list"><div v-for="(link, index) in toc_List" :key="link.id" class="toc_list_container":style="{ 'padding-left': link.level * 20 + 'px' }" @click="jump(index)">{{ link.text }}</div></div></div><div class="top-contrl"><div v-if="!toc_Visiable" @click="showToc(true)">顯示目錄</div><div v-else @click="showToc(false)">隱藏目錄</div></div> --></div>
</template><script setup>
import { ref, onMounted, onBeforeMount, watch, onBeforeUnmount, toRefs, reactive, nextTick } from 'vue';
import Axios from 'axios';
import 'cherry-markdown/dist/cherry-markdown.css';
import Cherry from 'cherry-m
)
