在Vue3项目中展示markdown语法的文本
vue 2025-01-17 10:04:03

 1、安装

JavaScript Code复制内容到剪贴板
  1. npm install markdown-it  
  2.  
  3. ##或  
  4.   
  5. yarn add markdown-it  

 

 

2、在Vue3组件中，使用Markdown解析库将Markdown文本转换为HTML

JavaScript Code复制内容到剪贴板
  1. <template>  
  2.   <div v-html="parsedMarkdown"></div>  
  3. </template>  
  4.   
  5. <script>  
  6. import MarkdownIt from 'markdown-it';  
  7.   
  8. export default {  
  9.   data() {  
  10.     return {  
  11.       markdownContent: '# This is a heading 
  12. This is a paragraph.',  
  13.       parsedMarkdown: ''  
  14.     };  
  15.   },  
  16.   created() {  
  17.     this.parsedMarkdown = this.convertMarkdownToHtml(this.markdownContent);  
  18.   },  
  19.   methods: {  
  20.     convertMarkdownToHtml(markdown) {  
  21.       const md = new MarkdownIt();  
  22.       return md.render(markdown);  
  23.     }  
  24.   }  
  25. };  
  26. </script>  

 

 

本文来自于：http://www.yoyo88.cn/study/vue/711.html

上一篇 在Vue3项目中使用 yarn build 打包时启用 Gzip
下一篇 返回列表
相关的文章
Powered by yoyo苏ICP备15045725号