前端展示markdown并生成目录
时间: 2023-08-20 21:03:08 浏览: 63
前端展示Markdown并生成目录,可以通过使用JavaScript库来实现。
首先,我们可以使用Markdown解析库,如marked.js或markdown-it来将Markdown文本转换为HTML。
然后,我们可以使用JavaScript来遍历HTML的标题元素,并根据其层级生成目录列表。我们可以使用DOM操作方法如getElementByTagName和createElement来实现这个过程。
例如,对于一个Markdown文档,我们可以将其转换为HTML,并生成目录列表的代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Markdown展示与目录生成</title>
<style>
#toc {
display: inline-block;
padding-left: 10px;
border-left: 1px solid gray;
}
</style>
</head>
<body>
<div id="content">
<!-- 这里放置Markdown文本 -->
</div>
<div id="toc">
<h3>目录</h3>
<!-- 这里会生成目录列表 -->
</div>
<script src="marked.js"></script>
<script>
// 获取Markdown文本
var markdownText = document.getElementById('content').innerHTML;
// 将Markdown文本转换为HTML
var html = marked(markdownText);
// 将HTML插入到页面中
document.getElementById('content').innerHTML = html;
// 生成目录列表
var headings = document.getElementsByTagName('h1', 'h2', 'h3', 'h4', 'h5', 'h6');
var toc = document.getElementById('toc');
for (var i = 0; i < headings.length; i++) {
var heading = headings[i];
var level = parseInt(heading.tagName.charAt(1));
var link = document.createElement('a');
// 设置目录项的文本
link.textContent = heading.textContent;
// 设置目录项的href属性
link.href = '#' + heading.id;
// 创建目录项
var listItem = document.createElement('li');
listItem.appendChild(link);
// 添加目录项到目录列表中
toc.appendChild(listItem);
}
</script>
</body>
</html>
```
通过以上代码,我们可以将Markdown文本转换为HTML,并在页面中生成一个目录列表。目录列表中的每个项都是一个锚链接,点击链接可以跳转到对应的标题处。