Merge pull request #397 from cayxc/gh-pages

Mdmdt 配图更新

Author: abnerlee

_posts/theme/2024-11-27-Mdmdt.md

@@ -10,7 +10,8 @@ thumbnail: mdmdt.png
 typora-root-url: ../../
 typora-copy-images-to: ../../media/theme/mdmdt
 ---
-![mdmdt-theme](/media/theme/mdmdt/mdmdt-cover.png)
+![typora-mdmdt-theme](/media/theme/mdmdt/mdmdt.png)
+
 # About Mdmdt theme
 ![GitHub release (latest by date including pre-releases)](https://img.shields.io/github/v/release/cayxc/Mdmdt?include_prereleases&color=blue&logo=hack-the-box)
 ![GitHub license](https://img.shields.io/github/license/cayxc/Mdmdt.svg)
@@ -19,44 +20,43 @@ typora-copy-images-to: ../../media/theme/mdmdt
 
 [中文文档](https://github.com/cayxc/Mdmdt/blob/main/readme.zh.md)
 
-**Mdmdt** is an abbreviation for Markdown Minimalism Document Theme, meaning: Markdown Minimalism Document Theme.
-
-**Mdmdt** is a deeply customized personalized Typora theme, aimed at creating a **refreshing and minimalist** document style.
+**Mdmdt** is an abbreviation for Markdown Minimalism Document Theme, meaning: Markdown Minimalism Document Theme.**Mdmdt** is a deeply customized personalized Typora theme, aimed at creating a **refreshing and minimalist** document style. The **Mdmdt** theme has now been included in the [official Typora theme library](https://theme.typoraio.cn).
 
 Compared to the default theme style, the following aspects have been mainly modified:
-1. A simple and comfortable color scheme style
-2. Add rounded corner style
-3. Title Style
-4. Table Style
-5. Reference box style
-6. Image Style
-7. Code Highlight Style
-8. File Tree Style
-9. Document list style: changed to card structure
-10. Outline style: Added a directory tree structure, making the directory hierarchy more concise and clear
-11. Automatically follow the bright/dark theme mode of the system (the bright/dark theme can be set separately)
+1. Simple and comfortable color matching style
+2. Modify the title style
+3. Modify the table style
+4. Modify the reference box style
+5. Add rounded corner style to the image
+6. Add highlight style to code
+7. Modify file tree, outline, and document list styles
+8. Automatic follow system's light/dark theme mode (can be set separately for light/dark themes)
+9. Modify other UI styles
 
 > [!IMPORTANT]
 >
 > **Attention**: This theme has only been tested in Windows and MacOS environments, and has not been tested in Linux environments. Please be aware when using it!
 
 
-# Effect
-![mdmdt-text](/media/theme/mdmdt/mdmdt-text.jpg)
-![mdmdt-source](/media/theme/mdmdt/mdmdt-source.jpg)
-![mdmdt-code](/media/theme/mdmdt/mdmdt-code.jpg)
-![mdmdt-list](/media/theme/mdmdt/mdmdt-list.jpg)
-![mdmdt-blockquote](/media/theme/mdmdt/mdmdt-blockquote.jpg)
-![mdmdt-mermaid](/media/theme/mdmdt/mdmdt-mermaid.jpg)
-![mdmdt-title](/media/theme/mdmdt/mdmdt-title.jpg)
+# Preview
+
+![mdmdt-text](/media/theme/mdmdt/mdmdt-text.png)
+![mdmdt-source](/media/theme/mdmdt/mdmdt-source.png)
+![mdmdt-code](/media/theme/mdmdt/mdmdt-code.png)
+![mdmdt-list](/media/theme/mdmdt/mdmdt-list.png)
+![mdmdt-math](/media/theme/mdmdt/mdmdt-math.png)
+![mdmdt-blockquote](/media/theme/mdmdt/mdmdt-blockquote.png)
+![mdmdt-mermaid](/media/theme/mdmdt/mdmdt-mermaid.png)
+![mdmdt-title](/media/theme/mdmdt/mdmdt-title.png)
 
 ---
 
 ![mdmdt-ui-1](/media/theme/mdmdt/mdmdt-ui-1.png)
 ![mdmdt-ui-2](/media/theme/mdmdt/mdmdt-ui-2.png)
-![mdmdt-ui-3](/media/theme/mdmdt/mdmdt-ui-3.jpg)
+![mdmdt-ui-3](/media/theme/mdmdt/mdmdt-ui-3.png)
 ![mdmdt-ui-4](/media/theme/mdmdt/mdmdt-ui-4.png)
 
+
 # How to use it
 Using custom themes is very simple, as follows:
 
@@ -74,13 +74,14 @@ If you only want to use a separate bright or dark theme, the method is as follow
 
 
 # Modify font
-If you are not satisfied with the font, you can modify the corresponding font as follows:
+If you are not satisfied with the font, you can refer to the following methods to modify the corresponding font:
 
-1. Modify the font of the main text, find `body {font-family:"PingFang SC",..., !important;}` 、`body.os-windows {font-family: Helvetica,..., !important;}` and `textarea {...}`, and add the font you want to use at the beginning of `font-family:`, such as `font-family: "name of the font you want to use", Helvetica, ..., !important;`
+1. Modify the text font and find: `font-family: "PingFang SC", "Microsoft YaHei", Arial, "Helvetica Neue", Helvetica, sans-serif;` ,  Then add the font you want to use in the first position after "font-family:",  such as: `font-family:  "The font name you want to use", "PingFang SC", ..., sans-serif;`
 
-2. Modify the font of the code, find `code, tt {...}` and `pre {...}`, and add `font-family: "name of the font you want to use" !important;`  Then modify `.os-windows pre,.os-windows code {font-family: initial !important;}` , such as `font-family: "name of the font you want to use" !important;`
+2. Modify the code font and find: `--monospace: "JetBrains Mono", "Source Code Pro", "Fira Code", Consolas, Inconsolata, "Cascadia Code", Monaco, "Ubuntu Mono", monospace;`，Then add the font you want to use in its first position,  such as: `--monospace:  "The font name you want to use", "JetBrains Mono", ..., monospace;`
+
+**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: https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-family
 
-**Attention: The prerequisite for changing the font is that the corresponding font is installed on your computer, otherwise the modification is invalid.**
 
 # Export HTML
 
@@ -108,10 +109,12 @@ This plugin provides the following rich features:
 
 Please refer to the plugin homepage for specific details of **mdtht.js** plugin.
 
+---
+
 **Export mdtht.js as an HTML rendering (Light theme)**
+<img src="/media/theme/mdmdt/mdtht-light.png"/>
 
 ---
-<img src="/media/theme/mdmdt/mdtht-light.png"/>**Export mdtht.js as an HTML rendering (Dark theme)**
 
----
+**Export mdtht.js as an HTML rendering (Dark theme)**
 <img src="/media/theme/mdmdt/mdtht-dark.png"/>