Mdmdt

cayxc 2024/11/27
Homepage Download

mdmdt-theme

About Mdmdt theme

GitHub release (latest by date including pre-releases) GitHub license GitHub forks GitHub Repo stars

中文文档

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.

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)

[!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 mdmdt-source mdmdt-code mdmdt-list mdmdt-blockquote mdmdt-mermaid mdmdt-title


mdmdt-ui-1 mdmdt-ui-2 mdmdt-ui-3 mdmdt-ui-4

How to use it

Using custom themes is very simple, as follows:

  1. Open Preferences -> Appearance -> Open Theme Folder
  2. Copy the downloaded mdmdt.cs file to the theme folder.
  3. Exit Typora and reopen,In the Menu Bar -> Themes, Select Mdmdt theme and complete the theme switch.

    [!NOTE] Note: The mdmdt.css file contains both bright and dark themes, which will automatically switch between bright and dark themes according to the system mode.

Use separate Light/Dark theme

If you only want to use a separate bright or dark theme, the method is as follows:

  1. Open Preferences -> Appearance -> Open Theme Folder
  2. Copy mdmdt-light.css or mdmdt-dark.css to the theme folder.
  3. Exit Typora and reopen,In the Menu Bar -> Themes, Select Mdmdt Light or Mdmdt Dark theme and complete the theme switch.

Modify font

If you are not satisfied with the font, you can modify the corresponding font as follows:

  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;

  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;

Attention: The prerequisite for changing the font is that the corresponding font is installed on your computer, otherwise the modification is invalid.

Export HTML

To export an HTML file, you can directly select the current theme to export HTML If you want to export HTML files with customizable styles, you can use the Mdtht plugin:

Plugin homepage address: Mdtht-Github-address Mdtht-Gitee-address

This plugin provides the following rich features:

  1. Two document style modes, high brightness and dark, can be automatically switched based on the system or manually set.
  2. Automatically generate corresponding hierarchical directories and serial numbers based on the position of h1~h6 tags in the HTML document.
  3. Automatically correct the directory hierarchy based on the position of the h tag.
  4. Automatically generate sidebar directory navigation.
  5. Drag to change the width of the sidebar.
  6. Show or hide title numbering.
  7. Directory hierarchical tree view.
  8. 3 types of directory icon styles.
  9. Text Shadow Effect.
  10. One click expansion of storage subdirectories.
  11. One click expansion and collapse of sidebar.
  12. Automatically track the directory based on the content of the reading area.
  13. Catalog search.
  14. Code highlighting plugin highlightjs style beautification,highlightjs
  15. Personalize configuration styles based on personal preferences.

Please refer to the plugin homepage for specific details of mdtht.js plugin.

Export mdtht.js as an HTML rendering (Light theme)


Export mdtht.js as an HTML rendering (Dark theme)