markdown-it

文章目录

• markdown-it
• • 准备工作
  • Hello

准备工作

mkdir demo-mdit
cd demo-mdit
npm init -y
yarn add markdown-it

Hello

hello.js

// node.js, 用“类”的方式：
const MarkdownIt = require('markdown-it');
const md = new MarkdownIt(); // const md = window.markdownit();
const BQ  = '`';    // backquote
const BQ3 = '```';  // backquote
let result = md.render(`

#    标题1
##   标题2
###  标题3
#### 标题4

*斜体*
**粗体**
>引用

- 无序列表
- 无序列表

1. 有序列表1
2. 有序列表2

[连接](源地址).
![图片](源地址)

| 列1  | 列2  | 列3  |
| :--: | ---: | :--- |
| 居中 | 居右 | 居左 |

${BQ3}js
// A code block
var foo = 'bar';
${BQ3}
`);

console.log(result);

output.html

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>

<p><em>斜体</em>
<strong>粗体</strong></p>
<blockquote>
<p>引用</p>
</blockquote>

<ul>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
</ol>

<p><a href="源地址">连接</a>.
<img src="源地址" alt="图片"></p>

<table>
<thead>
<tr>
<th style="text-align:center">列1</th>
<th style="text-align:right">列2</th>
<th style="text-align:left">列3</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">居中</td>
<td style="text-align:right">居右</td>
<td style="text-align:left">居左</td>
</tr>
</tbody>
</table>

<pre><code class="language-js">// A code block
var foo = 'bar';
</code></pre>