Mdtht（Markdown to Html Theme） is a plugin developed for Markdown editors using JavaScript and CSS. The purpose is to automatically generate side directories and document styles when exporting. md files as HTML files or previewing them.
Can be used in any Markdown editor that supports adding JavaScript and CSS, such as:：Typora、MarkdownPad ......
Important
Note: It can also be used in a separate HTML file. Simply introduce mdtht.min.js and mdtht.min.css into the HTML file to generate the relevant styles. As long as there is an h tag in the HTML, the corresponding directory can be generated.
Important
Important Tips： Mdtht is a remake of MarkdownPad2AutoCatalog
MarkdownPad2AutoCatalog is now obsolete. Users who previously used MarkdownPad2AutoCatalog should download Mdtht again
Compared to MarkdownPad2AutoCatalog, Mdtht has higher execution efficiency and richer features.
Mdtht provides the following features：
- Two document style modes, high brightness and dark, can be automatically switched based on the system or manually set.
- Automatically generate corresponding hierarchical directories and serial numbers based on the position of h1~h6 tags in the HTML document.
- Automatically correct the directory hierarchy based on the position of the h tag
- Automatically generate sidebar directory navigation.
- Show or hide title numbering.
- Directory hierarchical tree view.
- 3 types of directory icon styles.
- Text Shadow Effect.
- One click expansion of storage subdirectories.
- One click expansion and collapse of sidebar.
- Automatically track the directory based on the content of the reading area.
- Catalog search.
- Code highlighting plugin highlightjs style beautification，highlightjs
- Personalize configuration styles based on personal preferences.
Light mode
Dark mode
Catalog collapse effect
3 types of directory styles
Search function effect
The steps to use in a separate HTML file are as follows:
- In thetag of HTML, sequentially introduce mdtht.min.css and mdtht.min.js
- Code highlighting (you can skip this step without code highlighting):
- Download highlight.min.js, [highlight.min.js download link]（ https://highlightjs.org/download ）Attention: Please select "Select all languages" when downloading
- Extract the downloaded file and refer to step 1 to import highlight.min.js into HTML.
- Add code after introducing highlight.min.js:
<script>hljs. highlightAll()</Script>-> Save.
- Completed.
The steps to use in Typora are as follows:
- Open
Preferences->Export->lick on the+button on the right->Add from Template, select HTML (without Styles)->Add->Modify the template name just added, for example: Mdtht - Click on the added template Mdtht ->
In the<head/>text box->Input:<style> </style>-> Copy the mdtht.min.css code from the dist folder to the<style>label pair，For example:<style> Copy the code of mdtht.min.css here </style> In the<body/>text box->Input:<script> </script>-> Copy the mdtht.min.js code from the dist folder to the<script>label pair，For example:<script> Copy the code of mdtht.min.js here </script>- The style file has been added.
- Code highlight:
- Download highlight.min.js，highlight.min.js-download address，Attention: Please select "Select all languages" when downloading
- Extract downloaded files, Refer to step 3 to copy the highlight.js code into the text box of the
<body/> - Add code at the end of the highlight.min.js code:
hljs.highlightAll();->Save completed
- When exporting HTML, simply select the Mdtht template you just added.
The steps to use in MarkdownPad are as follows:
-
Copy the code of mdtht.min.css from the dist folder.
-
Open MarkdownPad ->
Tool->Option->Style sheet->Add -
Paste the code for mdtht.min.css -> Give the style sheet a name that ends in '.css' ->
Save and Close -
Copy the code of mdtht.min.js from the dist folder.。
-
Open MarkdownPad ->
Tool->Option->Senior->Html Head Editor-> Enter the label pairs in the code editor，Then paste the code of mdtht.min.js into the label pair, For example:<script> Copy the code of mdtht.min.js and place it here </script>->Save and Close -
Code highlight:
- Download highlight.min.js，highlight.min.js-download address，Attention: Please select "Select all languages" when downloading
- Extract downloaded files, Refer to step 5 to copy the highlight.js code into a new
<script>tag pair. - Add code at the end of the highlight.min.js code:
hljs.highlightAll();->Save completed
-
Save and close, complete.
As long as the Markdown editor used supports adding JavaScript and CSS，It can be used. How to add it specifically, please configure it according to your own editor.
The core is to add JavaScript and CSS to the exported HTML file，You can even import mdtht.min.css and mdtht.min.js directly into existing HTML files for use.
| order | parameter | type | Default value | describe |
|---|---|---|---|---|
| 1 | indexStyle | Number | 1 | Directory style, This value only has three options: 1, 2, 3, default style 1 |
| 2 | firstTagToTitle | Boolean | fasle | Do you want to use the first title as the document title, not included in the table of contents, and default to closed |
| 3 | titleCenter | Boolean | true | Is the article title centered，This option is only valid when firstTagToTitle is true |
| 4 | showIndex | Boolean | false | Do you want to display the catalog index |
| 5 | showTitleIndex | Boolean | false | Do you want to enable the title sequence of the main text |
| 6 | showTree | Boolean | true | Is the directory hierarchy tree line enabled |
| 7 | openShadow | Boolean | false | Is text shading enabled |
| 8 | openDark | Boolean | fasle | Whether to enable dark mode, false for day mode, true for dark mode，This option has lower priority than system mode, but can still be manually switched |
If you want to initialize relevant styles according to personal preferences, please follow the following steps:
-
Open mdtht.min.js.
-
Find at the end of the code:
new Mdtht -
If configured as: Table of Contents Style 2，Use the first title as the document title，Centered article title, Configure as：
new Mdtht(2,true,true) -
Save Exit.
Example of configuration parameter sequence:
new Mdtht(indexStyle, firstTagToTitle, titleCenter, showIndex, showTitleIndex, showTree, openShadow, openDark);
Important
**Be Careful：**If you want to configure the Nth parameter, the parameters before the Nth parameter must also be configured in sequence. If you want to configure the third parameter, the first and second parameters must also be configured.
🐳 If you like the style of this document, please provide a star 😄，If there are any issues during use, please submit them in a timely manner.