Vue、Nuxt页面展示MarkDown

深碍√TFBOYSˉ_ 2023-07-02 12:25 30阅读 0赞

> 文章优先发表在个人博客，后期更新可能忘记同步到CSDN上面，给你带来不便抱歉  
> 个人博客本篇文章地址： [https://www.xdx97.com/article?bamId=672192777479520256][https_www.xdx97.com_article_bamId_672192777479520256]

> 今天在做留言功能的时候，需要在页面展示markdown语法  
> 这里给大家推荐： showdown ，感觉它还不是特别好用，但着实简单。

### 1、安装引入 ###

**1、可以使用 npm 安装，但是我在BootCDN找到了链接，那就没把要安装浪费资源了，直接引用CDN了。**

CND地址： [https://www.bootcdn.cn/showdown/][https_www.bootcdn.cn_showdown]

**Nuxt引入：**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70]

Vue 引入：我这里没有直接使用Vue，但是没关系，你直接在 index.html 中全局引入就好了

### 2、使用 ###

let converter = new showdown.Converter();
     let html = converter.makeHtml('### 我是小道仙');
     console.log(html);

### 3、其它 ###

从上面的使用我们可以看出来，showdown是把markdown转化成了 html，我们可以把这个html数据存入数据库，然后再展示这个html就好了。

**可以关注我的个人博客共同成长噢**  
![在这里插入图片描述][20200130094137603.jpg]

[https_www.xdx97.com_article_bamId_672192777479520256]: https://www.xdx97.com/article?bamId=672192777479520256
[https_www.bootcdn.cn_showdown]: https://www.bootcdn.cn/showdown/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200130093924187.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy,size_16,color_FFFFFF,t_70
[20200130094137603.jpg]: https://img-blog.csdnimg.cn/20200130094137603.jpg