Vue3-markdown显示组件

已于 2022-02-27 21:14:47 修改
阅读量786 收藏 1
点赞数 1
分类专栏： 前端开发小工具 文章标签： 前端 vue.js npm
于 2022-02-27 16:36:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_38119239/article/details/123166044
版权

Vue3-markdown显示组件

预览

czh的前端开发手册

使用方式

目前来看只支持手动下载后复制,之后会打包成npm包发布(咕咕咕)

组件地址

仓库地址

使用方式

环境依赖

  1. 依赖elementPlus和marked.js (实际上也就是封装了一下marked.js)
  2. 使用了text-loader来导入.md文件
  3. 额…别的也没什么好说的了…

开始使用和一些小坑?

  1. clone仓库后直接找到markdownPage.vue组件即可,复制到自己的项目
  2. 如果遇到需要引入图片的问题,可以吧图片放在public文件夹下,手动新建 image, 或者直接用网络图片
  3. 目前还不支持使用flow或者mirrow进行流程图绘制
czhmisaka
关注
专栏目录
vue3-markdown-it::sparkles: 一个很棒的 Vue 3 markdown-it 包装插件，甚至可以支持外部插件！
07-23
:sparkles: vue3-markdown-it :sparkles: 一个很棒的 Vue 3 包装插件，甚至可以支持外部插件！ :magnifying_glass_tilted_right: 安装 npm install vue3-markdown-it 支持的插件 -而其中，一切都开始它 - 添加缩写 - 添加锚点 - 添加定义列表 markdown-it-emoji - 添加表情符号 markdown-it-footnote - 添加脚注 markdown-it-highlightjs - 为代码块添加高亮 markdown-it-ins - 添加<ins>标签 markdown-it-mark - 添加标记/突出显示 markdown-it-sub - 添加下标 markdown-it-sup - 添加上标 markdown-it-task-lists - 添加任务列表 markdown-it-toc-done-right - 添加目录 用法 全球使
Vue3展示Markdown内容
yml9528的博客
06-19 5743
起因 想要搭建一个个人网站，然后在网站上展示个人信息以及平时学习或者使用框架的一些内容。所以需要一个能够将markdown内容转化到页面上展示（就类似于github或者各大博客网站）。个人网站是vue3，vite构建。首先是在 npm上搜索markdown去找寻对应框架，试过其中几个，例如： markdown-loader vue-markdown markdown-it markdown-it-vue v-md-editor markdown-loader 搜索markdown首先出来的就是这个，然
实现一个基础的Markdown编辑器：Vue3与富文本解析
最新发布
有我更精彩的博客
08-17 795
在本文中，我们使用Vue3的setup语法糖和marked库，创建了一个简单的Markdown编辑器。通过这样的方式，不仅简化了代码逻辑，还提升了代码的可读性和重用性。最后问候亲爱的朋友们，并邀请你们阅读我的全新著作。
Vue3 使用marked【代码高亮，安装使用教程】
qq_22841387的博客
06-07 6720
当前项目的技术栈是Vue3 + TS 如需切换代码高亮的风格样式请前往highlight官方地址，修改为你所想要的代码样式名称 最后呈现效果当然本文仅仅只是 的，但是大部分情况我们前端需要渲染的markdown都是来自于后端接口所以可以考虑将其封装为一个组件，将后端传入的值传入进来...
vue3使用v-md-editor预览markdown内容
weixin_60886885的博客
06-01 4813
vue3使用v-md-editor预览markdown内容
vue3内嵌Markdown编辑，并采用showdown展示，支持数学公式展示
码农舟舟的博客
08-02 995
采用vditor Markdown语法编辑器，showdown做语法渲染，showdown-katex展示katex数学公式，废话不多说直接上代码。Markdown编辑器。showdown展示。
vue-markdown-loader::memo:加载markdown并将其转换为vue组件
05-01
:memo: 加载markdown并将其转换为vue组件 特征 语法高亮 自定义块包括“提示警告危险”和“ v-pre”。 安装 安装插件 $ npm install --save @vlvovlv/vue-markdown-loader Webpack配置 { test : / \. md $ / , ...
markdown-it-vue：markdown-it的vue库
02-04
markdown-it的Vue库。 在线演示 安装 npm install markdown-it-vue 支持 图像大小和查看器 官方降价语法。 GFM目录 GFM风格 表情符号 仅简单 Flowcharts.js 下标/上标 信息| 错误警告信息提示 插件清单 降价 ...
vue2-prosemirror-markdown:Vue2的Prosemirror所见即所得Markdown编辑器组件
04-29
vue2-prosemirror-markdown 插件将prosemirror与Vue 2集成用法import Vue from 'vue'import ProseMirror from 'vue2-prosemirror-markdown'import App from './App.vue'Vue . use ( ProseMirror )new Vue ( { // ...
vite-plugin-vuedoc:将Markdown用作Vue组件并将Code Block用作Preview组件
05-03
将Markdown用作Vue组件 使用Markdown代码块作为预览组件 支持维特2 特征 降价组件 事情 托克 外挂程式 Vue代码块 vue预览 代码导入 自定义预览组件 源图 代码高亮 主题 操场 hmr 测试 用过的 Elenext...
vuemarkdown高亮插件
08-10
Vue Markdown高亮插件是为Vue.js应用设计的一款用于增强Markdown文本渲染效果的组件，它主要解决了在Vue环境中，Markdown代码块的语法高亮显示问题。这款插件通常结合Vue.js框架，使得开发者能够轻松地在Vue组件中...
Vue中如何进行Markdown文档展示与解析？
热门推荐
it_xushixiong的博客
06-13 1万+
在Vue项目中，Markdown文档的使用越来越普遍，因此在Vue中进行Markdown文档展示与解析也变得越来越重要。本文介绍了两个第三方库：vue-markdown和markdown-it，它们可以帮助我们展示和解析Markdown文档。除此之外，还介绍了一些配置选项和插件，可以帮助我们定制Markdown解析器的行为。希望本文能够对你有所帮助！
vue-markdown|基于marked.js的Vue Markdown插件
delmarks的博客
02-15 1万+
vue-markdown 是一个基于 marked.js 的 Vue Markdown 插件。它是一个简单易用的 Markdown 解析器，可以方便地将 Markdown 文档解析为 HTML。
【Vue3+Vite+TS+v-md-editor】Markdown 转 HTML 预览插件
Louis 的博客
12-19 1735
Markdown 转 HTML 预览插件
vue3优雅的使用marked之highlight.js
手动滑稽你爸爸
01-18 3664
当时未看文档就开始摸索着写 before [简(chou)洁(de)工(yi)整(pi)] after[针不戳(优化之后)] 其实如果没优化对配置修改的话是下面这个样子的: import hljs from "highlight.js"; import "highlight.js/styles/atom-one-dark.css"; BEFORE let rendererMD = new marked.Renderer(); marked.setOptions({ renderer: rend
Vue3 渲染 markdown （markdown-it）
weixin_56295520的博客
07-21 4219
vue3项目需要渲染markdown文本。
Vue实现Markdown
不愧是暮言的博客
05-08 3689
本文介绍了如何使用Vue和SpringBoot实现一个Markdown编辑器，涉及了前后端开发中的状态管理、路由设计、API封装、Markdown解析和数据库映射等方面内容。通过本项目，读者可以掌握Vue和SpringBoot在前后端开发中的应用及其基本原理。
Vue3集成MarkDown（mavon-editor）
Double_dddddddd的博客
12-20 1015
v-model="content" 绑定文章属性。
vue3中使用cherry-markDown步骤
SunFlower914的博客
05-18 3979
在vue3中对cherry-markdown做二次封装，提供上传图片、上传视频、上传音频、上传附件、默认预览模式等功能
vue3-markdown-it
07-28
Vue3-Markdown-It 是一个基于 Vue3 和 Markdown-it 的 Markdown 解析器组件。它提供了在 Vue3 中使用 Markdown-it 解析和渲染 Markdown 内容的功能。 你可以通过 npm 安装 Vue3-Markdown-It： ```bash npm install vue3-markdown-it ``` 然后在你的 Vue3 项目中使用它： ```vue <template> <div> <vue3-markdown-it :content="markdownContent" /> </div> </template> <script> import Vue3MarkdownIt from 'vue3-markdown-it'; export default { components: { Vue3MarkdownIt, }, data() { return { markdownContent: '# Hello, Vue3-Markdown-It!', }; }, }; </script> ``` 以上代码中，我们通过引入 `Vue3MarkdownIt` 组件，并在模板中使用它来渲染 Markdown 内容。你可以将 Markdown 内容存储在 `markdownContent` 数据属性中，并将其传递给 `content` 属性。 Vue3-Markdown-It 还提供了一些配置选项，以及自定义样式和插件的能力。你可以参考官方文档来了解更多详细信息和用法示例。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值