feat(plugin): add align plugin

Author: code-farmer-i

dev/main.js

@@ -30,6 +30,7 @@ import '@/plugins/copy-code/copy-code';
 import createHighLinesPlugin from '@/plugins/highlight-lines/';
 import '@/plugins/highlight-lines/highlight-lines';
 import createMermaidPlugin from '@/plugins/mermaid/cdn';
+import createAlignPlugin from '@/plugins/align';
 
 import vuepressTheme from '@/theme/vuepress';
 import enUS from '@/lang/en-US';
@@ -43,7 +44,8 @@ VueMarkdownEditor.use(createEmojiPlugin())
   .use(createLineNumberPlugin())
   .use(createCopyCodePlugin())
   .use(createHighLinesPlugin())
-  .use(createMermaidPlugin());
+  .use(createMermaidPlugin())
+  .use(createAlignPlugin());
 
 // VueMarkdownEditor.use(githubTheme, {
 //   codeHighlightExtensionMap: {

src/plugins/align/index.js

@@ -0,0 +1,34 @@
+import markdownItContainer from '@/utils/markdown-it-container';
+
+const extendMarkdown = function (mdParser) {
+  if (mdParser) {
+    markdownItContainer(mdParser, {
+      type: 'align-left',
+      defaultTitle: '',
+      before: (info) => `<div align="left">${info || ''}\n`,
+      after: () => '</div>\n',
+    });
+
+    markdownItContainer(mdParser, {
+      type: 'align-center',
+      defaultTitle: '',
+      before: (info) => `<div align="center">${info || ''}\n`,
+      after: () => '</div>\n',
+    });
+
+    markdownItContainer(mdParser, {
+      type: 'align-right',
+      defaultTitle: '',
+      before: (info) => `<div align="right">${info || ''}\n`,
+      after: () => '</div>\n',
+    });
+  }
+};
+
+export default function () {
+  return {
+    install(VMdEditor) {
+      VMdEditor.extendMarkdown(extendMarkdown);
+    },
+  };
+}