JavaScript 使用 showdown 实现 markdown 预览功能

作者：组件日常时间：2026-10-31 11:28:47浏览：655

本文详细介绍如何在 JavaScript 项目中集成 Showdown.js 库，实现 Markdown 文本到 HTML 的实时预览。内容涵盖通过 npm 或 CDN 安装、基础 API 使用、表格等高级配置、自定义扩展开发，以及如何在 React 框架中构建动态 Markdown 编辑器组件。

Showdown.js 简介

Showdown.js 是一款轻量级的 JavaScript 库，专门用于将 Markdown 格式文本转换为 HTML。凭借其简洁的 API 和易用性，它被广泛部署于需要前端 Markdown 渲染的各类项目中。

安装 Showdown.js

开发者可以通过 npm 包管理器或直接引入脚本标签的方式，将 Showdown.js 集成到现有项目中。

通过 NPM 安装

npm install showdown

通过脚本标签引入

<script src="https://cdn.jsdelivr.net/npm/showdown@1.9.1/dist/showdown.min.js"></script>

基本使用

完成安装后，首先需实例化一个转换器对象，随后调用该方法将 Markdown 字符串转换为对应的 HTML 代码。

示例代码

// 引入 Showdown
const showdown = require('showdown');

// 创建转换器实例
const converter = new showdown.Converter();

// Markdown 文本
const markdown = '# 标题\n\n这是一段**粗体**文本。';

// 转换为 HTML
const html = converter.makeHtml(markdown);

console.log(html);

高级配置

Showdown.js 提供了丰富的配置选项，允许开发者精细调整 Markdown 转换为 HTML 的具体行为与规则。

示例：启用表格

// 配置转换器以支持Markdown表格
converter.setOption('tables', true);

// 包含表格的Markdown文本
const markdownWithTable = '| 标题1 | 标题2 |\n|-------|-------|\n| 单元格1 | 单元格2 |';

// 转换为 HTML
const htmlWithTable = converter.makeHtml(markdownWithTable);

console.log(htmlWithTable);

Markdown 扩展

借助扩展机制，开发者可以注入新的 Markdown 语法支持，或对现有的渲染逻辑进行自定义修改。

示例：创建自定义扩展

// 自定义扩展，用于将 @@ 包围的文本转换为红色
const myExtension = () => {
  return [{
    type: 'lang',
    filter: function (text) {
      return text.replace(/@@(.+?)@@/g, '<span style="color: red;">$1</span>');
    }
  }];
};

// 向转换器添加扩展
converter.addExtension(myExtension, 'myExtension');

// 包含自定义语法的Markdown文本
const customMarkdown = '这是一段@@红色@@文本。';

// 转换为 HTML
const customHtml = converter.makeHtml(customMarkdown);

console.log(customHtml);

Showdown.js 与前端框架集成

该库能够无缝对接 React、Vue 等主流前端框架，轻松实现 Markdown 内容的动态渲染与展示。

React 示例

import React, { useState } from 'react';
import showdown from 'showdown';

const MarkdownEditor = () => {
  const [markdown, setMarkdown] = useState('');
  const converter = new showdown.Converter();

  return (
    <div>
      <textarea
        onChange={(e) => setMarkdown(e.target.value)}
        placeholder="输入Markdown文本"
      />
      <div
        dangerouslySetInnerHTML={{ __html: converter.makeHtml(markdown) }}
      />
    </div>
  );
};

export default MarkdownEditor;