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/utils/markdown.ts b/aurora-vue/aurora-blog/src/utils/markdown.ts index 1648a6a..6f6f193 100644 --- a/aurora-vue/aurora-blog/src/utils/markdown.ts +++ b/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) } diff --git a/aurora-vue/aurora-blog/src/views/Archives.vue b/aurora-vue/aurora-blog/src/views/Archives.vue index 7878509..41baad1 100644 --- a/aurora-vue/aurora-blog/src/views/Archives.vue +++ b/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, '') diff --git a/aurora-vue/aurora-blog/src/views/Article.vue b/aurora-vue/aurora-blog/src/views/Article.vue index 962ac49..936b2ea 100644 --- a/aurora-vue/aurora-blog/src/views/Article.vue +++ b/aurora-vue/aurora-blog/src/views/Article.vue @@ -93,7 +93,9 @@
@@ -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, '') diff --git a/aurora-vue/aurora-blog/src/views/ArticleList.vue b/aurora-vue/aurora-blog/src/views/ArticleList.vue index 3ae41b3..7fe6044 100644 --- a/aurora-vue/aurora-blog/src/views/ArticleList.vue +++ b/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, '') diff --git a/aurora-vue/aurora-blog/src/views/Home.vue b/aurora-vue/aurora-blog/src/views/Home.vue index 14b0911..25195b5 100644 --- a/aurora-vue/aurora-blog/src/views/Home.vue +++ b/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, '')