如何使用Markdown生成目录索引-蒲公英云

如何使用Markdown生成目录索引

叁歲伎倆 2024-05-07 22:23 171阅读 0赞

一、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>