服务器之家

服务器之家 > 正文

如何在 Vue 中解析和渲染 Markdown

时间:2021-09-14 01:30     来源/作者:大迁世界

如何在 Vue 中解析和渲染 Markdown

HTML是超文本标记语言的缩写,可能是当今网络上使用最多的标记语言。Markdown 在我们程序界也是一个必备的技能。我们可以使用 makrdown来渲染文本,它实际上是一种更快的写作方式,因为它学习成本很低,不需要掌握很多知识就可以开始。如果你的想写博客,甚至想作为技术作家写作时,Markdown 是你首先的写作工具。

本文主要介绍如果在 Vue 中使用 Markdown,废话说了很多了,我们就这开始按摩。

为什么使用 Marked.js 库

Vue 没有像React 那么多 MD 的插件。如 markdown-it、Remark.js、marked.js。希望在未来,会有更多好用的库来支持我们的 Vue ,经过一番调研,我选择了marked.js,因为它的星星最多,bug 少。

创建项目

我们使用 vue-cli 来创建项目,运行如下命令:

  1. vue create marked-example 

这里我们选择最简单的 Vue2 模板创建项目,创建完后的项目结构如下:

  1. +-- src/i 
  2. |   +-- assets/ 
  3. |   +-- components 
  4. |       +-- HelloWorld.vue 
  5. |       +-- App.vue 
  6. |   +-- main.js 

现在我们在 MD 语法写个标题

  1. <template> 
  2.   <div> 
  3.    {{ markdown }} 
  4.   </div> 
  5. </template> 
  6. <script> 
  7. export default { 
  8.   name"App"
  9.   data() { 
  10.     return { 
  11.       markdown: " # hello world "
  12.     }; 
  13.   }, 
  14. }; 
  15. </script> 
  16. <style> 
  17. #app { 
  18.   font-family: Avenir, Helvetica, Arial, sans-serif; 
  19.   -webkit-font-smoothing: antialiased; 
  20.   -moz-osx-font-smoothing: grayscale; 
  21.   text-align: center; 
  22.   color: #2c3e50; 
  23.   margin-top: 60px; 
  24. </style> 

运行:

如何在 Vue 中解析和渲染 Markdown

基于上面的代码,我们希望# hello world MD 语法能在 Vue 渲染成标题。要怎么做呢,这就需要借助 Marked.js 库。

安装 Marked.jsMarked 或 marked.js 是一个低级别的编译器,帮助我们将 Markdowns 转换成HTML。安装一波试试水:

  1. npm install marked 

然后,在 app.vue 中引入:

  1. import marked from 'marked'

渲染 markdown

渲染方法很简单就是把我们的文本传入 marked,结果返回是带了标签的文本内容,我们在用 v-html 渲染即可。

  1. <template> 
  2. <!-- {{ markdown }} --> 
  3.   <textarea v-model="markdown"></textarea> 
  4.   <div v-html="markdownToHtml"></div> 
  5.  
  6. </template> 
  7. <script> 
  8. import marked from 'marked'
  9. export default { 
  10.   name'App'
  11.  data(){ 
  12.    return { 
  13.      markdown:  "# Hello World"
  14.    }; 
  15.  }, 
  16.  computed: { 
  17.    markdownToHtml(){ 
  18.      return marked(this.markdown); 
  19.    } 
  20.  } 
  21. </script> 
  22. <style> 
  23. #app { 
  24.   font-family: Avenir, Helvetica, Arial, sans-serif; 
  25.   -webkit-font-smoothing: antialiased; 
  26.   -moz-osx-font-smoothing: grayscale; 
  27.   text-align: center; 
  28.   color: #2c3e50; 
  29.   margin-top: 60px; 
  30. </style> 

这里我们多写了一个 textarea 标签,然后用了计算属性来实时的渲染 markdowns。运行后的结果如下

如何在 Vue 中解析和渲染 Markdown

然后,多输入 一些 MD 语法验证一下:

如何在 Vue 中解析和渲染 Markdown

全局引入

当我们不想每个组件都 引入一次时,就可以声明成全局的。怎么做?

实现 marked 库全局化的方法是使用 Mixins。Mixins 只是Vue组件中可重复使用的功能的一个分布。

重构一下我们的 main.js 代码,如下所示:

  1. import {createApp} from 'vue'
  2. import App from './App.vue'
  3. import marked from 'marked'
  4. const markedMixin = { 
  5.     methods: { 
  6.          md: function (input) { 
  7.             return marked (input); 
  8.         }, 
  9.     }, 
  10. }; 
  11.  
  12.  
  13.  
  14. createApp(App).mixin(markedMixin).mount('#app'

当想转换 md时,直接在组件中调用 this.md 就可以将 md 转成 html 了。

~完,本文内容很简单,因为最近也用到类似的功能,搜索这个库,所以就分享一下,我们下期再见!

作者:Dmitri Pavlutin 译者:前端小智

来源:blog.openreplay 原文:https://blog.openreplay.com/how-parse-and-render-markdown-in-vuejs

如何在 Vue 中解析和渲染 Markdown

原文链接:https://mp.weixin.qq.com/s/n07tDppQZpsuWbdmqyoGvg

标签:

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
返回顶部