Merge pull request #128 from ling-1/master

修复前台markdown渲染

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/utils/markdown.ts

@@ -5,5 +5,14 @@ export default function markdownToHtml(content: any) {
   })
     .use(require('markdown-it-katex-external'))
     .use(require('markdown-it-emoji'))
+    .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-ins'))                       // 插入插件
+    .use(require('markdown-it-mark'))                      // 标记插件 
   return md.render(content)
 }

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

@@ -54,6 +54,7 @@ import { useI18n } from 'vue-i18n'
 import Breadcrumb from '@/components/Breadcrumb.vue'
 import Paginator from '@/components/Paginator.vue'
 import api from '@/api/api'
+import markdownToHtml from '@/utils/markdown'
 
 export default defineComponent({
   name: 'Archives',
@@ -62,7 +63,6 @@ export default defineComponent({
     const commonStore = useCommonStore()
     const articleStore = useArticleStore()
     const { t } = useI18n()
-    let md = require('markdown-it')()
     const pagination = reactive({
       current: 1,
       total: 0,
@@ -85,8 +85,7 @@ export default defineComponent({
         .then(({ data }) => {
           data.data.records.forEach((item: any) => {
             item.articles.forEach((article: any) => {
-              article.articleContent = md
-                .render(article.articleContent)
+              article.articleContent = markdownToHtml(article.articleContent)
                 .replace(/<\/?[^>]*>/g, '')
                 .replace(/[|]*\n/, '')
                 .replace(/&npsp;/gi, '')

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" />
@@ -177,7 +179,6 @@ export default defineComponent({
     const { t } = useI18n()
     const loading = ref(true)
     const articleRef = ref()
-    let md = require('markdown-it')()
     const reactiveData = reactive({
       articleId: '' as any,
       article: '' as any,
@@ -302,8 +303,7 @@ export default defineComponent({
           })
         })
         new Promise((resolve) => {
-          data.data.preArticleCard.articleContent = md
-            .render(data.data.preArticleCard.articleContent)
+          data.data.preArticleCard.articleContent = markdownToHtml(data.data.preArticleCard.articleContent)
             .replace(/<\/?[^>]*>/g, '')
             .replace(/[|]*\n/, '')
             .replace(/&npsp;/gi, '')
@@ -312,8 +312,7 @@ export default defineComponent({
           reactiveData.preArticleCard = preArticleCard
         })
         new Promise((resolve) => {
-          data.data.nextArticleCard.articleContent = md
-            .render(data.data.nextArticleCard.articleContent)
+          data.data.nextArticleCard.articleContent = markdownToHtml(data.data.nextArticleCard.articleContent)
             .replace(/<\/?[^>]*>/g, '')
             .replace(/[|]*\n/, '')
             .replace(/&npsp;/gi, '')

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

@@ -31,13 +31,13 @@ import { ArticleCard } from '@/components/ArticleCard'
 import Paginator from '@/components/Paginator.vue'
 import { useRoute } from 'vue-router'
 import api from '@/api/api'
+import markdownToHtml from '@/utils/markdown'
 
 export default defineComponent({
   name: 'ArticleList',
   components: { Breadcrumb, ArticleCard, Paginator },
   setup() {
     const route = useRoute()
-    let md = require('markdown-it')()
     const pagination = reactive({
       size: 12,
       total: 0,
@@ -62,8 +62,7 @@ export default defineComponent({
         })
         .then(({ data }) => {
           data.data.records.forEach((item: any) => {
-            item.articleContent = md
-              .render(item.articleContent)
+            item.articleContent = markdownToHtml(item.articleContent)
               .replace(/<\/?[^>]*>/g, '')
               .replace(/[|]*\n/, '')
               .replace(/&npsp;/gi, '')

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

@@ -81,6 +81,7 @@ import { useCategoryStore } from '@/stores/Category'
 import { useI18n } from 'vue-i18n'
 import Paginator from '@/components/Paginator.vue'
 import api from '@/api/api'
+import markdownToHtml from '@/utils/markdown'
 
 export default defineComponent({
   name: 'Home',
@@ -123,7 +124,6 @@ export default defineComponent({
       current: 1
     })
     let nowCategoryId = 0
-    let md = require('markdown-it')()
     onMounted(() => {
       fetchTopAndFeatured()
       fetchCategories()
@@ -133,14 +133,12 @@ export default defineComponent({
     })
     const fetchTopAndFeatured = () => {
       api.getTopAndFeaturedArticles().then(({ data }) => {
-        data.data.topArticle.articleContent = md
-          .render(data.data.topArticle.articleContent)
+        data.data.topArticle.articleContent = markdownToHtml(data.data.topArticle.articleContent)
           .replace(/<\/?[^>]*>/g, '')
           .replace(/[|]*\n/, '')
           .replace(/&npsp;/gi, '')
         data.data.featuredArticles.forEach((item: any) => {
-          item.articleContent = md
-            .render(item.articleContent)
+          item.articleContent = markdownToHtml(item.articleContent)
             .replace(/<\/?[^>]*>/g, '')
             .replace(/[|]*\n/, '')
             .replace(/&npsp;/gi, '')
@@ -163,8 +161,7 @@ export default defineComponent({
           .then(({ data }) => {
             if (data.flag) {
               data.data.records.forEach((item: any) => {
-                item.articleContent = md
-                  .render(item.articleContent)
+                item.articleContent = markdownToHtml(item.articleContent)
                   .replace(/<\/?[^>]*>/g, '')
                   .replace(/[|]*\n/, '')
                   .replace(/&npsp;/gi, '')
@@ -188,8 +185,7 @@ export default defineComponent({
         })
         .then(({ data }) => {
           data.data.records.forEach((item: any) => {
-            item.articleContent = md
-              .render(item.articleContent)
+            item.articleContent = markdownToHtml(item.articleContent)
               .replace(/<\/?[^>]*>/g, '')
               .replace(/[|]*\n/, '')
               .replace(/&npsp;/gi, '')