markdown-editor-preview 🖹

Markdown预览编辑器是一款功能强大的工具，支持双向滚动同步，为用户提供流畅的编辑和预览体验。

该项目基于 Vue3 + TypeScript 开发，结合了 monaco-editor 作为代码编辑器，markdown-it 解析Markdown语法。

特性

• 代码高亮：采用 highlight.js 实现代码高亮功能。
• 双向滚动同步：支持源码和预览页的双向滚动同步，极大提升了编辑效率。
• 自定义渲染器：支持开发者传入基于 markdown-it 的自定义渲染器。

该工具适用于需要实时预览Markdown效果的场景，如博客写作、文档编写等。

该项目基于 kaciras-blog/markdown 并在其基础上进行了优化和改进，感谢原作者的贡献！🎉🎉🎉

基础使用

安装

pnpm i markdown-editor-preview

引入

import { MarkdownEditor } from "markdown-editor-preview";
// style.css样式表包含了编辑器和预览的样式
import "markdown-editor-preview/style.css";

示例

<template>
	<div class="container">
		<MarkdownEditor
	            v-model='content'
	            renderer='rich'
		>
		</MarkdownEditor>
	</div>
</template>

<script setup lang='ts'>
import { ref } from "vue";
import { MarkdownEditor } from "markdown-editor-preview";
import "markdown-editor-preview/style.css"

const content = ref("# Hello Markdown-Editor-Preview!");
</script>

<style scoped>
.container {
	height: 100vh;
}
</style>

MarkdownEditor组件

完整的Markdown编辑器组件，包含编辑器和预览区域。

import { MarkdownEditor } from "markdown-editor-preview";
import "markdown-editor-preview/style.css";

Props

属性名	类型	默认值	说明
v-model	string		编辑器内容
renderer	Renderer	rich	渲染器类型，可选值为 'rich' 或 'guest' 也可以为 MarkdownIt 的实例
debounce	number	500	渲染函数的防抖（毫秒）
scrollSynced	boolean	true	是否同步滚动

预设渲染器

库内置了两种预设渲染器：

• rich：默认渲染器，提供完整的 Markdown 渲染功能
• guest：访客模式渲染器，适用于用户生成内容场景，具有更严格的安全限制

Exposes

名称	类型	说明
editor	MonacoEditor	编辑器实例
selection	Object	编辑器选区对象
getHTML	Function	获取渲染后的HTML内容

MarkdownView组件

Markdown预览组件，用于将Markdown文本渲染为HTML。

import { MarkdownView } from "markdown-editor-preview";
import "markdown-editor-preview/style.css";

Props

属性名	类型	默认值	说明
value	string		要渲染的 Markdown 文本，转换过程是同步的
renderer	Renderer	'guest'	渲染器类型，可选值为 'rich' 或 'guest' 也可以为 MarkdownIt 的实例
docId	string		设置唯一 ID，用于区分锚点

Exposes

名称	类型	说明
getHTML	Function	获取渲染后的HTML内容

MarkdownIt

markdown-editor-preview 导出了 MarkdownIt 类，这是整个库的核心渲染引擎，用于将 Markdown 文本转换为 HTML。

import { MarkdownIt } from "markdown-editor-preview";

// 创建 MarkdownIt 实例
const md = new MarkdownIt({
  html: true,        // 启用 HTML 标签
  linkify: true,     // 自动将 URL 转换为链接
  typographer: true  // 启用一些语言中立的替换和引号美化
});

// 渲染 Markdown 文本
const html = md.render('# Hello World');

sourceLine

sourceLine 是一个用于标注原文行号信息的 MarkdownIt 插件，主要用于实现编辑器和预览区域的双向滚动同步功能。

使用场景

当您需要自定义 MarkdownIt 渲染器并保持滚动同步功能时，可以使用此插件

import { sourceLine, MarkdownIt } from "markdown-editor-preview";

// 创建 MarkdownIt 实例
const md = new MarkdownIt();

// 使用 sourceLine 插件
md.use(sourceLine);

功能说明

• 给块语法渲染的结果中添加原文行号信息，用于定位哪一行渲染出了哪个元素
• 为实现编辑器和预览区域的双向滚动同步提供基础支持
• 在渲染的 HTML 元素上添加 data-line 属性，格式为 start,end，表示该元素对应的原始 Markdown 文本的起始和结束行号