一、安装

1. # 使用 npm
   
2. npm i @kangc/v-md-editor -S
   
3. 
   
4. # 使用yarn
   
5. yarn add @kangc/v-md-editor

复制代码

二、三种实现形式


1、编辑器的只读模式

main.ts文件中配置：

1. import VMdEditor from '@kangc/v-md-editor';
   
2. import '@kangc/v-md-editor/lib/style/base-editor.css';
   
3. 
   
4. const app = createApp(/*...*/);
   
5. 
   
6. app.use(VMdEditor);

复制代码

使用的组件中：

1. <template>
   
2.   <v-md-editor v-model="text" mode="preview"></v-md-editor>
   
3. </template>、
   
4. //text为要传入的markdown格式的内容

复制代码

2、预览组件

main.ts中配置：

1. import VMdPreview from '@kangc/v-md-editor/lib/preview';
   
2. import '@kangc/v-md-editor/lib/style/preview.css';
   
3. 
   
4. const app = createApp(/*...*/);
   
5. 
   
6. app.use(VMdPreview);

复制代码

使用的组件中：

1. <template>
   
2.   <v-md-preview :text="text"></v-md-preview>
   
3. </template>
   
4. //text为要传入的markdown格式的内容

复制代码

3、html预览组件

main.ts中配置：

1. import VMdPreviewHtml from '@kangc/v-md-editor/lib/preview-html';
   
2. import '@kangc/v-md-editor/lib/style/preview-html.css';
   
3. 
   
4. // 引入使用主题的样式
   
5. import '@kangc/v-md-editor/lib/theme/style/vuepress';
   
6. 
   
7. const app = createApp(/*...*/);
   
8. 
   
9. app.use(VMdPreviewHtml);

复制代码

使用的组件中：

1. <template>
   
2.   <!-- preview-class 为主题的样式类名，例如vuepress就是vuepress-markdown-body -->
   
3.   <v-md-preview-html :html="html" preview-class="vuepress-markdown-body"></v-md-preview-html>
   
4. </template>

复制代码

三、实现其他功能


1、设置外观

1. import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
   
2. 
   
3. import '@kangc/v-md-editor/lib/theme/style/vuepress.css';   
   
4. //这个css文件，它与 vuepressTheme 主题相关，定义了主题的颜色、字体、间距等样式。
   
5. 
   
6. // 使用 vuepress 主题
   
7. VueMarkdownEditor.use(vuepressTheme);

复制代码

2、对代码进行语法高亮并显示代码语言

1. import Prism from 'prismjs';
   
2. 
   
3. VueMarkdownEditor.use({
   
4.   Prism,
   
5. });

复制代码

3、代码块显示行号

1. //main.ts中
   
2. 
   
3. import VueMarkdownEditor from '@kangc/v-md-editor';
   
4. import createLineNumbertPlugin from '@kangc/v-md-editor/lib/plugins/line-number/index';
   
5. 
   
6. VueMarkdownEditor.use(createLineNumbertPlugin());

复制代码

4、高亮代码行

1. import VueMarkdownEditor from '@kangc/v-md-editor';
   
2. import createHighlightLinesPlugin from '@kangc/v-md-editor/lib/plugins/highlight-lines/index';
   
3. import '@kangc/v-md-editor/lib/plugins/highlight-lines/highlight-lines.css';
   
4. 
   
5. VueMarkdownEditor.use(createHighlightLinesPlugin());

复制代码

5、快捷复制代码

main.ts中配置：

1. import VueMarkdownEditor from '@kangc/v-md-editor';
   
2. import createCopyCodePlugin from '@kangc/v-md-editor/lib/plugins/copy-code/index';
   
3. import '@kangc/v-md-editor/lib/plugins/copy-code/copy-code.css';
   
4. 
   
5. VueMarkdownEditor.use(createCopyCodePlugin());

复制代码

组件中使用：

1. <template>
   
2.   <v-md-editor v-model="text" height="500px" @copy-code-success="handleCopyCodeSuccess" />
   
3. </template>
   
4. 
   
5. //使用@copy-code-success
   
6. <script>
   
7. export default {
   
8.   methods: {
   
9.     handleCopyCodeSuccess(code) {
   
10.       console.log(code);
    
11.     },
    
12.   },
    
13. };
    
14. </script>

复制代码

四、注意

如果按正常流程配置后，内容出不来，可以选择自己新开一个项目再操作一遍，如果这个时候是正常的，那可能就是原来的项目配置的版本过低，可以选择更新一下项目中的各项配置

五、方法补充

Vue 3中如何实现Markdown展示
使用Vue 3中的markdown-it或vue-markdown等库来实现类似React代码中的Markdown渲染功能。以下是一个完整的Vue 3实现方案：
步骤一：安装必要的依赖

1. npm install markdown-it vue-demi markdown-it-katex markdown-it-breaks markdown-it-mathjax3 markdown-it-highlightjs highlight.js

复制代码

步骤二：创建Markdown组件

1. <template>
   
2.   <div class="markdown-body" v-html="renderedContent"></div>
   
3. </template>
   
4. 
   
5. <script setup>
   
6. import { ref, computed, onMounted } from 'vue'
   
7. import MarkdownIt from 'markdown-it'
   
8. import mk from 'markdown-it-katex'
   
9. import breaks from 'markdown-it-breaks'
   
10. import hljs from 'highlight.js'
    
11. import 'highlight.js/styles/atom-one-light.css'
    
12. import 'katex/dist/katex.min.css'
    
13. 
    
14. const props = defineProps({
    
15.   content: {
    
16.     type: String,
    
17.     required: true
    
18.   }
    
19. })
    
20. 
    
21. // 创建markdown-it实例并配置插件
    
22. const md = new MarkdownIt({
    
23.   html: true,
    
24.   linkify: true,
    
25.   typographer: true,
    
26.   breaks: true,
    
27.   highlight: function (str, lang) {
    
28.     if (lang && hljs.getLanguage(lang)) {
    
29.       try {
    
30.         return `<pre class="hljs"><code>${hljs.highlight(str, { language: lang, ignoreIllegals: true }).value}</code></pre>`;
    
31.       } catch (__) {}
    
32.     }
    
33.     return `<pre class="hljs"><code>${md.utils.escapeHtml(str)}</code></pre>`;
    
34.   }
    
35. })
    
36. .use(mk) // 启用KaTeX数学公式支持
    
37. .use(breaks); // 启用换行支持
    
38. 
    
39. // 配置链接在新窗口打开
    
40. const defaultRender = md.renderer.rules.link_open || function(tokens, idx, options, env, self) {
    
41.   return self.renderToken(tokens, idx, options);
    
42. };
    
43. md.renderer.rules.link_open = function (tokens, idx, options, env, self) {
    
44.   tokens[idx].attrPush(['target', '_blank']);
    
45.   return defaultRender(tokens, idx, options, env, self);
    
46. };
    
47. 
    
48. // 计算渲染后的HTML
    
49. const renderedContent = computed(() => {
    
50.   return md.render(props.content || '');
    
51. });
    
52. </script>
    
53. 
    
54. <style>
    
55. .markdown-body {
    
56.   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    
57.   line-height: 1.6;
    
58.   padding: 20px;
    
59.   color: #24292e;
    
60. }
    
61. 
    
62. .markdown-body code {
    
63.   font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    
64.   background-color: rgba(27, 31, 35, 0.05);
    
65.   border-radius: 3px;
    
66.   padding: 0.2em 0.4em;
    
67. }
    
68. 
    
69. .markdown-body pre {
    
70.   background-color: #f6f8fa;
    
71.   border-radius: 3px;
    
72.   padding: 16px;
    
73.   overflow: auto;
    
74. }
    
75. 
    
76. .hljs {
    
77.   padding: 0;
    
78.   background: transparent;
    
79. }
    
80. </style>

复制代码

步骤三：使用组件

1. <template>
   
2.   <div>
   
3.     <h1>Markdown 预览</h1>
   
4.     <MarkdownView :content="markdownContent" />
   
5.   </div>
   
6. </template>
   
7. 
   
8. <script setup>
   
9. import MarkdownView from '@/components/MarkdownView.vue'
   
10. import { ref } from 'vue'
    
11. 
    
12. const markdownContent = ref(`
    
13. # 标题
    
14. 
    
15. 这是一段普通文本
    
16. 
    
17. ## 代码示例
    
18. \`\`\`javascript
    
19. const hello = 'world';
    
20. console.log(hello);
    
21. \`\`\`
    
22. 
    
23. ## 数学公式
    
24. $E = mc^2$
    
25. 
    
26. ## 表格
    
27. | 姓名 | 年龄 |
    
28. | ---- | ---- |
    
29. | 张三 | 20   |
    
30. | 李四 | 25   |
    
31. `)
    
32. </script>

复制代码

功能对照表
以下是React示例和Vue实现的功能对照：
React功能Vue实现方式ReactMarkdownmarkdown-itremark-mathmarkdown-it-katexremark-breaksmarkdown-it-breaksrehype-katexmarkdown-it-katex (内置支持)remark-gfmmarkdown-it (内置支持GFM)SyntaxHighlighterhighlight.js补充说明
1.功能：

• Markdown渲染
  
• 数学公式支持
  
• 代码高亮
  
• 表格支持
  
• 自动链接
  
• 在新窗口打开链接
  

2.如果需要更多功能，可以添加其他markdown-it插件，例如：

1. npm install markdown-it-emoji markdown-it-sub markdown-it-sup markdown-it-footnote

复制代码

3.要实现与GitHub样式一致的显示效果，可以添加：

1. npm install github-markdown-css

复制代码

4.然后在main.js中导入：

1. import 'github-markdown-css/github-markdown.css'

复制代码

到此这篇关于vue3中展示markdown格式文章的三种形式的文章就介绍到这了,更多相关vue3展示markdown内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源：https://www.jb51.net/javascript/339451xm1.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！