diff --git a/.github/workflows/dev-build.yml b/.github/workflows/dev-build.yml
index ff719bc..2d09464 100644
--- a/.github/workflows/dev-build.yml
+++ b/.github/workflows/dev-build.yml
@@ -11,7 +11,7 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v2
-      - name: Install dependencies
+      - name: Install Dependencies
         run: |
           sudo apt install ruby sass -y
       - name: Compile
@@ -22,4 +22,4 @@ jobs:
         with:
           name: my-artifact
           path: |
-            ./src/latex-theme/*.zip
+            ./src/latex-theme/*
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 5a42d4b..f080c58 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -10,12 +10,12 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v2
-      - name: Install dependencies
+      - name: Install Dependencies
         run: |
           sudo apt install ruby sass -y
       - name: Compile
         run: |
-          cd ./src; make
+          cd ./src; make all-and-compress
       - name: Release
         uses: marvinpinto/action-automatic-releases@latest
         with:
diff --git a/src/Makefile b/src/Makefile
index 479557c..43a96c2 100644
--- a/src/Makefile
+++ b/src/Makefile
@@ -5,36 +5,43 @@ working_dir = $(base_dir)/build
 windows = windows
 macos = macos
 linux = linux
+typora = typora
+pandoc = pandoc
 
 $(shell mkdir -p $(working_dir))
 $(shell mkdir -p $(target_dir))
 
-# $(1) is the name of operating system, $(2) is light or dark theme
+# $(1) is the name of operating system, $(2) is typora or pandoc, $(3) is light or dark theme
 define build
-	mkdir -p $(target_dir)/$(1)
-	mkdir -p $(target_dir)/$(1)/target
-	echo '$$theme: "$(2)";' >> $(working_dir)/$(1)-$(2).scss
-	echo '$$os: "$(1)";' >> $(working_dir)/$(1)-$(2).scss
-	cat $(base_dir)/latex-theme.scss >> $(working_dir)/$(1)-$(2).scss
-	if [ "$(2)" = "light" ]; then \
-		scss --sourcemap=none $(working_dir)/$(1)-$(2).scss $(target_dir)/$(1)/target/latex.css; \
+	mkdir -p $(target_dir)/$(1)-$(2)
+	mkdir -p $(target_dir)/$(1)-$(2)/target
+	echo '$$os: "$(1)";' >> $(working_dir)/$(1)-$(2)-$(3).scss
+	echo '$$tool: "$(2)";' >> $(working_dir)/$(1)-$(2)-$(3).scss
+	echo '$$theme: "$(3)";' >> $(working_dir)/$(1)-$(2)-$(3).scss
+	cat $(base_dir)/latex-theme.scss >> $(working_dir)/$(1)-$(2)-$(3).scss
+	if [ "$(3)" = "light" ]; then \
+		scss --sourcemap=none --style expanded $(working_dir)/$(1)-$(2)-$(3).scss $(target_dir)/$(1)-$(2)/target/latex.css; \
 	else \
-		scss --sourcemap=none $(working_dir)/$(1)-$(2).scss $(target_dir)/$(1)/target/latex-$(2).css; \
-	fi;
+		scss --sourcemap=none --style expanded $(working_dir)/$(1)-$(2)-$(3).scss $(target_dir)/$(1)-$(2)/target/latex-$(3).css; \
+	fi
 endef
 
 # $(1) is the name of operating system
-define build-os
-	$(call build,$(1),light)
-	$(call build,$(1),dark)
+define build-typora
+	$(call build,$(1),$(typora),light)
+	$(call build,$(1),$(typora),dark)
 	if [ "$(1)" = "$(windows)" ]; then \
-		cp $(base_dir)/install.ps1 $(target_dir)/$(1); \
+		cp $(base_dir)/install.ps1 $(target_dir)/$(1)-$(typora); \
 	else \
-		cp $(base_dir)/install.sh $(target_dir)/$(1); \
+		cp $(base_dir)/install.sh $(target_dir)/$(1)-$(typora); \
 	fi;
-	cp $(base_dir)/README.md $(target_dir)/$(1)
-	cp -r $(base_dir)/../Supplemental $(target_dir)/$(1)/Supplemental
-	cd $(target_dir)/$(1); zip -r $(target_dir)/latex-theme-$(1).zip ./*
+	cp $(base_dir)/README.md $(target_dir)/$(1)-$(typora)
+	cp -r $(base_dir)/../Supplemental $(target_dir)/$(1)-$(typora)/Supplemental
+endef
+
+define build-pandoc
+	$(call build,$(linux),$(pandoc),light)
+	$(call build,$(linux),$(pandoc),dark)
 endef
 
 .PHONY: all
@@ -42,18 +49,31 @@ all:
 	make windows
 	make macos
 	make linux
+	make pandoc
+
+.PHONY: all-and-compress
+all-and-compress:
+	make all
+	cd $(target_dir)/$(windows)-$(typora); zip -r $(target_dir)/latex-theme-$(windows).zip ./*
+	cd $(target_dir)/$(macos)-$(typora); zip -r $(target_dir)/latex-theme-$(macos).zip ./*
+	cd $(target_dir)/$(linux)-$(typora); zip -r $(target_dir)/latex-theme-$(linux).zip ./*
+#	cd $(target_dir)/$(pandoc)-$(typora); zip -r $(target_dir)/latex-theme-$(pandoc).zip ./*
 
 .PHONY: windows
 windows:
-	$(call build-os,$(windows))
+	$(call build-typora,$(windows))
 
 .PHONY: macos
 macos:
-	$(call build-os,$(macos))
+	$(call build-typora,$(macos))
 
 .PHONY: linux
 linux:
-	$(call build-os,$(linux))
+	$(call build-typora,$(linux))
+
+.PHONY: pandoc
+pandoc:
+	$(call build-pandoc,$(linux))
 
 .PHONY: clean
 clean:
diff --git a/src/latex-theme.scss b/src/latex-theme.scss
index 071830f..47df04b 100644
--- a/src/latex-theme.scss
+++ b/src/latex-theme.scss
@@ -1,25 +1,66 @@
+/* ============================================
+ * ============ TYPORA lATEX THEME ============
+ * ============================================
+ * This project is based on the work of yfzhao20 and du33169,
+   whose repositories are addressed on
+   <https://github.com/yfzhao20/Typora-markdown> and
+   <https://github.com/du33169/typora-theme-essay_cn>,
+   many thanks to them.
+ * Typora LaTeX Theme (Markdown LaTeX Theme)
+   is a CSS theme mainly used as a component of Typora,
+   which is designed for Chinese university students
+   used in LaTeX-styled essays and reports.
+ * Copyright (C) 2021 Keldos;
+ * Repository Address: <https://github.com/Keldos-Li/typora-latex-theme>;
+ * Licensed Under GPL v3.0, SEE <https://github.com/Keldos-Li/typora-latex-theme/blob/main/LICENSE>
+ */
+
+/* As a special exception, you may create a larger work
+   that contains part or all of the Typora LaTeX Theme
+   and distribute that work under terms of your choice,
+   so long as that work isn't itself a CSS theme
+   or can be processed into CSS theme by using some
+   CSS pre-processors like SASS. Alternatively, if you
+   modify or redistribute this CSS theme itself,
+   you may (at your option) remove this special exception,
+   which will cause the CSS theme and the resulting output files
+   to be licensed under the GNU General Public License
+   without this special exception.
+ */
+
+/////////////////////////////////////////////////////////////////////
+//                                                                 //
+//                       如果您仅想使用本主题                         //
+//                         不要下载此文件！                          //
+//               请前往 GitHub Release 页面下载 ZIP 包               //
+//                                                                //
+////////////////////////////////////////////////////////////////////
+
+// 以下三个键会被 Makefile 拼接到文件起始部分
+// 下面展示的值是一个样例
 // $os: "macos";
 // $theme: "light";
+// $tool: "typora";
 
 :root {
   @if $os == "windows" {
-    $ui-font: "阿里巴巴普惠体 2.0" !global;
+    $ui-font: "\"阿里巴巴普惠体 2.0\"", "\"微软雅黑\"" !global;
     $heading-Chinese-font: "华文黑体" !global;
     $chapter-Chinese-font: "华文黑体" !global;
     $sub-chapter-Chinese-font: "华文楷体" !global;
     $sub-sub-chapter-Chinese-font: "华文仿宋" !global;
     $base-Chinese-font: "华文宋体" !global;
   } @else if $os == "macos" {
-    $ui-font: "苹方-简" !global;
+    $ui-font: "\"苹方-简\"" !global;
     $heading-Chinese-font: "华文黑体Bold" !global;
     $chapter-Chinese-font: "方正公文黑体" !global;
     $sub-chapter-Chinese-font: "方正公文楷体" !global;
     $sub-sub-chapter-Chinese-font: "方正公文仿宋" !global;
     $base-Chinese-font: "宋体-简" !global;
   } @else if $os == "linux" {
-    $ui-font: "Noto Sans CJK SC" !global;
+    $ui-font: "\"Noto Sans CJK SC\"" !global;
     $heading-Chinese-font: "Noto Sans CJK SC" !global;
-    $chapter-Chinese-font: "Noto Serif CJK SC" !global;
+    $chapter-Chinese-font: "Noto Sans CJK SC" !global;
     $sub-chapter-Chinese-font: "Noto Serif CJK SC" !global;
     $sub-sub-chapter-Chinese-font: "Noto Serif CJK SC" !global;
     $base-Chinese-font: "Noto Serif CJK SC" !global;
@@ -28,31 +69,38 @@
   /* == 字体设置 == */
 
   /* 基准字体 */
-  --base-Latin-font: "Latin Modern Roman", "Latin Modern Roman 10"; /* 备选：Times, "Times New Roman" */
+  /* 备选：Times, "Times New Roman" */
+  --base-Latin-font: "Latin Modern Roman", "Latin Modern Roman 10";
   --base-Chinese-font: "#{$base-Chinese-font}";
   --base-font-size: 9.5pt;
 
   /* 引言字体 */
   --quote-font: "Latin Modern Roman", "Latin Modern Roman 10", Times,
     "Times New Roman", "华文仿宋";
-  --quote-font-size: 10pt; /* 这里字体用了10pt,比正文字体稍大 */
+  /* 这里字体用了10pt,比正文字体稍大 */
+  --quote-font-size: 10pt;
 
-  /* 代码字体（代码中的中文会调用ui-font） */
-  --code-font: "Latin Modern Mono", "Latin Modern Mono 10";
+  /* 代码字体（代码中的中文会调用 ui-font） */
+  --code-font: "Latin Modern Mono", "Latin Modern Mono 10", "Courier New";
 
   /* 侧边栏字体 */
-  --ui-font: "#{$ui-font}";
+  --ui-font: #{$ui-font};
 
   /* source mode 字体 */
-  --sourceMode-font: "SF Mono", "#{$ui-font}"; /* 默认调用code-font和ui-font */
+  /* 默认调用 code-font 和 ui-font */
+  --sourceMode-font: "SF Mono", #{$ui-font};
 
   /* 目录字体 */
-  --toc-font: ""; /* 默认调用base-font */
-  --toc-font-size: ""; /* 默认调用base-font-size */
+  /* 默认调用 base-font */
+  --toc-font: "";
+  /* 默认调用 base-font-size */
+  --toc-font-size: "";
 
   /* 表格字体 */
-  --table-title-font: ""; /* 默认调用heading-font */
-  --table-font: ""; /* 默认调用base-font */
+  /* 默认调用 heading-font */
+  --table-title-font: "";
+  /* 默认调用 base-font */
+  --table-font: "";
 
   /* 标题字体（总设置） */
   --heading-Latin-font: var(--base-Latin-font);
@@ -79,7 +127,8 @@
   --h6-font-size: 9.5pt;
 
   /* 粗体样式设置 */
-  --strong-weight: 900; /* 加粗风格时使用的字重；400等同于normal，700等同于bold，900等同于heavy */
+  /* 加粗风格时使用的字重；400等同于 normal，700等同于 bold，900等同于 heavy */
+  --strong-weight: 900;
 
   /* 基础行距 */
   --base-line-height: 16pt;
@@ -87,7 +136,6 @@
   /* == 页面设置 == */
   /* 打印页边距 */
   --set-margin: 1.8cm 2cm 1.2cm 2cm !important;
-  /* 参阅 <https://github.com/Keldos-Li/typora-latex-theme/blob/main/README.md#特别注意> */
 
   /* == 控制设置 == */
   /* 目录中是否显示一级标题 */
@@ -102,7 +150,8 @@
     --focus-shadow: 0px 8px 16px 0 rgba(0, 0, 0, 0.9);
     --opt-shadow: 0px 8px 16px 1px hsla(0, 0%, 0%, 0.3);
 
-    --side-bar-bg-color: #282828; /*change background of sidebar*/
+    /*change background of sidebar*/
+    --side-bar-bg-color: #282828;
     --window-border: 0px solid #929292;
     --title-color: #dddddd;
     --text-color: #dcdcdc;
@@ -119,27 +168,12 @@ body {
   line-height: var(--base-line-height);
   /*counter-reset: tableHead 0 imgHead 0;*/
   @if $theme == "dark" {
-    color: #dddddd; /* 黑色模式修改 */
-    background-color: #282828; /* 黑色模式修改 */
-    /*background:url(mermaidAPI.initialize({'fontFamily': '宋体-简, serif;'});); 可恶，不行 */
-  }
-}
-
-/* 正文区基本属性 */
-#write {
-  font-family: var(--base-Latin-font), var(--base-Chinese-font), serif;
-  font-size: var(--base-font-size);
-  max-width: 21cm; /* A4标准宽度 */
-  @if $theme == "light" {
-    background-color: white;
-  } @else if $theme == "dark" {
-    background-color: #1e1e1e; /* 黑色模式修改 */
+    /* 黑色模式修改 */
+    color: #dddddd;
+    /* 黑色模式修改 */
+    background-color: #282828;
+    // background:url(mermaidAPI.initialize({'fontFamily': '宋体-简, serif;'}););
   }
-  /* column-count: 2;
-    column-gap: 25px;
-    column-width: 8cm; 
-    display: inline-block; */
-  /* 这里可以试分栏的，但确实不适合实现 */
 }
 
 strong {
@@ -150,11 +184,14 @@ strong {
   #write {
     padding: var(--set-margin);
     @if $theme == "light" {
-      /*border: 0.8px solid #AAC ; /* 添加一个淡蓝色的边框 */
-      box-shadow: 0 0 24px 12px #cccccc; /* 页边来一个阴影！！好耶 */
+      /* 添加一个淡蓝色的边框 */
+      /*border: 0.8px solid #AAC ; */
+      /* 页边阴影 */
+      box-shadow: 0 0 24px 12px #cccccc;
     } @else if $theme == "dark" {
       /*border: 1px solid #AAAAAA ;*/
-      box-shadow: 0 0 24px 12px #101010; /* 页边来一个阴影！！好耶 */
+      /* 页边阴影 */
+      box-shadow: 0 0 24px 12px #101010;
     }
   }
 }
@@ -168,14 +205,183 @@ strong {
     text-decoration: none;
   }
   @page {
-    /* size: A4;  强制A4大小 */
-    margin: 1.8cm 2cm 1.2cm 2cm !important; /* 页边距在这里！！！！！！！！！！！！！！！！ */
-    /* 参阅 <https://github.com/Keldos-Li/typora-latex-theme/blob/main/README.md#特别注意> */
+    margin: 1.8cm 2cm 1.2cm 2cm !important; /* 页边距 */
+  }
+}
+
+/* 正文区基本属性 */
+@if $tool == "typora" {
+  #write {
+    @extend %base;
+  }
+} @else if $tool == "pandoc" {
+  body {
+    @extend %base;
   }
 }
 
-#write p {
-  text-align: left;
+%base {
+  font-family: var(--base-Latin-font), var(--base-Chinese-font), serif;
+  font-size: var(--base-font-size);
+  /* A4标准宽度 */
+  max-width: 21cm;
+  @if $theme == "light" {
+    background-color: white;
+  } @else if $theme == "dark" {
+    /* 黑色模式修改 */
+    background-color: #1e1e1e;
+  }
+  /* column-count: 2;
+    column-gap: 25px;
+    column-width: 8cm; 
+    display: inline-block; */
+  /* 这里可以试分栏的，但确实不适合实现 */
+
+  p {
+    text-align: left;
+  }
+
+  // 标题属性
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @if $os == "windows" {
+      font-weight: bold; // 对 Windows 的修改
+    } @else if $os == "macos" {
+      font-weight: normal;
+    }
+    /* 标题字体 */
+    font-family: var(--heading-Latin-font), var(--heading-Chinese-font),
+      sans-serif;
+    page-break-after: avoid !important;
+  }
+
+  h1 {
+    font-family: var(--heading-Latin-font), var(--title-Chinese-font),
+      sans-serif;
+    @if $os == "macos" {
+      font-weight: normal;
+    }
+    text-align: center;
+    column-span: all;
+    font-size: var(--title-font-size);
+  }
+  h2 {
+    font-family: var(--heading-Latin-font), var(--h2-Chinese-font), sans-serif;
+    font-size: var(--h2-font-size);
+  }
+  h3 {
+    font-family: var(--heading-Latin-font), var(--h3-Chinese-font), sans-serif;
+    font-size: var(--h3-font-size);
+    line-height: var(--h3-font-size);
+  }
+  h4 {
+    font-family: var(--heading-Latin-font), var(--h4-Chinese-font), sans-serif;
+    font-size: var(--h4-font-size);
+    line-height: var(--h4-font-size);
+  }
+  h5 {
+    font-family: var(--heading-Latin-font), var(--h5-Chinese-font), sans-serif;
+    font-size: var(--h5-font-size);
+    line-height: var(--h5-font-size);
+  }
+  h6 {
+    font-family: var(--heading-Latin-font), var(--h6-Chinese-font), sans-serif;
+    font-size: var(--h6-font-size);
+    /* 没有写错，为了避免行距太小才这么写 */
+    line-height: var(--h5-font-size);
+  }
+
+  // 三线表
+  table {
+    /* 三线表第一条线宽度 */
+    border-top: 1.2pt solid;
+    /* 三线表第二条线宽度 */
+    border-bottom: 1.2pt solid;
+    font-family: var(--table-font), var(--base-Latin-font),
+      var(--base-Chinese-font), serif;
+    /* font-size: var(--base-font-size); */
+    text-align: center;
+    page-break-inside: avoid;
+    border-spacing: 6px;
+    /* 自动布局表格宽度，如果有时内容太紧建议直接加空格吧，我自己看不惯和页面等宽的大表格 */
+    width: auto;
+    /* 使表格默认居中；虽然这个代码不好，但好像没别的实现办法 */
+    margin: 0 auto;
+
+    td {
+      padding: 2px;
+    }
+
+    tr {
+      padding: 2px;
+    }
+  }
+
+  th {
+    padding: 0px 6px;
+  }
+
+  thead {
+    /* 表格标题（首行）样式 */
+    /* 三线表表头的线 */
+    border-bottom: 0.5pt solid;
+    font-family: var(--table-title-font), var(--heading-Latin-font),
+      var(--heading-Chinese-font), serif !important;
+    /* font-size: var(--base-font-size); */
+    font-weight: var(--strong-weight);
+  }
+
+  // 代码块样式
+  .CodeMirror-wrap {
+    padding: 10px; // FIXME 当代码太长跨页的时候好像也会有点问题
+  }
+
+  .CodeMirror-code pre {
+    font-family: var(--code-font), var(--ui-font), monospace;
+  }
+
+  // 下面是标题自动编号，初始化计数器。使用多级编号，编号后加空格模仿LaTeX
+  // 首先全局进行一次reset，这样即使不添加h1标题也可以使用较低级别的标题
+  counter-reset: h2 0 h3 0 h4 0 h5 0 h6 0;
+  h1 {
+    counter-reset: h2;
+  }
+  h2 {
+    counter-reset: h3;
+  }
+  h3 {
+    counter-reset: h4;
+  }
+  h4 {
+    counter-reset: h5;
+  }
+  h5 {
+    counter-reset: h6;
+  }
+
+  h2:before {
+    @extend %h2-with-count;
+  }
+
+  h3:before {
+    @extend %h3-with-count;
+  }
+
+  h4:before {
+    @extend %h4-with-count;
+  }
+
+  h5:before {
+    @extend %h5-with-count;
+  }
+
+  h6:before {
+    @extend %h6-with-count;
+  }
 }
 
 /*
@@ -197,111 +403,24 @@ strong {
 }
 */
 
-/* basic样式采用一般的引言，具有左边框、左缩进 */
+/* basic 样式采用一般的引言，具有左边框、左缩进 */
 blockquote {
   font-style: normal;
   font-family: var(--quote-font), var(--base-Latin-font),
     var(--base-Chinese-font), -apple-system, serif;
   font-size: var(--quote-font-size);
   border-left: 3px solid grey;
-  padding-left: 16px; /* 文字离左边框的距离 */
+  /* 文字离左边框的距离 */
+  padding-left: 16px;
   padding-right: 20pt;
-  margin-left: 20px; /* 左边框离页面边的距离 */
+  /* 左边框离页面边的距离 */
+  margin-left: 20px;
   @if $theme == "light" {
     color: grey;
   } @else if $theme == "dark" {
-    color: #bfbfbf; /* 文字颜色 */
-  }
-}
-
-/*border-width: 0.5pt 0;
-  border-style:solid; 这一行本来使用了上下边框*/
-
-/* 标题属性 */
-#write h1,
-#write h2,
-#write h3,
-#write h4,
-#write h5,
-#write h6 {
-  @if $os == "windows" {
-    font-weight: bold; /* 对 Windows 的修改 */
-  } @else if $os == "macos" {
-    font-weight: normal;
-  }
-
-  font-family: var(--heading-Latin-font), var(--heading-Chinese-font),
-    sans-serif;
-  page-break-after: avoid !important;
-}
-
-#write h1 {
-  font-family: var(--heading-Latin-font), var(--title-Chinese-font), sans-serif;
-  @if $os == "macos" {
-    font-weight: normal;
+    /* 文字颜色 */
+    color: #bfbfbf;
   }
-  text-align: center;
-  column-span: all;
-  font-size: var(--title-font-size);
-}
-#write h2 {
-  font-family: var(--heading-Latin-font), var(--h2-Chinese-font), sans-serif;
-  font-size: var(--h2-font-size);
-}
-#write h3 {
-  font-family: var(--heading-Latin-font), var(--h3-Chinese-font), sans-serif;
-  font-size: var(--h3-font-size);
-  line-height: var(--h3-font-size);
-}
-#write h4 {
-  font-family: var(--heading-Latin-font), var(--h4-Chinese-font), sans-serif;
-  font-size: var(--h4-font-size);
-  line-height: var(--h4-font-size);
-}
-#write h5 {
-  font-family: var(--heading-Latin-font), var(--h5-Chinese-font), sans-serif;
-  font-size: var(--h5-font-size);
-  line-height: var(--h5-font-size);
-}
-#write h6 {
-  font-family: var(--heading-Latin-font), var(--h6-Chinese-font), sans-serif;
-  font-size: var(--h6-font-size);
-  line-height: var(--h5-font-size); /* 没有写错，为了避免行距太小才这么写 */
-}
-
-/* 三线表 */
-#write table {
-  border-top: 1.2pt solid; /* 三线表第一条线宽度 */
-  border-bottom: 1.2pt solid; /* 三线表第二条线宽度 */
-  font-family: var(--table-font), var(--base-Latin-font),
-    var(--base-Chinese-font), serif;
-  /* font-size: var(--base-font-size); */
-  text-align: center;
-  page-break-inside: avoid;
-  border-spacing: 6px;
-  width: auto; /* 自动布局表格宽度，如果有时内容太紧建议直接加空格吧，我自己看不惯和页面等宽的大表格 */
-  margin: 0 auto; /* 使表格默认居中；虽然这个代码不好，但好像没别的实现办法 */
-}
-
-#write table td {
-  padding: 2px;
-}
-
-#write table tr {
-  padding: 2px;
-}
-
-#write th {
-  padding: 0px 6px;
-}
-
-/* 表格标题（首行）样式 */
-#write thead {
-  border-bottom: 0.5pt solid; /* 三线表表头的线 */
-  font-family: var(--table-title-font), var(--heading-Latin-font),
-    var(--heading-Chinese-font), serif !important;
-  /* font-size: var(--base-font-size); */
-  font-weight: var(--strong-weight);
 }
 
 hr {
@@ -313,64 +432,74 @@ hr {
 }
 
 img {
-  page-break-inside: avoid; /* 避免图片在导出时被断开 */
+  /* 避免图片在导出时被断开 */
+  page-break-inside: avoid;
 }
 
 /* ============ 多级列表样式 ============ */
 ul {
-  list-style: disc; /* 无序列表第一级：实心圆点 */
-}
-
-ul ul {
-  /*list-style: circle;*/
-  list-style: "–　 "; /* 直接用空格代替一部分缩进的调整了我真懒 */
-  /*left: -0.8em;*/
-}
-
-ul ul ul {
-  list-style: "◦　  "; /* 无序列表第三极：小圈 */
-  left: 0.6em;
+  /* 无序列表第一级：实心圆点 */
+  list-style: disc;
+  ul {
+    /*list-style: circle;*/
+    /* 直接用空格代替一部分缩进的调整了我真懒 */
+    list-style: "–　 ";
+    /*left: -0.8em;*/
+    ul {
+      /* 无序列表第三极：小圈 */
+      list-style: "◦　  ";
+      left: 0.6em;
+    }
+  }
 }
 
 ol {
-  list-style: decimal;
   /* 有序列表第一级：数字 */
-}
+  list-style: decimal;
 
-ol ol {
-  counter-reset: liist;
-  list-style: none;
-}
-ol ol li {
-  counter-increment: liist;
-  position: relative;
-}
-ol ol li::before {
-  content: "(" counter(liist, lower-alpha) ")　　"; /* 有序列表第二级：括号加小写字母 */
-  position: absolute;
-  margin-right: 2rem;
-  left: -2.4em;
-}
+  ol {
+    counter-reset: liist;
+    list-style: none;
 
-ol ol ol {
-  counter-reset: liiist;
-  list-style: none;
-  margin: 0;
-}
-ol ol ol li {
-  counter-increment: liiist;
-  position: relative;
-}
-ol ol ol li::before {
-  content: counter(liiist, lower-roman) ".　　　"; /* 有序列表第三级：小写罗马数字 这些后续还要改的可恶*/
-  align-self: flex-end;
-  position: absolute;
-  left: -2.4em;
-  /* -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;*/
-  width: 4em; /* 为了让项目编号是重新用句点对齐而不是左对齐我调试了一整个晚上啊啊啊啊 CSS好难写 */
-  text-align: right;
+    li {
+      counter-increment: liist;
+      position: relative;
+    }
+
+    li::before {
+      /* 有序列表第二级：括号加小写字母 */
+      content: "(" counter(liist, lower-alpha) ")　　";
+      position: absolute;
+      margin-right: 2rem;
+      left: -2.4em;
+    }
+
+    ol {
+      counter-reset: liiist;
+      list-style: none;
+      margin: 0;
+
+      li {
+        counter-increment: liiist;
+        position: relative;
+      }
+
+      li::before {
+        /* 有序列表第三级：小写罗马数字 */
+        // FIXME 这里要改
+        content: counter(liiist, lower-roman) ".　　　";
+        align-self: flex-end;
+        position: absolute;
+        left: -2.4em;
+        /* -moz-box-sizing: border-box;
+          -webkit-box-sizing: border-box;
+          box-sizing: border-box;*/
+        /* 为了让项目编号是重新用句点对齐而不是左对齐 */
+        width: 4em;
+        text-align: right;
+      }
+    }
+  }
 }
 
 li {
@@ -384,27 +513,23 @@ li code {
   @if $theme == "light" {
     color: rgb(60, 112, 198);
     background-color: #fefefe;
-    box-shadow: 0 0 1px 1px #c8d3df; /* 阴影 */
+    /* 阴影 */
+    box-shadow: 0 0 1px 1px #c8d3df;
   } @else if $theme == "dark" {
-    color: #8bb1f9; /* 黑色模式修改 */
-    background-color: #161616; /* 黑色模式修改 */
-    box-shadow: 0 0 1px 1px #141414; /* 黑色模式修改 */
+    /* 黑色模式修改 */
+    color: #8bb1f9;
+    /* 黑色模式修改 */
+    background-color: #161616;
+    /* 黑色模式修改 */
+    box-shadow: 0 0 1px 1px #141414;
   }
   font-family: var(--code-font), var(--ui-font), monospace;
   box-sizing: border-box;
   border-right: 0px;
   margin: 0 2px 0 2px;
   padding: 0 2px 0 2px;
-  border-radius: 2px 2px 2px 2px; /* 圆角 */
-}
-
-/* 代码块样式*/
-#write .CodeMirror-wrap {
-  padding: 10px; /* 当代码太长跨页的时候好像也会有点问题，到时候再改 */
-}
-
-#write .CodeMirror-code pre {
-  font-family: var(--code-font), var(--ui-font), monospace;
+  /* 圆角 */
+  border-radius: 2px 2px 2px 2px;
 }
 
 /* typora 编写模式 */
@@ -418,65 +543,56 @@ li code {
   line-height: 2rem;
 }
 
-/* 下面是标题自动编号，初始化计数器。使用多级编号，编号后加空格模仿LaTeX */
-/* 首先全局进行一次reset，这样即使不添加h1标题也可以使用较低级别的标题 */
-#write {
-  counter-reset: h2 0 h3 0 h4 0 h5 0 h6 0;
-}
-
-#write h1 {
-  counter-reset: h2;
-}
-h2 {
-  counter-reset: h3;
-}
-h3 {
-  counter-reset: h4;
-}
-h4 {
-  counter-reset: h5;
-}
-h5 {
-  counter-reset: h6;
-}
-
-/* put counter result into headings */
-#write h2:before {
+%h2-with-count {
   counter-increment: h2;
   content: counter(h2);
   margin-right: 2rem;
 }
-/** override the default style for focused headings */
-#write h3:before,
-h3.md-focus.md-heading:before {
+
+%h3-with-count {
   counter-increment: h3;
   content: counter(h2) "." counter(h3);
   margin-right: 2rem;
 }
-#write h4:before,
-h4.md-focus.md-heading:before {
+
+%h4-with-count {
   counter-increment: h4;
   content: counter(h2) "." counter(h3) "." counter(h4);
   margin-right: 2rem;
 }
-#write h5:before,
-h5.md-focus.md-heading:before {
+
+%h5-with-count {
   counter-increment: h5;
   content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5);
   margin-right: 2rem;
 }
-#write h6:before,
-h6.md-focus.md-heading:before {
+
+%h6-with-count {
   counter-increment: h6;
   content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "."
     counter(h6);
   margin-right: 2rem;
 }
 
+// override the default style for focused headings
+h3.md-focus.md-heading:before {
+  @extend %h3-with-count;
+}
+h4.md-focus.md-heading:before {
+  @extend %h4-with-count;
+}
+h5.md-focus.md-heading:before {
+  @extend %h5-with-count;
+}
+h6.md-focus.md-heading:before {
+  @extend %h6-with-count;
+}
+
 /* 目录 */
 .md-toc-content {
   margin-left: 2em;
-  counter-reset: toc-h2 toc-h3 toc-h4; /* 修复缺失上级标题时无法递增 */
+  /* 修复缺失上级标题时无法递增 */
+  counter-reset: toc-h2 toc-h3 toc-h4;
   page-break-after: always;
 }
 .md-toc-inner {
@@ -510,100 +626,106 @@ h6.md-focus.md-heading:before {
 }
 
 /* 目录标题前 */
-.md-toc-content .md-toc-h1 {
-  display: var(--toc-show-title);
-  counter-reset: toc-h2;
-}
-.md-toc-content .md-toc-h2 {
-  counter-reset: toc-h3;
-}
-.md-toc-content .md-toc-h3 {
-  counter-reset: toc-h4;
-}
-.md-toc-content .md-toc-h4 {
-  counter-reset: toc-h5;
-}
-.md-toc-content .md-toc-h5 {
-  counter-reset: toc-h6;
-}
-.md-toc-content .md-toc-h2:before {
-  counter-increment: toc-h2;
-  content: counter(toc-h2);
-  margin-right: 1rem;
-  font-weight: var(--strong-weight);
-}
-.md-toc-content .md-toc-h3:before {
-  counter-increment: toc-h3;
-  content: counter(toc-h2) "." counter(toc-h3);
-  margin-left: 1.5rem;
-  margin-right: 0.5rem;
-}
-.md-toc-content .md-toc-h4:before {
-  counter-increment: toc-h4;
-  content: counter(toc-h2) "." counter(toc-h3) "." counter(toc-h4);
-  margin-left: 3.5rem;
-  margin-right: 0.5rem;
-}
-.md-toc-content .md-toc-h5:before {
-  counter-increment: toc-h5;
-  content: counter(toc-h2) "." counter(toc-h3) "." counter(toc-h4) "."
-    counter(toc-h5);
-  margin-left: 5.5rem;
-  margin-right: 0.5rem;
-}
-.md-toc-content .md-toc-h6:before {
-  counter-increment: toc-h6;
-  content: counter(toc-h2) "." counter(toc-h3) "." counter(toc-h4) "."
-    counter(toc-h5) "." counter(toc-h6);
-  margin-left: 7.5rem;
-  margin-right: 0.5rem;
+.md-toc-content {
+  .md-toc-h1 {
+    display: var(--toc-show-title);
+    counter-reset: toc-h2;
+  }
+  .md-toc-h2 {
+    counter-reset: toc-h3;
+  }
+  .md-toc-h3 {
+    counter-reset: toc-h4;
+  }
+  .md-toc-h4 {
+    counter-reset: toc-h5;
+  }
+  .md-toc-h5 {
+    counter-reset: toc-h6;
+  }
+  .md-toc-h2:before {
+    counter-increment: toc-h2;
+    content: counter(toc-h2);
+    margin-right: 1rem;
+    font-weight: var(--strong-weight);
+  }
+  .md-toc-h3:before {
+    counter-increment: toc-h3;
+    content: counter(toc-h2) "." counter(toc-h3);
+    margin-left: 1.5rem;
+    margin-right: 0.5rem;
+  }
+  .md-toc-h4:before {
+    counter-increment: toc-h4;
+    content: counter(toc-h2) "." counter(toc-h3) "." counter(toc-h4);
+    margin-left: 3.5rem;
+    margin-right: 0.5rem;
+  }
+  .md-toc-h5:before {
+    counter-increment: toc-h5;
+    content: counter(toc-h2) "." counter(toc-h3) "." counter(toc-h4) "."
+      counter(toc-h5);
+    margin-left: 5.5rem;
+    margin-right: 0.5rem;
+  }
+  .md-toc-h6:before {
+    counter-increment: toc-h6;
+    content: counter(toc-h2) "." counter(toc-h3) "." counter(toc-h4) "."
+      counter(toc-h5) "." counter(toc-h6);
+    margin-left: 7.5rem;
+    margin-right: 0.5rem;
+  }
 }
 
 /* 侧边大纲标题 */
-.sidebar-content .outline-h1 {
-  counter-reset: outline-h2;
-}
-.sidebar-content .outline-h2 {
-  counter-reset: outline-h3;
-}
-.sidebar-content .outline-h3 {
-  counter-reset: outline-h4;
-}
-.sidebar-content .outline-h4 {
-  counter-reset: outline-h5;
-}
-.sidebar-content .outline-h5 {
-  counter-reset: outline-h6;
-}
-.sidebar-content .outline-h2 .outline-label:before {
-  counter-increment: outline-h2;
-  content: counter(outline-h2) " ";
-}
-.sidebar-content .outline-h3 .outline-label:before {
-  counter-increment: outline-h3;
-  content: counter(outline-h2) "." counter(outline-h3) "  ";
-}
-.sidebar-content .outline-h4 .outline-label:before {
-  counter-increment: outline-h4;
-  content: counter(outline-h2) "." counter(outline-h3) "." counter(outline-h4)
-    "  ";
-}
-.sidebar-content .outline-h5 .outline-label:before {
-  counter-increment: outline-h5;
-  content: counter(outline-h2) "." counter(outline-h3) "." counter(outline-h4)
-    "." counter(outline-h5) "  ";
+.sidebar-content {
+  .outline-h1 {
+    counter-reset: outline-h2;
+  }
+  .outline-h2 {
+    counter-reset: outline-h3;
+    .outline-label:before {
+      counter-increment: outline-h2;
+      content: counter(outline-h2) " ";
+    }
+  }
+  .outline-h3 {
+    counter-reset: outline-h4;
+    .outline-label:before {
+      counter-increment: outline-h3;
+      content: counter(outline-h2) "." counter(outline-h3) "  ";
+    }
+  }
+  .outline-h4 {
+    counter-reset: outline-h5;
+    .outline-label:before {
+      counter-increment: outline-h4;
+      content: counter(outline-h2) "." counter(outline-h3) "."
+        counter(outline-h4) "  ";
+    }
+  }
+  .outline-h5 {
+    counter-reset: outline-h6;
+    .outline-label:before {
+      counter-increment: outline-h5;
+      content: counter(outline-h2) "." counter(outline-h3) "."
+        counter(outline-h4) "." counter(outline-h5) "  ";
+    }
+  }
 }
 
 .sidebar-content {
-  font-family: var(--ui-font); /* 侧边栏的字体修改 */
+  /* 侧边栏的字体修改 */
+  font-family: var(--ui-font);
   list-style: none;
   @if $theme == "dark" {
-    background-color: #282828; /* 黑色模式修改 */
+    /* 黑色模式修改 */
+    background-color: #282828;
     color: #e9e9e9;
   }
 }
 
-/* 元数据（如YAML front matter）的背景框 */
+/* 元数据（如 YAML front matter）的背景框 */
 pre.md-meta-block {
   @if $theme == "light" {
     background: #cccccc;
@@ -615,7 +737,7 @@ pre.md-meta-block {
   font-family: var(--code-font), var(--ui-font), monospace;
 }
 
-/** override the default style for focused headings */
+// override the default style for focused headings
 #write > h3.md-focus:before,
 #write > h4.md-focus:before,
 #write > h5.md-focus:before,
@@ -641,149 +763,131 @@ h6.md-focus:before {
 
 @if $theme == "dark" {
   /* Modifications for dark-mode */
-  /*下面是针对代码块的修改，各部分含义由名称可以知道 */
-  /*.cm-s-inner .cm-variable {
-    color: #fff;
-}
-.cm-s-inner .cm-operator {
-    color: #69fc9a;
-}
-.cm-s-inner .cm-keyword {
-    color: #fcad7e;
-}
-.cm-s-inner .cm-string {
-    color: #01e5f9;
-}
-.cm-s-inner .cm-def {
-    color: #93598f;
-}
-.cm-s-inner .cm-meta {
-    color: #ad9494;
-} 
-.cm-s-inner .cm-builtin {
-    color: #7f69b1;
-}
-.cm-s-inner .cm-number {
-    color: #8c5853;
-}*/
 
   /* ====================我加的================== */
-  /*.cm-s-inner {
-  background-color: #263238;
-  color: rgba(233, 237, 237);
-}*/
-  /*.cm-s-inner .CodeMirror-gutters {
-  background: #263238;
-  color: #537f7e;
-  border: none;
-}*/
-  /*.cm-s-inner .CodeMirror-guttermarker,
-.cm-s-inner .CodeMirror-guttermarker-subtle,
-.cm-s-inner .CodeMirror-linenumber {
-  color: #537f7e;
-}*/
-  .cm-s-inner .CodeMirror-cursor {
-    border-left: 1px solid #f8f8f0;
+  /*
+  .cm-s-inner {
+    background-color: #263238;
+    color: rgba(233, 237, 237);
   }
-  .cm-s-inner div.CodeMirror-selected {
-    background: rgba(255, 255, 255, 0.15);
+  .cm-s-inner .CodeMirror-gutters {
+    background: #263238;
+    color: #537f7e;
+    border: none;
   }
-  .cm-s-inner.CodeMirror-focused div.CodeMirror-selected {
-    background: rgba(255, 255, 255, 0.1);
-  }
-  .cm-s-inner .CodeMirror-line::selection,
-  .cm-s-inner .CodeMirror-line > span::selection,
-  .cm-s-inner .CodeMirror-line > span > span::selection {
-    background: rgba(255, 255, 255, 0.1);
+  .cm-s-inner .CodeMirror-guttermarker,
+  .cm-s-inner .CodeMirror-guttermarker-subtle,
+  .cm-s-inner .CodeMirror-linenumber {
+    color: #537f7e;
   }
-  .cm-s-inner .CodeMirror-line::-moz-selection,
-  .cm-s-inner .CodeMirror-line > span::-moz-selection,
-  .cm-s-inner .CodeMirror-line > span > span::-moz-selection {
+  */
+
+  .cm-s-inner.CodeMirror-focused div.CodeMirror-selected {
     background: rgba(255, 255, 255, 0.1);
   }
-  .cm-s-inner .CodeMirror-activeline-background {
-    background: rgba(0, 0, 0, 0);
-  }
-  .cm-s-inner .cm-keyword {
-    color: #c792ea;
-  }
-  .cm-s-inner .cm-operator {
-    color: #e9eded;
-  }
-  .cm-s-inner .cm-variable-2 {
-    color: #80cbc4;
-  }
-  .cm-s-inner .cm-variable-3 {
-    color: #82b1ff;
-  }
-  .cm-s-inner .cm-builtin {
-    color: #decb6b;
-  }
-  .cm-s-inner .cm-atom {
-    color: #f77669;
-  }
-  .cm-s-inner .cm-number {
-    color: #f77669;
-  }
-  .cm-s-inner .cm-def {
-    color: #e9eded;
-  }
-  .cm-s-inner .cm-string {
-    color: #c3e88d;
-  }
-  .cm-s-inner .cm-string-2 {
-    color: #80cbc4;
-  }
-  .cm-s-inner .cm-comment {
-    color: #546e7a;
-  }
-  .cm-s-inner .cm-variable {
-    color: #82b1ff;
-  }
-  .cm-s-inner .cm-tag {
-    color: #80cbc4;
-  }
-  .cm-s-inner .cm-meta {
-    color: #80cbc4;
-  }
-  .cm-s-inner .cm-attribute {
-    color: #ffcb6b;
-  }
-  .cm-s-inner .cm-property {
-    color: #80cbae;
-  }
-  .cm-s-inner .cm-qualifier {
-    color: #decb6b;
-  }
-  .cm-s-inner .cm-variable-3 {
-    color: #decb6b;
-  }
-  .cm-s-inner .cm-tag {
-    color: #ff5370;
-  }
-  .cm-s-inner .cm-error {
-    color: #ffffff;
-    background-color: #ec5f67;
-  }
-  .cm-s-inner .CodeMirror-matchingbracket {
-    text-decoration: underline;
-    color: white !important;
-  }
   .cm-s-inner .cm-link,
   .cm-s-inner.cm-link {
     color: #4770c0;
   }
-
-  .md-fences {
-    /*background-color: #0E1116;*/
-    /*color: #e9eded;*/
+  .cm-s-inner {
+    .CodeMirror-cursor {
+      border-left: 1px solid #f8f8f0;
+    }
+    div.CodeMirror-selected {
+      background: rgba(255, 255, 255, 0.15);
+    }
+    .CodeMirror-line::selection,
+    .CodeMirror-line > span::selection,
+    .CodeMirror-line > span > span::selection {
+      background: rgba(255, 255, 255, 0.1);
+    }
+    .CodeMirror-line::-moz-selection,
+    .CodeMirror-line > span::-moz-selection,
+    .CodeMirror-line > span > span::-moz-selection {
+      background: rgba(255, 255, 255, 0.1);
+    }
+    .CodeMirror-activeline-background {
+      background: rgba(0, 0, 0, 0);
+    }
+    .CodeMirror-matchingbracket {
+      text-decoration: underline;
+      color: white !important;
+    }
+    .cm-keyword {
+      color: #c792ea;
+    }
+    .cm-operator {
+      color: #e9eded;
+    }
+    .cm-variable-2 {
+      color: #80cbc4;
+    }
+    .cm-variable-3 {
+      color: #82b1ff;
+    }
+    .cm-builtin {
+      color: #decb6b;
+    }
+    .cm-atom {
+      color: #f77669;
+    }
+    .cm-number {
+      color: #f77669;
+    }
+    .cm-def {
+      color: #e9eded;
+    }
+    .cm-string {
+      color: #c3e88d;
+    }
+    .cm-string-2 {
+      color: #80cbc4;
+    }
+    .cm-comment {
+      color: #546e7a;
+    }
+    .cm-variable {
+      color: #82b1ff;
+    }
+    .cm-tag {
+      color: #80cbc4;
+    }
+    .cm-meta {
+      color: #80cbc4;
+    }
+    .cm-attribute {
+      color: #ffcb6b;
+    }
+    .cm-property {
+      color: #80cbae;
+    }
+    .cm-qualifier {
+      color: #decb6b;
+    }
+    .cm-variable-3 {
+      color: #decb6b;
+    }
+    .cm-tag {
+      color: #ff5370;
+    }
+    .cm-error {
+      color: #ffffff;
+      background-color: #ec5f67;
+    }
   }
+
   .md-fences .code-tooltip {
     background-color: #282828;
   }
+  /*
   #write pre.md-fences {
-    /*padding: 10rem;*/
+    padding: 10rem;
   }
+  .md-fences {
+    background-color: #0E1116;
+    color: #e9eded;
+  }
+  */
 
   /* 改变光标的颜色，在黑暗背景下能显示*/
   .CodeMirror div.CodeMirror-cursor {
@@ -832,7 +936,8 @@ h6.md-focus:before {
     background-color: #161616;
   }
 
-  /*#top-titlebar,
+  /*
+  #top-titlebar,
   #top-titlebar * {
     background-color: #1A1A1A;
     color: white;
@@ -847,7 +952,8 @@ h6.md-focus:before {
   }
   [draggable] {
     cursor: pointer;
-  }*/
+  }
+  */
 
   /* 调整html编辑时的行为，能看清楚里面的文字 */
   .md-rawblock-control:not(.md-rawblock-tooltip) {
@@ -882,27 +988,28 @@ h6.md-focus:before {
     border: 0px;
     background-color: #282828;
   }
-  
+
   #typora-quick-open {
     background-color: #282828;
-  }
-  
-  #typora-quick-open input{
-    background-color: #282828;
-    border: 0;
-    border-bottom: 1px solid grey;
+    input {
+      background-color: #282828;
+      border: 0;
+      border-bottom: 1px solid grey;
+    }
   }
 
   /* 插入图片后弹出的框 */
   .context-menu,
   #spell-check-panel,
   #footer-word-count-info {
-      background-color: #282828;
+    background-color: #282828;
   }
 
   /* 退出代码模式的按钮，以及最近打开文件页面中的按钮 */
-  .typora-sourceview-on #toggle-sourceview-btn, #recent-file-panel-action-btn {
-    background: #00000000; /* 设为透明，用于覆盖掉默认的浅色 */
+  .typora-sourceview-on #toggle-sourceview-btn,
+  #recent-file-panel-action-btn {
+    /* 设为透明，用于覆盖掉默认的浅色 */
+    background: #00000000;
   }
 
   /* 鼠标悬停到按钮上后的悬停文本框 */
@@ -912,7 +1019,8 @@ h6.md-focus:before {
   }
 
   /* 以下三段与 Unibody UI 模式的适配有关 */
-  .megamenu-content, .megamenu-opened header {
+  .megamenu-content,
+  .megamenu-opened header {
     background: var(--bg-color);
   }
 
@@ -926,7 +1034,6 @@ h6.md-focus:before {
 
   /* typora UI 编辑页面，在宽度较小时的底栏 */
   footer.ty-footer {
-    border-top: 1px solid #222
+    border-top: 1px solid #222;
   }
-
 }