vue项目中使用markdown文章样式

chengxue_123

于 2020-11-19 14:39:11 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：应用文章标签： vue 前端

本文链接：https://blog.youkuaiyun.com/chengxue_123/article/details/109811066

在Vue项目中，处理后台传来的markdown格式文章时，可以使用`v-html`指令来解析内容。但原始解析后的内容排版可能不理想。为提升美观度，可以引入Markdown文章样式，例如通过下载链接<https://pan.baidu.com/s/1eD1JKtxu5NNme7wIah0uKg>获取资源，提取码为`s42p`。在使用时，给内容添加`markdown-body`类名，即可实现美化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当后台传来的数据是这种格式的怎么处理,看起来很乱,还有标签

1)可以在vue中用v-html 解析html 其他项目则用其他方法 ,此处用的是v-html="articalObj.content" 解析内容

  <div class="articalContent" v-html="articalObj.content">
            {{ articalObj.content }}
          </div>

2)上述排版还是看起来不太美观这个时候可以使用Markdown文章样式下载地址是:

链接：https://pan.baidu.com/s/1eD1JKtxu5NNme7wIah0uKg
提取码：s42p

使用的时候加上类名 markdown-body

 <div class="articalContent markdown-body" v-html="articalObj.content">
            {{ articalObj.content }}
  </div>

3)当完全成功引入Markdown

最低0.47元/天解锁文章

200万优质内容无限畅学