fix - "前台页面渲染不了后台markdown部分语法的bug：包括居中、左右对齐，上下角标，脚注，缩写，表情，插入，标记等语法的渲染。"

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",

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()

aurora-vue/aurora-blog/src/views/Article.vue

@@ -93,7 +93,9 @@
     <div class="main-grid">
       <div>
         <template v-if="article.articleContent">
-          <div class="post-html" ref="articleRef" v-html="article.articleContent" />
+          <div class="post-html">
+            <div class="markdown-body" ref="articleRef" v-html="article.articleContent" />
+          </div>
         </template>
         <div v-else class="bg-ob-deep-800 px-14 py-16 rounded-2xl shadow-xl block min-h-screen">
           <ob-skeleton tag="div" :count="1" height="36px" width="150px" class="mb-6" />
@@ -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