本文转载自知乎@熊福端

实现方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<body>
<code mkd>
## 在 HTML 中使用 markdown

在这里面写就行。
</code>
code 块外面只能写 html 语法，比如
## 这几个字就不会转成标题格式
<pre mkd>
## 注意

你可以多复制几个 code 块或 pre 块来实现多个 markdown 区域。

用 markdown 语法插个图 ![](https://www.zhihu.com/favicon.ico)

只需要引入一个 JS 即可，但是使用的是 3.0 的版本。
</pre>

<script src="marked.min.js"></script>
<!-- 下载地址：https://cdn.jsdelivr.net/npm/marked@3.0.0/marked.min.js -->
<!-- 懒得下载也可以直接用下面这段代码（但是不保证游客能访问） -->
<script src="https://cdn.jsdelivr.net/npm/marked@3.0.0/marked.min.js"></script>
<script> // 21年那时代码写得比较烂，献丑了，现在重写一版
var m = document.querySelectorAll('code[mkd=""], pre[mkd=""]');
for(var i = 0; i < m.length; i++){
  var e = m[i];
  var div = document.createElement('div');
  div.className = 'mkd';
  div.innerHTML = marked(e.innerHTML.trim());
  e.parentNode.insertBefore(div, e);
  e.setAttribute('mkd', 1); // 此处用标记防止重复解析
}
</script>

<style>
div.mkd + code[mkd], div.mkd + pre[mkd]{
  display: none;
}
</style>
</body>

效果展示

## 在 HTML 中使用 markdown

在这里面写就行。

code 块外面只能写 html 语法，比如

这几个字就不会转成标题格式

## 注意

你可以多复制几个 code 块或 pre 块来实现多个 markdown 区域。

用 markdown 语法插个图 ![](https://www.zhihu.com/favicon.ico)

只需要引入一个 JS 即可，但是使用的是 3.0 的版本。