About Mdtht

GitHub license GitHub issues

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.

Implemented functions

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.
Drag to change the width of the sidebar.
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.

功能说明

Final effect

Light mode

整体效果

Dark mode

夜览模式

Catalog collapse effect

目录收起效果

3 types of directory styles

3 种目录样式

Search function effect

搜索功能效果

How to use it

Use in a separate HTML file

The steps to use in a separate HTML file are as follows:

In the<head>tag of HTML, sequentially introduce mdtht.min.css and mdtht.min.js
Code highlighting (you can skip this step without code highlighting):
1. Download highlight.min.js, [highlight.min.js download link]（ https://highlightjs.org/download ）Attention: Please select "Select all languages" when downloading
2. Extract the downloaded file and refer to step 1 to import highlight.min.js into HTML.
3. Add code after introducing highlight.min.js: <script>hljs.highlightAll()</Script> -> Save.
Completed.

Using in Typora

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:
1. Download highlight.min.js，highlight.min.js-download address，Attention: Please select "Select all languages" when downloading
2. Extract downloaded files, Refer to step 3 to copy the highlight.js code into the text box of the<body/>
3. 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.

Using in MarkdownPad

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:
1. Download highlight.min.js，highlight.min.js-download address，Attention: Please select "Select all languages" when downloading
2. Extract downloaded files, Refer to step 5 to copy the highlight.js code into a new <script> tag pair.
3. Add code at the end of the highlight.min.js code: hljs.highlightAll(); -> Save completed
Save and close, complete.

Using in other Markdown editors

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.

How to customize initialization configuration

Description of initialization parameters

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

Custom initialization settings

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.

Modify font

If you are not satisfied with the font, you can customize the text and code fonts as follows:

Find at the last position of mdtht.min.js: ()=>{new Mdtht}

Replace ()=>{new Mdtht} as follows:

Only modify the text font: ()=>{(new Mdtht).modifyFont("Text Font")}
Only modify the code font: ()=>{(new Mdtht).modifyFont("default", "code font")}
Modify text and code fonts:()=>{(new Mdtht).modifFont("Text Font", "Code Font")}, the following is an example:

//1.Only modify the text font to: Times New Roman
()=>{(new Mdtht).modifyFont("Times New Roman")}
   
//2.Only modify the code font to: Helvetica
()=>{(new Mdtht).modifyFont("default", "Helvetica")}
   
//3.Change the text font to Times New Roman and the code font to: Helvetica
()=>{(new Mdtht).modifyFont("Times New Roman", "Helvetica")}

Attention: The prerequisite for changing the font is that the corresponding font is installed on your computer, otherwise the modification is invalid； If you are not familiar with the font-family property of CSS, you can refer to it here: ht

Mdtht

Install / Use

README