Showdown -岩石教程

特点

高性能: 解析速度快，能够高效处理大规模 Markdown 内容。
灵活性: 提供丰富的配置选项和插件机制，满足各种定制需求。
兼容性: 支持多种 Markdown 标准，包括 CommonMark 和 GitHub Flavored Markdown (GFM)。
易用性: 提供简单易用的 API，适合快速集成和使用。
扩展性: 支持插件扩展，可以自定义解析规则和渲染方式。
开源免费: 源代码公开，免费使用，并有活跃的社区支持。

使用场景

Markdown 转 HTML
Markdown 解析器
Markdown 编辑器

安装方式

使用 npm 或 yarn 安装

npm install showdown
# 或者
yarn add showdown

使用示例

在 Node.js 环境中使用 Showdown 将 Markdown 转换为 HTML

const showdown = require('showdown');
const converter = new showdown.Converter();

const markdownString = '# Hello, Showdown!';
const htmlString = converter.makeHtml(markdownString);

console.log(htmlString);

在浏览器环境中使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Showdown Example</title>
  <script src="https://cdn.jsdelivr.net/npm/showdown/dist/showdown.min.js"></script>
</head>
<body>
  <h1>Showdown Example</h1>
  <div id="content"></div>
  <script>
    const converter = new showdown.Converter();
    const markdownString = '# Hello, Showdown!';
    const htmlString = converter.makeHtml(markdownString);
    document.getElementById('content').innerHTML = htmlString;
  </script>
</body>
</html>

常用 API 介绍

1. new showdown.Converter(options)

描述: 创建并初始化 Showdown 转换器实例。

参数:

options: 可选参数，对象，包含配置选项。

示例:

const converter = new showdown.Converter({
  tables: true,
  simplifiedAutoLink: true,
});

2. converter.makeHtml(markdownString)

描述: 将 Markdown 字符串解析为 HTML 字符串。

参数:

markdownString: 字符串，包含要解析的 Markdown 内容。

示例:

const markdownString = '# Hello, Showdown!';
const htmlString = converter.makeHtml(markdownString);
console.log(htmlString);

3. converter.makeMarkdown(htmlString)

描述: 将 HTML 字符串解析为 Markdown 字符串。

参数:

htmlString: 字符串，包含要解析的 HTML 内容。

示例:

const htmlString = '<h1>Hello, Showdown!</h1>';
const markdownString = converter.makeMarkdown(htmlString);
console.log(markdownString);

4. converter.setOption(key, value)

描述: 设置转换器选项。

参数:

key: 字符串，选项名称。
value: 选项值。

示例:

converter.setOption('tables', true);

5. converter.getOption(key)

描述: 获取转换器选项值。

参数:

key: 字符串，选项名称。

示例:

const tablesEnabled = converter.getOption('tables');
console.log(tablesEnabled);

6. converter.addExtension(extension, name)

描述: 添加扩展插件。

参数:

extension: 对象或数组，包含扩展插件定义。
name: 字符串，扩展插件名称。

示例:

const myExtension = () => [
  {
    type: 'lang',
    regex: /:smile:/g,
    replace: '<img src="smile.png" alt="smile" />',
  }
];

converter.addExtension(myExtension, 'myExtension');

const markdownString = 'Hello :smile:';
const htmlString = converter.makeHtml(markdownString);
console.log(htmlString);

7. showdown.setOption(key, value)

描述: 设置全局选项，影响所有转换器实例。

参数:

key: 字符串，选项名称。
value: 选项值。

示例:

showdown.setOption('simpleLineBreaks', true);

8. showdown.extension(name, ext)

描述: 注册全局扩展插件，影响所有转换器实例。

参数:

name: 字符串，扩展插件名称。
ext: 对象或数组，包含扩展插件定义。

示例:

showdown.extension('myExtension', myExtension);

9. converter.removeExtension(name)

描述: 移除扩展插件。

参数:

name: 字符串，扩展插件名称。

示例:

converter.removeExtension('myExtension');

10. converter.getAllExtensions()

描述: 获取所有注册的扩展插件。

参数: 无

示例:

const extensions = converter.getAllExtensions();
console.log(extensions);

高级用法

自定义渲染规则: Showdown 允许开发者自定义渲染规则，通过插件机制扩展和修改默认的 Markdown 解析行为。

示例:

const myExtension = () => [
  {
    type: 'output',
    filter: (text) => {
      return text.replace(/<em>(.*?)<\/em>/g, '<i>$1</i>');
    }
  }
];

const converter = new showdown.Converter({
  extensions: [myExtension]
});

const markdownString = '*Italic text*';
const htmlString = converter.makeHtml(markdownString);
console.log(htmlString); // 输出 <i>Italic text</i>

Showdown

特点

使用场景

安装方式

使用示例

常用 API 介绍

高级用法

官方资料