My typora theme

origin

Typora, which uses Markdown syntax to write notes, first became known about two years ago. When I started using Typora a year ago, I learned that Typora can change the layout of notes by changing the theme, so I started collecting various Typora themes. I happened to find a theme modified by @Zhang Jin based on Urise Polar and Pie during a visit to Zhihu. Then I realized that you can also customize your own theme, so I thought I should write a Typora theme.

But helpless is oneself is a dreg, remember at that time even why some themes will take a folder of the same name and some themes only one. CSS file do not know, also do not understand. CSS code. This year, I simply learned some CSS syntax because I needed to use Markdown Nice to write public account tweets. Typora was also used more frequently, so the idea of writing my own Typora theme began to germy in my mind.

Thanks to my predecessors for providing theme styles that I can modify within their body framework. This theme is mainly modified based on @Zhang Jin’s Typora theme and Urise Polar theme, and also referred to other themes and part of Markdown Nice theme, thank you.

Theme installation

  1. Open Typora, click on the “File” menu and find the “Preferences”. Click “Appearance” in preference setting, click “Open theme folder” on the right page, that is, the theme folder of Typora will pop up;
  2. Download this theme and place the theme underxiaoya.cssFiles andxiaoyaPut the folder in Typora’s theme folder
  3. Open Typora again, you can find the name under the “Theme” menuxiaoyaThe theme of the

Theme is introduced

The theme color

The theme currently has two theme colors: Purple and moon blue, the default theme color is purple.

If you want to use moon blue as the theme color, open the xiaoya.css file, find the theme color moon blue in :root{}, uncomment the following color definition code (approximately lines 31 to 53), and comment the theme color purple (approximately lines 6 to 28).

Elegant purple

On the green

Start the interface

Refer to the Urise Polar theme and open the blank.md file Typora to show a picture as the background

The font

The font size for the main body of the theme is 16px. All English and Chinese characters of the theme are HelveticaNeue and Apple fonts except for the following special statements.

The English font for the headlines of grade 2, 3, 4, 5 and 6 is Times New Roman and the Chinese font is 宋体.

The quoted English font is HelveticaNeue and the Chinese font is regular script.

The English font of the line code is lmmono10, and the Chinese font is 宋体;

The font of the code block is Roboto Mono in English and Song Typeface in Chinese.

The link font is square meow

Results show

The title

References and Lists

Forms and task lists

Text style code blocks, etc

The formula

The picture

This theme provides three image styles

The first is a plain picture without any decoration

The second is an image with rounded corners and shadows by writing shadow in [], that is! [shadow](url)

The third is an image with a border, which is used by writing frame in [], that is! [frame](url)

note

  1. In the CSS file I have placed a code that inserts an image as the background of the notes page. If you want to use this effect, you can use the#write{}Uncomment the following code in.
 #write {
     /* background-image: url("./xiaoya/Pio.png"); background-repeat: no-repeat; background-size: 30%; background-position: 20% bottom; background-attachment: fixed; * /
   }
Copy the code

The location of the code is approximately line 142 to 146, with the following effect

  1. The moon-blue theme changes a reference style compared to the mauve theme

If you want to use my custom moon quote style, blockquote {… } blockquote p:first-of-type::before{…} blockquote p:first-of-type::before{… } and blockquote {… } uncomment

The last

If switching back and forth between mauve and moon-blue themes is too much trouble, I’ve also given you a single theme CSS file. The elegant purple theme file is elegant-purple. CSS, and the Moon blue theme file is cyan-moon.css. The xiaoya folder is necessary, which contains files such as fonts, background images and so on

GitHub address: Pyrrole-ach /typora-theme-xiaoya (github.com)

update

2022.01.18

  • Conceive the theme style, name the theme as Xiaoya, determine the theme color as purple, and name the theme color as elegant purple
  • Make sure that the main text size is 16px and the Chinese font is Apple Font and the English font is Helvetica Neue

2022.01.21

  • Complete the CSS section for the hierarchical title and reference styles

2022.01.22

  • Complete lists, tables, splashes, bold, strikeouts, highlights, task lists, footnotes, in-line code, code blocks, formulas, links, images, etc
  • Change the English font from Level 2 to level 6 to Times New Roman and Chinese font to Song Typeface
  • Change the Reference block Chinese font to regular script
  • Change the Chinese font of line code to Song Style and English font to LMmono 10
  • Change link Chinese font to square meow

2022.01.23

  • Added the effect of using an image as the background of an entire Typora page when opening a blank file
  • Modify the secondary header style
  • Swap the level 3 and level 4 heading styles
  • Add a page image background code to the theme CSS file (hidden by default)
  • Use the materials- Ocean theme as a code block to highlight the theme

2022.01.24

  • Add a set of cyan theme color, the theme color named moon green
  • Customize a new reference style for the moon-blue theme color
  • Fine tune the moon-green theme color of the three level title

2022.01.25

  • Fixed a problem with hierarchy title alignment in directories
  • Dark Moon-blue Theme Color The color of the text selected with the mouse
  • Separate the elegant purple theme color and the moon blue theme color in xiaoya theme into an independent theme. The elegant purple theme file is named elegant-Purple, and the moon blue theme file is named Cyan-moon