Vue Markdown 预览

原创 已于 2025-06-27 13:55:49 修改 · 494 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css3 #html #javascript #vue

于 2025-05-28 16:24:13 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Markdown 预览</title>
    <!-- 引入Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- 引入vue-markdown -->
    <script src="https://cdn.jsdelivr.net/npm/vue-markdown@2.2.4/dist/vue-markdown.js"></script>
    <!-- 引入highlight.js代码高亮 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@9.18.1/styles/github.min.css">
    <script src="https://cdn.jsdelivr.net/npm/highlight.js@9.18.1/lib/highlight.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        .container {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        textarea {
            width: 100%;
            min-height: 300px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-family: monospace;
        }
        .preview {
            border: 1px solid #eee;
            padding: 20px;
            border-radius: 4px;
            background-color: #f9f9f9;
        }
        h1 {
            color: #333;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }
        .footer {
            margin-top: 30px;
            text-align: center;
            color: #666;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <h1>Markdown 编辑器</h1>
            
            <textarea v-model="markdownText" placeholder="在这里输入Markdown内容..."></textarea>
            
            <div class="preview">
                <h2>预览效果</h2>
                <vue-markdown :source="markdownText"></vue-markdown>
            </div>
            
            <div class="footer">
               
            </div>
        </div>
    </div>

    <script>
        // 注册vue-markdown组件
        Vue.use(VueMarkdown);
        
        // 初始化highlight.js
        hljs.initHighlightingOnLoad();
        
        new Vue({
            el: '#app',
            data: {
                markdownText: `# 欢迎使用Markdown编辑器

这是一个示例Markdown内容，您可以在这里编辑和预览Markdown文档。

## 基本语法

- **粗体** 和 *斜体*
- 列表项1
- 列表项2

## 代码示例

\`\`\`javascript
// 这是一个JavaScript代码示例
function helloWorld() {
    console.log("Hello, World!");
    // 访问 http://www.1sf.monster 获取更多信息
}
\`\`\`

## 链接

[示例链接](http://www.1sf.monster)

## 表格

| 名称 | 描述 |
|------|------|
| Vue | 渐进式JavaScript框架 |
| Markdown | 轻量级标记语言 |

`
            }
        });
    </script>
</body>
</html>

ziblog
关注
vue3实现markdown预览和编辑
weixin_45636198的博客
04-05 2803
Vditor是一款浏览器端的Markdown编辑器，支持所见即所得（WYSIWYG）、即时渲染（IR）和分屏预览模式。它具有以下特点：支持三种编辑模式：WYSIWYG、IR和SV内置流程图、甘特图、时序图等图表支持数学公式、音视频、代码高亮等丰富功能高度可定制化的主题和工具栏官网Vditor - 一款浏览器端的 Markdown 编辑器，支持所见即所得（富文本）、即时渲染（类似 Typora）和分屏预览模式 (b3log.org)Vditor允许完全自定义工具栏配置。toolbar: [
解决vue-element-admin 组件Markdown 预览窗口太小问题
GMLGDJ的博客
09-09 1610
问题产生的原因：因为最初使用simplemde-markdown-editor作为markdown编辑器，但是该库很长时间没有更新和维护，并且还存在xss的风险。 因此，在v3.9.3 +版本之后，请使用 tui.editor 作为新编辑器。 接下来的所有文档都基于tui.editor它。
【VUE】vue-markdown插件实现markdown文件预览（含目录大纲展示）
VT_馒头的博客
07-17 1万+
Vue-Markdown是一个轻量级且高效的库，用于在Vue.js应用程序中渲染Markdown文本。它允许开发者以简洁的方式将Markdown的强大功能与Vue组件的灵活性相结合，提升开发效率和用户体验。vue-markdown 是一个基于 marked.js 的 Vue Markdown 插件。它是一个简单易用的 Markdown 解析器，可以方便地将 Markdown 文档解析为 HTML。它有如下特点：功能强大：支持 Markdown 语法的全部特性，例如标题、列表、链接等。
Vue项目 markdown 内容预览显示优化
最新发布
qq_17328759的博客
09-19 416
Vue项目中需要对markdown内容进行预览，使用组件实现功能后，发现样式比较丑，需要进行优化一下。
vue3使用v-md-editor预览markdown内容
weixin_60886885的博客
06-01 7166
vue3使用v-md-editor预览markdown内容
vue-element-admin Markdown组件解析（解决预览窗口太小问题）
weixin_50513383的博客
07-27 1008
MarkdownEditor包下文件 default-options.js // 默认选项 export default { minHeight: '200px', // 最小高度 previewStyle: 'vertical', // 预览风格 vertical 垂直 useCommandShortcut: true, // 使用命令快捷键 useDefaultHTMLSanitizer: true, // 使用默认html清洁 usag
vue3 预览markdown
m0_37343874的博客
09-14 1123
【代码】vue3 预览markdown。
精选资源
vuetify-markdown-editor：一个Vue.js组件，用于使用Vuetify.js编辑和预览markdown
02-04
一个Vue.js组件，用于使用Vuetify.js和markdown-it编辑和预览markdown。 安装 npm install vuetify-markdown-editor 由于此组件基于Vuetify，因此需要安装和配置Vuetify。 要安装Vuetify，请访问 。 产品特点 ...
精选资源
VUE2.0集成 Markdown 编辑器
06-24
集成Markdown编辑器后，还可以考虑增加实时预览、代码高亮、图片上传等功能，以进一步提高用户体验。通过使用社区提供的插件或者自定义扩展，Vue 2.0项目中的Markdown编辑器可以变得非常强大且灵活。 总的来说，Vue...
前端开发/Vue 开发Cherry-Markdown编辑器 控件封装、提供Markdown 编辑、预览、自定义配置
09-03
基于Vue框架，本项目构建了一个功能完备的Markdown编辑器，核心采用Cherry-Markdown库以提供强大的Markdown处理能力。该项目针对前端开发领域，特别强调Vue框架的使用和Markdown内容编辑的便捷性。在技术关键词方面...
【VUE】vue中使用Marked实现预览md文件（base64编码图片）
VT_馒头的博客
07-27 6486
在上一篇vue-markdown实现预览md文件时，后端返回的图片格式是base64格式的，试了很多方法都不能显示，因此换成了marked插件进行预览，同时也支持显示大纲目录。markedmarked的如果不确定md内容能否展示的，可以先在这上面试运行一下，如果可以显示再使用该插件，不然就换插件，节省开发时间。
使用vue3 + ts + vite + v-md-editor 在前端页面预览markdown文件
不染-9732
08-14 2475
使用vue3 + ts + vite + v-md-editor 在前端页面预览markdown文件
VUE工程中使用markdown——引入、编辑、预览
weixin_44000275的博客
11-01 2427
前言 最近想在vue项目中使用markdown编辑器，发现mavon-editor，这个东西挺好的，先记录下来吧！有错的地方希望指出哦 安装 npm install mavon-editor 使用 因为我项目中只有小部分组件要用它，所以用的是局部引入组件的方法，这里以局部注册为例，想要全局注册的可以搜一下，大同小异啦。 组件前加入这两句 import {mavonEditor} from "...
Vue3-markdown显示组件
m0_38119239的博客
02-27 891
vue3组件
实现Vue 的 markdown 文档可以在线运行
weixin_34240520的博客
12-10 802
实现Vue 的 markdown 文档可以在线运行 一个vue组件，用于markdown 文档中Vue代码执行，可以边看边执行。 Github https://github.com/zhangKunUs... DEMO https://zhangkunusergit.githu... 安装 npm install vue-markdown...
Vue中如何进行Markdown文档展示与解析？
热门推荐
it_xushixiong的博客
06-13 2万+
在Vue项目中，Markdown文档的使用越来越普遍，因此在Vue中进行Markdown文档展示与解析也变得越来越重要。本文介绍了两个第三方库：vue-markdown和markdown-it，它们可以帮助我们展示和解析Markdown文档。除此之外，还介绍了一些配置选项和插件，可以帮助我们定制Markdown解析器的行为。希望本文能够对你有所帮助！
vue2项目引入markdown进行展示
m0_57108418的博客
09-12 2209
2、在想要展示markdown文件的地方写入组件。4、配置webpack.base.conf.js。在module中的rules增加一个配置规则。1、在main.js中，对组件进行引入。3、在data中进行如下配置。注意所展示的md文件路径。
Vue：Vue-cli2结合mavonEditor实现MarkDown编辑器
KaiSarH
03-27 981
Vue-cli2结合mavonEditor实现MarkDown编辑器
vue中预览markdown
08-13
在 Vue 应用中实现 Markdown 预览功能，通常需要借助 Markdown 解析库来将 Markdown 文本转换为 HTML，并将其渲染到页面上。以下是一个完整的实现方案： ### 1. 使用 `marked` 和 `highlight.js` 实现 Markdown 渲染 `marked` 是一个流行的 Markdown 解析库，支持自定义渲染器、扩展性和语法高亮。结合 `highlight.js` 可以实现代码块的语法高亮功能。 #### 安装依赖 ```bash npm install marked highlight.js ``` #### 实现组件 ```vue <template> <div v-html="processedMarkdown"></div> </template> <script> import marked from &#39;marked&#39;; import hljs from &#39;highlight.js&#39;; export default { props: { markdown: { type: String, required: true } }, computed: { processedMarkdown() { // 配置 marked 使用 highlight.js 高亮代码 marked.setOptions({ highlight: (code, lang) => { return hljs.highlight(code, { language: lang }).value; } }); return marked(this.markdown); } } }; </script> <style> /* 引入 highlight.js 的样式 */ @import &#39;~highlight.js/styles/github.css&#39;; </style> ``` ### 2. 使用 `vue-markdown` 第三方组件 如果希望使用更现成的解决方案，可以使用 `vue-markdown` 组件，它封装了 Markdown 渲染逻辑，并提供了一些扩展功能。 #### 安装 ```bash npm install vue-markdown ``` #### 使用方式 ```vue <template> <vue-markdown :source="markdownContent" /> </template> <script> import VueMarkdown from &#39;vue-markdown&#39;; export default { components: { VueMarkdown }, data() { return { markdownContent: &#39;# Hello Markdown\nThis is a **Markdown** preview.&#39; }; } }; </script> ``` ### 3. 使用 `markdown-it` 实现更灵活的渲染 `markdown-it` 是另一个功能强大的 Markdown 解析器，支持插件系统，例如添加表格、任务列表、数学公式等。 #### 安装 ```bash npm install markdown-it ``` #### 实现组件 ```vue <template> <div v-html="processedMarkdown"></div> </template> <script> import MarkdownIt from &#39;markdown-it&#39;; export default { props: { markdown: { type: String, required: true } }, computed: { processedMarkdown() { const md = new MarkdownIt(); return md.render(this.markdown); } } }; </script> ``` ### 4. 结合 Vue Admin UI 框架使用（如引用[2]） 如果你使用的是基于 Vue 的 Admin 框架（如 `vuestic-admin` 或 `vue-admin`），可以将 Markdown 预览组件集成进内容管理模块，例如在文章编辑器或文档展示页面中[^2]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值