From b760519ffca950a5f6e83dad90237c04608e98ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E5=BF=97=E6=A0=87?= Date: Sun, 25 Jun 2023 22:23:04 +0800 Subject: [PATCH] =?UTF-8?q?fix=20-=20"=E5=89=8D=E5=8F=B0=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E6=B8=B2=E6=9F=93=E4=B8=8D=E4=BA=86=E5=90=8E=E5=8F=B0markdown?= =?UTF-8?q?=E9=83=A8=E5=88=86=E8=AF=AD=E6=B3=95=E7=9A=84bug=EF=BC=9A?= =?UTF-8?q?=E5=8C=85=E6=8B=AC=E5=B1=85=E4=B8=AD=E3=80=81=E5=B7=A6=E5=8F=B3?= =?UTF-8?q?=E5=AF=B9=E9=BD=90=EF=BC=8C=E4=B8=8A=E4=B8=8B=E8=A7=92=E6=A0=87?= =?UTF-8?q?=EF=BC=8C=E8=84=9A=E6=B3=A8=EF=BC=8C=E7=BC=A9=E5=86=99=EF=BC=8C?= =?UTF-8?q?=E8=A1=A8=E6=83=85=EF=BC=8C=E6=8F=92=E5=85=A5=EF=BC=8C=E6=A0=87?= =?UTF-8?q?=E8=AE=B0=E7=AD=89=E8=AF=AD=E6=B3=95=E7=9A=84=E6=B8=B2=E6=9F=93?= =?UTF-8?q?=E3=80=82"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- aurora-vue/aurora-blog/package.json | 8 ++++++++ aurora-vue/aurora-blog/src/main.ts | 1 + aurora-vue/aurora-blog/src/views/Article.vue | 17 ++++++++++++++--- 3 files changed, 23 insertions(+), 3 deletions(-) diff --git a/aurora-vue/aurora-blog/package.json b/aurora-vue/aurora-blog/package.json index 4ff6328..efe17a1 100644 --- a/aurora-vue/aurora-blog/package.json +++ b/aurora-vue/aurora-blog/package.json @@ -13,8 +13,16 @@ "element-plus": "^2.2.9", "js-cookie": "^3.0.1", "markdown-it": "^13.0.1", + "markdown-it-abbr": "^1.0.4", + "markdown-it-container": "^3.0.0", "markdown-it-emoji": "^2.0.2", + "markdown-it-footnote": "^3.0.3", + "markdown-it-ins": "^3.0.1", "markdown-it-katex-external": "^1.0.0", + "markdown-it-mark": "^3.0.1", + "markdown-it-sub": "^1.0.0", + "markdown-it-sup": "^1.0.0", + "mavon-editor": "^3.0.1", "mitt": "^3.0.0", "normalize.css": "^8.0.1", "nprogress": "^0.2.0", diff --git a/aurora-vue/aurora-blog/src/main.ts b/aurora-vue/aurora-blog/src/main.ts index 5e10abd..d32cd9f 100644 --- a/aurora-vue/aurora-blog/src/main.ts +++ b/aurora-vue/aurora-blog/src/main.ts @@ -17,6 +17,7 @@ import { components, plugins } from './plugins/element-plus' import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' import infiniteScroll from 'vue3-infinite-scroll-better' import v3ImgPreview from 'v3-img-preview' +import 'mavon-editor/dist/css/index.css' import api from './api/api' const pinia = createPinia() diff --git a/aurora-vue/aurora-blog/src/views/Article.vue b/aurora-vue/aurora-blog/src/views/Article.vue index 962ac49..a310500 100644 --- a/aurora-vue/aurora-blog/src/views/Article.vue +++ b/aurora-vue/aurora-blog/src/views/Article.vue @@ -93,7 +93,9 @@
@@ -163,7 +165,6 @@ import tocbot from 'tocbot' import emitter from '@/utils/mitt' import { v3ImgPreviewFn } from 'v3-img-preview' import api from '@/api/api' -import markdownToHtml from '@/utils/markdown' export default defineComponent({ name: 'Article', @@ -178,6 +179,16 @@ export default defineComponent({ const loading = ref(true) const articleRef = ref() let md = require('markdown-it')() + .use(require('markdown-it-container'), 'hljs-center') // 容器插件 + .use(require('markdown-it-container'), 'hljs-left') + .use(require('markdown-it-container'), 'hljs-right') + .use(require('markdown-it-sup')) // 上角标插件 + .use(require('markdown-it-sub')) // 下角标插件 + .use(require('markdown-it-footnote')) // 脚注插件 + .use(require('markdown-it-abbr')) // 缩写插件 + .use(require('markdown-it-emoji')) // 表情插件 + .use(require('markdown-it-ins')) // 插入插件 + .use(require('markdown-it-mark')) // 标记插件 const reactiveData = reactive({ articleId: '' as any, article: '' as any, @@ -289,7 +300,7 @@ export default defineComponent({ } commonStore.setHeaderImage(data.data.articleCover) new Promise((resolve) => { - data.data.articleContent = markdownToHtml(data.data.articleContent) + data.data.articleContent = md.render(data.data.articleContent) resolve(data.data) }).then((article: any) => { reactiveData.article = article