📅 最后修改于: 2023-12-03 15:17:32.765000 🧑 作者: Mango
Markdown 是一种轻量级的标记语言，可以很方便地将文本转换成 HTML 格式。HTML 是网页开发中最常用的标记语言，用于描述页面结构和内容。本文将介绍如何在 HTML 中使用 Markdown。
在 HTML 中使用 Markdown ，需要引入 Markdown 库。常用的 Markdown 库有：
以 Showdown 为例，引入方式如下：
<script src="//cdn.jsdelivr.net/npm/showdown@1.9.1/dist/showdown.min.js"></script>
将需要转换的 Markdown 文本放到 HTML 的某个元素中，比如：
<div id="markdown-text">
# Markdown 新页面 - HTML
## 简介
Markdown 是一种轻量级的标记语言，可以很方便地将文本转换成 HTML 格式。HTML 是网页开发中最常用的标记语言，用于描述页面结构和内容。本文将介绍如何在 HTML 中使用 Markdown。
## 步骤
...
</div>
使用 JavaScript 将 Markdown 转换成 HTML，代码如下：
<script>
var converter = new showdown.Converter();
var markdownText = document.getElementById('markdown-text').innerHTML;
var html = converter.makeHtml(markdownText);
document.getElementById('markdown-html').innerHTML = html;
</script>
上述代码中，首先实例化 Showdown 转换器，然后获取 HTML 中存放 Markdown 的元素，将其内容转换成 HTML 并赋值给另一个元素。
将转换后的 HTML 显示出来，比如：
<div id="markdown-html"></div>
至此，Markdown 转换成 HTML 的过程就完成了。
以下是一个完整的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Markdown 新页面 - HTML</title>
<script src="//cdn.jsdelivr.net/npm/showdown@1.9.1/dist/showdown.min.js"></script>
</head>
<body>
<div id="markdown-text">
# Markdown 新页面 - HTML
## 简介
Markdown 是一种轻量级的标记语言，可以很方便地将文本转换成 HTML 格式。HTML 是网页开发中最常用的标记语言，用于描述页面结构和内容。本文将介绍如何在 HTML 中使用 Markdown。
## 步骤
1. 引入 Markdown 库
2. 准备 Markdown 文本
3. 将 Markdown 转换成 HTML
4. 显示转换后的 HTML
</div>
<div id="markdown-html"></div>
<script>
var converter = new showdown.Converter();
var markdownText = document.getElementById('markdown-text').innerHTML;
var html = converter.makeHtml(markdownText);
document.getElementById('markdown-html').innerHTML = html;
</script>
</body>
</html>
注意，本示例中使用了 Showdown 库，如果您选择其他 Markdown 库，请按照该库的 API 进行调用。
以下为返回的 Markdown 代码片段：
# Markdown 新页面 - HTML
## 简介
Markdown 是一种轻量级的标记语言，可以很方便地将文本转换成 HTML 格式。HTML 是网页开发中最常用的标记语言，用于描述页面结构和内容。本文将介绍如何在 HTML 中使用 Markdown。
## 步骤
1. 引入 Markdown 库
2. 准备 Markdown 文本
3. 将 Markdown 转换成 HTML
4. 显示转换后的 HTML
以上为转换后的 HTML 代码片段，由于 Markdown 转换成 HTML 后的代码不容易被阅读，因此建议在需要展示 Markdown 的地方使用渲染后的 HTML。