# Mdtht **Repository Path**: cayxc/mdtht ## Basic Information - **Project Name**: Mdtht - **Description**: Markdown文件导出html时自动生成侧边栏目录和样式；为单个html文档自动生成侧边栏目录和样式。支持浅色和深色样式、自动目录编号、目录搜索、目录样式切换等功能。 - **Primary Language**: JavaScript - **License**: BSD-3-Clause - **Default Branch**: master - **Homepage**: https://gitee.com/cayxc/mdtht - **GVP Project**: No ## Statistics - **Stars**: 57 - **Forks**: 15 - **Created**: 2020-01-03 - **Last Updated**: 2025-07-09 ## Categories & Tags **Categories**: Uncategorized **Tags**: html-doc-style, markdown-to-html-style, typora-to-html-style, markdownpad2-to-html-style, Mdtht ## README # 关于Mdtht ![Languages](https://img.shields.io/badge/languages-JavaScript+SCSS-F34B7D.svg) ![GitHub release (latest by date including pre-releases)](https://img.shields.io/github/v/release/cayxc/Mdtht?include_prereleases&color=blue&logo=hack-the-box) ![GitHub license](https://img.shields.io/github/license/cayxc/Mdtht.svg) ![gitee stars](https://gitee.com/cayxc/mdtht/badge/star.svg) ![gitee forks](https://gitee.com/cayxc/mdtht/badge/fork.svg) [English Document](./readme.en.md) **Mdtht**（Markdown to Html Theme）是使用 Javascript和 CSS 为 Markdown编辑器开发的一款插件。目的是在将 .md 文件导出为html文件或预览时，自动生成侧边目录、文档样式。可以在任何支持添加 js 和 css 的Markdown编辑器中使用，如：**Typora**、**MarkdownPad** ...... > [!IMPORTANT] > > **注意：在单独的 html 文件中使用也可以**，只需在html文件中引入 mdtht.min.js和 mdtht.min.css 就能生成相关样式，只要html中有 h标签就能生成相应的目录。 > [!IMPORTANT] > > **注意：** **Mdtht 是 MarkdownPad2AutoCatalog 的重制版** > > MarkdownPad2AutoCatalog 现在已经废弃，请之前使用MarkdownPad2AutoCatalog 的用户重新下载 Mdtht > > **Mdtht** 相比 **MarkdownPad2AutoCatalog** 具有更加高的执行效率和更加丰富的功能。 # 实现的功能 **Mdtht**提供了如下功能： 1. 高亮和暗黑两种文档风格模式（根据系统自动切换，也可手动设置） 2. 根据 html 文档中 h1~h6 标签的位置自动生成对应层级的目录和序号 3. 根据 h 标签的位置自动纠正目录所属层级 4. 自动生成侧边栏目录导航 5. 拖动改变侧边栏宽度 6. 标题序号显示或隐藏 7. 目录层级树状图 8. 三种目录图标样式 9. 文字阴影效果 10. 一键展开收起子目录 11. 一键展开收起侧边栏 12. 根据阅读区内容自动追踪所在目录 13. 目录搜索 14. 代码高亮插件 highlightjs 样式美化，[highlightjs网址](https://highlightjs.org/) 15. 根据个人喜好个性化配置样式 ![功能说明](./img/mdtht-0.png) # 最终效果 **亮色模式** ![整体效果](./img/mdtht-1.png) **暗色模式** ![夜览模式](./img/mdtht-2.png) **目录收起效果** ![目录收起效果](./img/mdtht-5.png) **3 种目录样式及隐藏目录编号** ![3 种目录样式](./img/mdtht-3.png) **搜索功能效果** ![搜索功能效果](./img/mdtht-4.png) # 如何使用 ## 在单独的html文件中使用在**单独的html文件**中使用步骤如下： 1. 在 html 的 ``标签中依次引入 mdtht.min.css、 mdtht.min.js 2. 代码高亮（不需要代码高亮可以跳过这步）： 1. 下载 highlight.min.js，[highlight.min.js下载地址](https://highlightjs.org/download)，**注意：下载时请选择 “Select all languages”** 2. 解压下载的文件，参照第 1 步将 highlight.min.js 引入到html中。 3. 在引入的 highlight.min.js之后添加代码： `` -> `保存`。 3. 完成。 ## 在Typora中使用在**Typora**中使用步骤如下： 1. 打开 `偏好设置` -> `导出` -> `点击右侧的 + 按钮` -> `从模版添加，选择HTML(without Styles)` -> `添加` -> `修改刚才添加的模版名称，如：Mdtht` 2. 点击添加的模版 Mdtht -> `在文本框中` -> `输入：` -> 复制 dist 文件夹中的 **mdtht.min.css** 代码到 `` 3. `在文本框中` -> `输入：` -> 复制 dist 文件夹中的 **mdtht.min.js** 的代码到`` 4. 样式文件添加完成。 5. 代码高亮： 1. 下载 highlight.min.js，[highlight.min.js下载地址](https://highlightjs.org/download)，**注意：下载时请选择 “Select all languages”** 2. 解压下载的文件，参照第 3 步将 highlight.min.js 代码复制到 `文本框中` 3. **在 highlight.min.js 代码的最后位置添加代码： `hljs.highlightAll();`** -> `保存完成`。 6. 导出 html 时选择刚刚添加的 Mdtht 模版即可。 ## 在MarkdownPad中使用在**MarkdownPad**中使用步骤如下： 1. 复制 dist 文件夹中的 **mdtht.min.css** 的代码。 2. 打开 MarkdownPad -> `工具` -> `选项` -> `样式表` -> `添加` 3. 粘贴 **mdtht.min.css** 的代码 -> 给样式表取一个以.css结尾的名字 -> `保存并关闭` 4. 复制 dist 文件夹中的 **mdtht.min.js** 的代码。 5. 打开 MarkdownPad -> `工具` -> `选项` -> `高级` -> `Html Head编辑器` -> 在代码编辑器中输入 `` 标签对，然后粘贴 **mdtht.min.js** 的代码到标签对中： `` -> `保存并关闭` 6. 代码高亮： 1. 下载 highlight.min.js，[highlight.min.js下载地址](https://highlightjs.org/download)，**注意：下载时请选择 “Select all languages”** 2. 解压下载的文件，参照第 5 步将 highlight.min.js 代码复制到 `新的