一、Markdown生成目录索引怎么折叠
在Markdown中，可以使用[TOC]语法生成目录索引。
如果想要折叠目录，则需要使用一些插件，如Tocbot、jquery-tocify等。
例如，在使用Tocbot时，可以在Markdown文档中加入以下代码：
<!--请加入以下代码-->
<script>
tocbot.init({
// 折叠css样式
collapseClass: 'tocbot-is-collapsed',
// 列表css样式
listClass: 'tocbot-list',
// 链接css样式
linkClass: 'tocbot-link',
// 层级深度
depth: 6,
// 显示子目录数
showAndHideOnMobile: true,
});
</script>
这样就可以在HTML中自动生成一个可折叠的目录了。
二、Markdown目录索引生成
Markdown可以在文末自动生成目录索引，让读者更直观地查看文章结构。
只需要在Markdown的文档中插入[TOC]语法，就可以自动生成目录索引了。
例如：
# 这是一级标题
## 这是二级标题
### 这是三级标题
[TOC]
# 这是一级标题
正文内容这样就可以在最上方自动生成目录索引了。
三、Markdown生成网页
Markdown可以方便地将文本转化为HTML页面展示。
只需在Markdown文件中加入以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Markdown to HTML</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
## 写入Markdown代码
<div class="markdown">
<!--在这里插入Markdown代码-->
</div>
## 写入Mathjax
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [['$', '$']],
displayMath: [['$$', '$$']],
processEscapes: true,
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'],
ignoreClass: 'comment-content',
processClass: 'math-content'
},
jax: ['input/TeX', 'output/HTML-CSS'],
displayAlign: 'left',
'HTML-CSS': {
linebreaks: {
automatic: true
}
}
});
</script>
<script type="text/javascript" async
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
## 添加目录
<div class="toc">
[TOC]
</div>
## 加载目录插件
<script src="toc.min.js"></script>
</body>
</html>
这样就可以生成一个包含目录索引的HTML页面了。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/309435.html
微信扫一扫 
支付宝扫一扫 