From d927099b2873a56ccb58b66209641a1663fa3293 Mon Sep 17 00:00:00 2001
From: "xiaoqi.cxq" <xiaoqi.cxq@gmail.com>
Date: Sun, 4 Dec 2022 21:40:54 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E6=8C=81=E9=A2=84=E8=A7=88=E5=8C=BA?=
 =?UTF-8?q?=E4=B8=BB=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 chrome-app/manifest.json                    |   2 +-
 package-lock.json                           |  34 +-
 package.json                                |   2 +-
 server/index.js                             |  14 +-
 src/components/App.vue                      |   3 +
 src/components/EditorInPageButtons.vue      |  45 ++-
 src/components/Layout.vue                   |   7 +-
 src/components/Preview.vue                  |   8 +-
 src/components/PreviewInPageButtons.vue     | 159 ++++++++
 src/components/SideBar.vue                  |   4 +
 src/components/common/DropdownMenu.vue      |  17 +-
 src/components/menus/MainMenu.vue           |   5 +
 src/components/menus/PreviewThemeMenu.vue   | 116 ++++++
 src/icons/Copy.vue                          |   3 +
 src/icons/Ellipsis.vue                      |   3 +
 src/icons/index.js                          |   4 +
 src/services/editorSvc.js                   |   3 +-
 src/services/exportSvc.js                   |   6 +-
 src/store/theme.js                          |  63 +++
 static/themes/preview-theme-activeblue.js   | 216 ++++++++++
 static/themes/preview-theme-allblue.js      | 426 ++++++++++++++++++++
 static/themes/preview-theme-caoyuangreen.js | 382 ++++++++++++++++++
 static/themes/preview-theme-jikebrack.js    | 272 +++++++++++++
 static/themes/preview-theme-ningyezi.js     | 269 ++++++++++++
 static/themes/preview-theme-simplebrack.js  | 339 ++++++++++++++++
 static/themes/preview-theme-yanqihu.js      | 305 ++++++++++++++
 26 files changed, 2660 insertions(+), 47 deletions(-)
 create mode 100644 src/components/PreviewInPageButtons.vue
 create mode 100644 src/components/menus/PreviewThemeMenu.vue
 create mode 100644 src/icons/Copy.vue
 create mode 100644 src/icons/Ellipsis.vue
 create mode 100644 static/themes/preview-theme-activeblue.js
 create mode 100644 static/themes/preview-theme-allblue.js
 create mode 100644 static/themes/preview-theme-caoyuangreen.js
 create mode 100644 static/themes/preview-theme-jikebrack.js
 create mode 100644 static/themes/preview-theme-ningyezi.js
 create mode 100644 static/themes/preview-theme-simplebrack.js
 create mode 100644 static/themes/preview-theme-yanqihu.js

diff --git a/chrome-app/manifest.json b/chrome-app/manifest.json
index 214a316c..afce6eed 100644
--- a/chrome-app/manifest.json
+++ b/chrome-app/manifest.json
@@ -1,7 +1,7 @@
 {
   "name": "StackEdit中文版",
   "description": "支持Gitee仓库/粘贴图片自动上传的浏览器内 Markdown 编辑器",
-  "version": "5.15.16",
+  "version": "5.15.17",
   "manifest_version": 2,
   "container" : "GITEE",
   "api_console_project_id" : "241271498917",
diff --git a/package-lock.json b/package-lock.json
index a4f86cce..8aa07282 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "stackedit",
-  "version": "5.15.16",
+  "version": "5.15.17",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -3988,7 +3988,7 @@
     },
     "d3-collection": {
       "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/d3-collection/-/d3-collection-1.0.7.tgz",
+      "resolved": "https://registry.npmmirror.com/d3-collection/-/d3-collection-1.0.7.tgz",
       "integrity": "sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A=="
     },
     "d3-color": {
@@ -4166,7 +4166,7 @@
     },
     "d3-voronoi": {
       "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.4.tgz",
+      "resolved": "https://registry.npmmirror.com/d3-voronoi/-/d3-voronoi-1.1.4.tgz",
       "integrity": "sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg=="
     },
     "d3-zoom": {
@@ -4183,7 +4183,7 @@
     },
     "dagre": {
       "version": "0.8.5",
-      "resolved": "https://registry.npmjs.org/dagre/-/dagre-0.8.5.tgz",
+      "resolved": "https://registry.npmmirror.com/dagre/-/dagre-0.8.5.tgz",
       "integrity": "sha512-/aTqmnRta7x7MCCpExk7HQL2O4owCT2h8NT//9I1OQ9vt29Pa0BzSAkR5lwFUcQ7491yVi/3CXU9jQ5o0Mn2Sw==",
       "requires": {
         "graphlib": "^2.1.8",
@@ -4192,14 +4192,14 @@
       "dependencies": {
         "lodash": {
           "version": "4.17.21",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+          "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
           "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
         }
       }
     },
     "dagre-d3": {
       "version": "0.6.4",
-      "resolved": "https://registry.npmjs.org/dagre-d3/-/dagre-d3-0.6.4.tgz",
+      "resolved": "https://registry.npmmirror.com/dagre-d3/-/dagre-d3-0.6.4.tgz",
       "integrity": "sha512-e/6jXeCP7/ptlAM48clmX4xTZc5Ek6T6kagS7Oz2HrYSdqcLZFLqpAfh7ldbZRFfxCZVyh61NEPR08UQRVxJzQ==",
       "requires": {
         "d3": "^5.14",
@@ -4210,7 +4210,7 @@
       "dependencies": {
         "lodash": {
           "version": "4.17.21",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+          "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
           "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
         }
       }
@@ -4746,7 +4746,7 @@
     },
     "entity-decode": {
       "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/entity-decode/-/entity-decode-2.0.2.tgz",
+      "resolved": "https://registry.npmmirror.com/entity-decode/-/entity-decode-2.0.2.tgz",
       "integrity": "sha512-5CCY/3ci4MC1m2jlumNjWd7VBFt4VfFnmSqSNmVcXq4gxM3Vmarxtt+SvmBnzwLS669MWdVuXboNVj1qN2esVg==",
       "requires": {
         "he": "^1.1.1"
@@ -8644,7 +8644,7 @@
     },
     "graphlib": {
       "version": "2.1.8",
-      "resolved": "https://registry.npmjs.org/graphlib/-/graphlib-2.1.8.tgz",
+      "resolved": "https://registry.npmmirror.com/graphlib/-/graphlib-2.1.8.tgz",
       "integrity": "sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==",
       "requires": {
         "lodash": "^4.17.15"
@@ -8652,7 +8652,7 @@
       "dependencies": {
         "lodash": {
           "version": "4.17.21",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+          "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
           "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
         }
       }
@@ -12501,7 +12501,7 @@
     },
     "minify": {
       "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/minify/-/minify-4.1.3.tgz",
+      "resolved": "https://registry.npmmirror.com/minify/-/minify-4.1.3.tgz",
       "integrity": "sha512-ykuscavxivSmVpcCzsXmsVTukWYLUUtPhHj0w2ILvHDGqC+hsuTCihBn9+PJBd58JNvWTNg9132J9nrrI2anzA==",
       "requires": {
         "clean-css": "^4.1.6",
@@ -12515,7 +12515,7 @@
       "dependencies": {
         "commander": {
           "version": "2.20.3",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "resolved": "https://registry.npmmirror.com/commander/-/commander-2.20.3.tgz",
           "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
         },
         "debug": {
@@ -12528,12 +12528,12 @@
         },
         "he": {
           "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+          "resolved": "https://registry.npmmirror.com/he/-/he-1.2.0.tgz",
           "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
         },
         "html-minifier": {
           "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/html-minifier/-/html-minifier-4.0.0.tgz",
+          "resolved": "https://registry.npmmirror.com/html-minifier/-/html-minifier-4.0.0.tgz",
           "integrity": "sha512-aoGxanpFPLg7MkIl/DDFYtb0iWz7jMFGqFhvEDZga6/4QTjneiD8I/NXL1x5aaoCp7FSIT6h/OhykDdPsbtMig==",
           "requires": {
             "camel-case": "^3.0.0",
@@ -12547,7 +12547,7 @@
         },
         "ms": {
           "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz",
           "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
         },
         "uglify-js": {
@@ -20413,12 +20413,12 @@
     },
     "try-catch": {
       "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/try-catch/-/try-catch-2.0.1.tgz",
+      "resolved": "https://registry.npmmirror.com/try-catch/-/try-catch-2.0.1.tgz",
       "integrity": "sha512-LsOrmObN/2WdM+y2xG+t16vhYrQsnV8wftXIcIOWZhQcBJvKGYuamJGwnU98A7Jxs2oZNkJztXlphEOoA0DWqg=="
     },
     "try-to-catch": {
       "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/try-to-catch/-/try-to-catch-1.1.1.tgz",
+      "resolved": "https://registry.npmmirror.com/try-to-catch/-/try-to-catch-1.1.1.tgz",
       "integrity": "sha512-ikUlS+/BcImLhNYyIgZcEmq4byc31QpC+46/6Jm5ECWkVFhf8SM2Fp/0pMVXPX6vk45SMCwrP4Taxucne8I0VA=="
     },
     "tryer": {
diff --git a/package.json b/package.json
index ffac49ba..8eed8149 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "stackedit",
-  "version": "5.15.16",
+  "version": "5.15.17",
   "description": "免费, 开源, 功能齐全的 Markdown 编辑器",
   "author": "Benoit Schweblin, 豆萁",
   "license": "Apache-2.0",
diff --git a/server/index.js b/server/index.js
index 33f0cc3f..f04790a2 100644
--- a/server/index.js
+++ b/server/index.js
@@ -61,21 +61,19 @@ module.exports = (app) => {
     res.redirect(`./app#providerId=googleDrive&state=${encodeURIComponent(req.query.state)}`));
   // Serve the static folder with 30 day max-age
   app.use('/themes', serveStatic(resolvePath('static/themes'), {
-    maxAge: '30d',
+    maxAge: '1d',
+  }));
+
+  // Serve style.css with 1 day max-age
+  app.get('/style.css', (req, res) => res.sendFile(resolvePath('dist/style.css'), {
+    maxAge: '1d',
   }));
-  // Serve empty.js
-  app.get('/empty.js', (req, res) => res.send(''));
 
   // Serve static resources
   if (process.env.NODE_ENV === 'production') {
     // Serve index.html in /app
     app.get('/app', (req, res) => res.sendFile(resolvePath('dist/index.html')));
 
-    // Serve style.css with 1 day max-age
-    app.get('/style.css', (req, res) => res.sendFile(resolvePath('dist/style.css'), {
-      maxAge: '1d',
-    }));
-
     // Serve the static folder with 1 year max-age
     app.use('/static', serveStatic(resolvePath('dist/static'), {
       maxAge: '1y',
diff --git a/src/components/App.vue b/src/components/App.vue
index 85799112..3b7795fe 100644
--- a/src/components/App.vue
+++ b/src/components/App.vue
@@ -91,6 +91,9 @@ export default {
       // store 编辑主题
       const editTheme = localStorage.getItem('theme/currEditTheme');
       store.dispatch('theme/setEditTheme', editTheme || 'default');
+      // store 预览主题
+      const previewTheme = localStorage.getItem('theme/currPreviewTheme');
+      store.dispatch('theme/setPreviewTheme', previewTheme || 'default');
       this.ready = true;
       tempFileSvc.setReady();
     } catch (err) {
diff --git a/src/components/EditorInPageButtons.vue b/src/components/EditorInPageButtons.vue
index 0363ef2b..546d6c7b 100644
--- a/src/components/EditorInPageButtons.vue
+++ b/src/components/EditorInPageButtons.vue
@@ -12,8 +12,8 @@
           <icon-select-theme></icon-select-theme>
         </dropdown-menu>
       </li>
-      <li title="Markdown语法帮助">
-        <a @click="showHelp"><icon-help-circle></icon-help-circle></a>
+      <li class="after">
+        <icon-ellipsis></icon-ellipsis>
       </li>
     </ul>
   </div>
@@ -123,10 +123,6 @@ export default {
         store.dispatch('data/setSideBarPanel', 'editTheme');
       }
     },
-    showHelp() {
-      this.toggleSideBar(true);
-      store.dispatch('data/setSideBarPanel', 'help');
-    },
   },
 };
 </script>
@@ -137,20 +133,44 @@ export default {
 .editor-in-page-buttons {
   position: absolute;
   top: 0;
-  right: 10px;
+  left: -108px;
   height: 34px;
   padding: 5px;
-  background-color: rgba(187, 187, 187, 0.05);
+  background-color: rgba(84, 96, 114, 0.4);
   border-radius: $border-radius-base;
+  transition: 0.5s;
+  display: flex;
+
+  .dropdown-menu {
+    display: none;
+
+    .dropdown-menu-items {
+      right: unset;
+      left: 0;
+    }
+  }
+
+  &:active,
+  &:focus,
+  &:hover {
+    left: 0;
+    transition: 0.5s;
+    background-color: #546072;
+
+    .dropdown-menu {
+      display: block;
+    }
+  }
 
   ul {
     padding: 0;
     margin-left: 10px;
+    line-height: 20px;
 
     li {
-      line-height: 16px;
       width: 16px;
       display: inline-block;
+      vertical-align: middle;
       list-style: none;
       cursor: pointer;
       font-size: 14px;
@@ -160,7 +180,7 @@ export default {
 
   .icon {
     color: #dea731;
-    opacity: 0.3;
+    opacity: 0.7;
 
     &:active,
     &:focus,
@@ -168,5 +188,10 @@ export default {
       opacity: 1;
     }
   }
+
+  .after {
+    margin-left: 0;
+    margin-right: -6px;
+  }
 }
 </style>
diff --git a/src/components/Layout.vue b/src/components/Layout.vue
index 6fc826db..5db9eb3b 100644
--- a/src/components/Layout.vue
+++ b/src/components/Layout.vue
@@ -9,7 +9,7 @@
           <navigation-bar></navigation-bar>
         </div>
         <div class="layout__panel flex flex--row" :style="{height: styles.innerHeight + 'px'}">
-          <div class="layout__panel layout__panel--editor" :class="currTheme" v-show="styles.showEditor" :style="{width: (styles.editorWidth + styles.editorGutterWidth) + 'px', fontSize: styles.fontSize + 'px'}">
+          <div class="layout__panel layout__panel--editor" :class="editTheme" v-show="styles.showEditor" :style="{width: (styles.editorWidth + styles.editorGutterWidth) + 'px', fontSize: styles.fontSize + 'px'}">
             <div class="gutter" :style="{left: styles.editorGutterLeft + 'px'}">
               <div class="gutter__background" v-if="styles.editorGutterWidth" :style="{width: styles.editorGutterWidth + 'px'}"></div>
             </div>
@@ -28,6 +28,7 @@
               <div class="gutter__background" v-if="styles.previewGutterWidth" :style="{width: styles.previewGutterWidth + 'px'}"></div>
             </div>
             <preview></preview>
+            <preview-in-page-buttons></preview-in-page-buttons>
             <div class="gutter" :style="{left: styles.previewGutterLeft + 'px'}">
               <sticky-comment v-if="styles.previewGutterWidth && stickyComment === 'top'"></sticky-comment>
               <current-discussion v-if="styles.previewGutterWidth"></current-discussion>
@@ -60,6 +61,7 @@ import Editor from './Editor';
 import Preview from './Preview';
 import Tour from './Tour';
 import EditorInPageButtons from './EditorInPageButtons';
+import PreviewInPageButtons from './PreviewInPageButtons';
 import StickyComment from './gutters/StickyComment';
 import CurrentDiscussion from './gutters/CurrentDiscussion';
 import FindReplace from './FindReplace';
@@ -78,6 +80,7 @@ export default {
     Preview,
     Tour,
     EditorInPageButtons,
+    PreviewInPageButtons,
     StickyComment,
     CurrentDiscussion,
     FindReplace,
@@ -102,7 +105,7 @@ export default {
     ...mapGetters('theme', [
       'currEditTheme',
     ]),
-    currTheme() {
+    editTheme() {
       return `edit-theme--${this.currEditTheme || 'default'}`;
     },
     showFindReplace() {
diff --git a/src/components/Preview.vue b/src/components/Preview.vue
index a30070a8..c93f357f 100644
--- a/src/components/Preview.vue
+++ b/src/components/Preview.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="preview">
     <div class="preview__inner-1" @click="onClick" @scroll="onScroll">
-      <div class="preview__inner-2" :style="{padding: styles.previewPadding}">
+      <div class="preview__inner-2" :class="previewTheme" :style="{padding: styles.previewPadding}">
       </div>
       <div class="gutter" :style="{left: styles.previewGutterLeft + 'px'}">
         <comment-list v-if="styles.previewGutterWidth"></comment-list>
@@ -37,9 +37,15 @@ export default {
     ...mapGetters('file', [
       'isCurrentTemp',
     ]),
+    ...mapGetters('theme', [
+      'currPreviewTheme',
+    ]),
     ...mapGetters('layout', [
       'styles',
     ]),
+    previewTheme() {
+      return `preview-theme--${this.currPreviewTheme || 'default'}`;
+    },
   },
   methods: {
     ...mapActions('data', [
diff --git a/src/components/PreviewInPageButtons.vue b/src/components/PreviewInPageButtons.vue
new file mode 100644
index 00000000..c7d15f20
--- /dev/null
+++ b/src/components/PreviewInPageButtons.vue
@@ -0,0 +1,159 @@
+<template>
+  <div class="preview-in-page-buttons">
+    <ul>
+      <li class="before">
+        <icon-ellipsis></icon-ellipsis>
+      </li>
+      <li title="切换预览主题">
+        <dropdown-menu :selected="selectedTheme" :options="allThemes" :closeOnItemClick="false" @change="changeTheme">
+          <icon-select-theme></icon-select-theme>
+        </dropdown-menu>
+      </li>
+      <li title="Markdown语法帮助">
+        <a href="javascript:void(0)" @click="showHelp"><icon-help-circle></icon-help-circle></a>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+// import juice from 'juice';
+import store from '../store';
+import DropdownMenu from './common/DropdownMenu';
+
+export default {
+  components: {
+    DropdownMenu,
+  },
+  data: () => ({
+    allThemes: [{
+      name: '默认主题',
+      value: 'default',
+    }, {
+      name: '凝夜紫',
+      value: 'ningyezi',
+    }, {
+      name: '草原绿',
+      value: 'caoyuangreen',
+    }, {
+      name: '雁栖湖',
+      value: 'yanqihu',
+    }, {
+      name: '灵动蓝',
+      value: 'activeblue',
+    }, {
+      name: '极客黑',
+      value: 'jikebrack',
+    }, {
+      name: '极简黑',
+      value: 'simplebrack',
+    }, {
+      name: '全栈蓝',
+      value: 'allblue',
+    }, {
+      name: '自定义',
+      value: 'custom',
+    }],
+    baseCss: '',
+  }),
+  computed: {
+    ...mapGetters('theme', [
+      'currPreviewTheme',
+      'customPreviewThemeStyle',
+    ]),
+    selectedTheme() {
+      return {
+        value: this.currPreviewTheme || 'default',
+      };
+    },
+  },
+  methods: {
+    ...mapActions('data', [
+      'toggleSideBar',
+    ]),
+    async changeTheme(item) {
+      await store.dispatch('theme/setPreviewTheme', item.value);
+      // 如果自定义主题没内容 则弹出编辑区域
+      if (item.value === 'custom' && !this.customPreviewThemeStyle) {
+        this.toggleSideBar(true);
+        store.dispatch('data/setSideBarPanel', 'previewTheme');
+      }
+    },
+    showHelp() {
+      this.toggleSideBar(true);
+      store.dispatch('data/setSideBarPanel', 'help');
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import '../styles/variables.scss';
+
+.preview-in-page-buttons {
+  position: absolute;
+  bottom: 10px;
+  right: -68px;
+  height: 34px;
+  padding: 5px;
+  background-color: rgba(84, 96, 114, 0.4);
+  border-radius: $border-radius-base;
+  transition: 0.5s;
+  display: flex;
+
+  .dropdown-menu {
+    display: none;
+  }
+
+  &:active,
+  &:focus,
+  &:hover {
+    right: 0;
+    transition: 0.5s;
+    background-color: #546072;
+
+    .dropdown-menu {
+      display: block;
+    }
+  }
+
+  .dropdown-menu-items {
+    bottom: 100%;
+    top: unset;
+  }
+
+  ul {
+    padding: 0;
+    margin-left: 10px;
+    line-height: 20px;
+
+    li {
+      line-height: 16px;
+      width: 16px;
+      display: inline-block;
+      vertical-align: middle;
+      list-style: none;
+      cursor: pointer;
+      font-size: 14px;
+      margin-right: 10px;
+
+      .icon {
+        color: #fff;
+        opacity: 0.7;
+
+        &:active,
+        &:focus,
+        &:hover {
+          opacity: 1;
+        }
+      }
+    }
+
+    .before {
+      margin-left: -16px;
+      margin-right: 0;
+    }
+  }
+}
+</style>
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index 4c391629..052e3376 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -24,6 +24,7 @@
         <pre class="markdown-highlighting" v-html="markdownSample"></pre>
       </div>
       <edit-theme-menu v-else-if="panel === 'editTheme'"></edit-theme-menu>
+      <preview-theme-menu v-else-if="panel === 'previewTheme'"></preview-theme-menu>
       <div class="side-bar__panel side-bar__panel--toc" :class="{'side-bar__panel--hidden': panel !== 'toc'}">
         <toc>
         </toc>
@@ -43,6 +44,7 @@ import HistoryMenu from './menus/HistoryMenu';
 import ImportExportMenu from './menus/ImportExportMenu';
 import WorkspaceBackupMenu from './menus/WorkspaceBackupMenu';
 import EditThemeMenu from './menus/EditThemeMenu';
+import PreviewThemeMenu from './menus/PreviewThemeMenu';
 import markdownSample from '../data/markdownSample.md';
 import markdownConversionSvc from '../services/markdownConversionSvc';
 import store from '../store';
@@ -58,6 +60,7 @@ const panelNames = {
   importExport: '导入/导出',
   workspaceBackups: '文档空间备份',
   editTheme: '编辑区主题',
+  previewTheme: '预览区主题',
 };
 
 export default {
@@ -71,6 +74,7 @@ export default {
     ImportExportMenu,
     WorkspaceBackupMenu,
     EditThemeMenu,
+    PreviewThemeMenu,
   },
   data: () => ({
     markdownSample: markdownConversionSvc.highlight(markdownSample),
diff --git a/src/components/common/DropdownMenu.vue b/src/components/common/DropdownMenu.vue
index 6d4ecbbc..09aeb70e 100644
--- a/src/components/common/DropdownMenu.vue
+++ b/src/components/common/DropdownMenu.vue
@@ -1,10 +1,9 @@
 <template>
     <span class="dropdown-menu">
-      <span @click="toggleMenu()" class="dropdown-toggle">
+      <span ref="slotInfo" @click="toggleMenu()" class="dropdown-toggle">
         <slot></slot>
       </span>
-  
-      <ul class="dropdown-menu-items" v-if="showMenu">
+      <ul class="dropdown-menu-items" :style="dropdownStyle" v-if="showMenu">
         <li v-for="(option, idx) in options" :key="idx">
           <a href="javascript:void(0)" :class="{selected: option.value === selectedOption.value}" @click="updateOption(option)">
             {{ option.name }}
@@ -15,6 +14,8 @@
   </template>
   
   <script>
+    import store from '../../store';
+
     export default {
       data: () => ({
         selectedOption: {
@@ -46,13 +47,19 @@
       beforeDestroy() {
         document.removeEventListener('click', this.clickHandler);
       },
+      computed: {
+        dropdownStyle() {
+          const height = store.state.layout.bodyHeight;
+          return `max-height: ${height * 0.7}px;`;
+        },
+      },
       methods: {
         updateOption(option) {
           this.selectedOption = option;
           if (this.closeOnItemClick) {
             this.showMenu = false;
           }
-          this.$emit('change', this.selectedOption);
+          this.$emit('change', option);
         },
         toggleMenu() {
           this.showMenu = !this.showMenu;
@@ -84,7 +91,7 @@
     max-height: 450px;
     overflow-y: scroll;
     padding: 5px 0;
-    margin: 2px 0 0;
+    margin: 0;
     list-style: none;
     font-size: 15px;
     background-color: #666;
diff --git a/src/components/menus/MainMenu.vue b/src/components/menus/MainMenu.vue
index d552072b..7b164155 100644
--- a/src/components/menus/MainMenu.vue
+++ b/src/components/menus/MainMenu.vue
@@ -110,6 +110,11 @@
       编辑区主题
       <span>编辑区主题样式(自定义主题可编辑)。</span>
     </menu-entry>
+    <menu-entry @click.native="setPanel('previewTheme')">
+      <icon-select-theme slot="icon"></icon-select-theme>
+      预览区主题
+      <span>预览区主题样式(自定义主题可编辑)。</span>
+    </menu-entry>
     <menu-entry @click.native="settings">
       <icon-settings slot="icon"></icon-settings>
       <div>配置</div>
diff --git a/src/components/menus/PreviewThemeMenu.vue b/src/components/menus/PreviewThemeMenu.vue
new file mode 100644
index 00000000..76670741
--- /dev/null
+++ b/src/components/menus/PreviewThemeMenu.vue
@@ -0,0 +1,116 @@
+<template>
+    <div class="preview-theme side-bar__panel side-bar__panel--menu">
+      <div class="side-bar__info">
+        <div class="menu-entry menu-entry--info flex flex--row flex--align-center">
+          <span v-if="currPreviewTheme==='custom'">
+            下面的自定义主题样式可编辑，可参考其他主题样式填入自己喜欢的预览样式。<br>
+            主题class为：preview-theme--custom
+          </span>
+          <span v-else>
+            下面的主题样式不可编辑。
+          </span>
+        </div>
+      </div>
+      <div class="side-bar__content">
+        <template v-if="currPreviewTheme === 'default'">
+          默认主题无额外样式，请选择其他主题。
+        </template>
+        <template v-else>
+          <code-editor v-for="(value, index) in styleEles" :key="index"
+            v-if="value.id === `preview-theme-${currPreviewTheme}`" lang="css" :value="value.innerHTML"
+            :disabled="value.id!=='preview-theme-custom'" @changed="changeText" scrollClass="side-bar__inner"></code-editor>
+        </template>
+      </div>
+      <div class="flex flex--row flex--end" v-if="currPreviewTheme==='custom'">
+        <button class="preview-theme__button button" @click="saveStyleText">保存</button>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import { mapGetters } from 'vuex';
+  import MenuEntry from './common/MenuEntry';
+  import CodeEditor from '../CodeEditor';
+  import store from '../../store';
+  
+  export default {
+    components: {
+      MenuEntry,
+      CodeEditor,
+    },
+    data: () => ({
+      themeStyleText: '',
+      styleEles: [],
+    }),
+    computed: {
+      ...mapGetters('theme', [
+        'currPreviewTheme',
+      ]),
+    },
+    methods: {
+      saveStyleText() {
+        const typeEle = this.findByTheme(this.currPreviewTheme);
+        if (!typeEle || !this.themeStyleText) {
+          return;
+        }
+        typeEle.innerHTML = this.themeStyleText;
+        store.dispatch('theme/setCustomPreviewThemeStyle', this.themeStyleText);
+        store.dispatch('notification/info', '保存自定义主题样式成功！');
+      },
+      findByTheme(theme) {
+        const findEles = this.styleEles.filter(it => it.id === `preview-theme-${theme}`);
+        return findEles.length ? findEles[0] : null;
+      },
+      changeText(text) {
+        this.themeStyleText = text;
+      },
+      close() {
+        store.dispatch('data/setSideBarPanel', 'menu');
+      },
+      initStyle(theme) {
+        if (theme === 'default') {
+          return;
+        }
+        const value = theme || this.currPreviewTheme;
+        if (this.findByTheme(value)) {
+          return;
+        }
+        const styleId = `preview-theme-${value}`;
+        const styleEle = document.getElementById(styleId);
+        if (!styleEle) {
+          setTimeout(() => this.initStyle(value), 1000);
+          return;
+        }
+        this.styleEles.push(styleEle);
+      },
+    },
+    watch: {
+      currPreviewTheme: {
+        immediate: true,
+        handler(val) {
+          this.initStyle(val);
+        },
+      },
+    },
+    created() {
+      this.initStyle();
+    },
+  };
+  </script>
+  
+  <style lang="scss">
+  .side-bar__panel--menu {
+    .side-bar__content {
+      .code-editor {
+        min-height: 400px !important;
+        max-height: 100%;
+      }
+    }
+
+    .preview-theme__button {
+      font-size: 14px;
+      margin-top: 0.5em;
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/icons/Copy.vue b/src/icons/Copy.vue
new file mode 100644
index 00000000..2a962b05
--- /dev/null
+++ b/src/icons/Copy.vue
@@ -0,0 +1,3 @@
+<template>
+  <svg t="1669462755056" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6069" width="32" height="32"><path d="M704 202.666667a96 96 0 0 1 96 96v554.666666a96 96 0 0 1-96 96H213.333333A96 96 0 0 1 117.333333 853.333333V298.666667A96 96 0 0 1 213.333333 202.666667h490.666667z m0 64H213.333333A32 32 0 0 0 181.333333 298.666667v554.666666a32 32 0 0 0 32 32h490.666667a32 32 0 0 0 32-32V298.666667a32 32 0 0 0-32-32z" fill="#212121" p-id="6070"></path><path d="M277.333333 362.666667m32 0l298.666667 0q32 0 32 32l0 0q0 32-32 32l-298.666667 0q-32 0-32-32l0 0q0-32 32-32Z" fill="#212121" p-id="6071"></path><path d="M277.333333 512m32 0l298.666667 0q32 0 32 32l0 0q0 32-32 32l-298.666667 0q-32 0-32-32l0 0q0-32 32-32Z" fill="#212121" p-id="6072"></path><path d="M277.333333 661.333333m32 0l170.666667 0q32 0 32 32l0 0q0 32-32 32l-170.666667 0q-32 0-32-32l0 0q0-32 32-32Z" fill="#212121" p-id="6073"></path><path d="M320 138.666667h512A32 32 0 0 1 864 170.666667v576a32 32 0 0 0 64 0V170.666667A96 96 0 0 0 832 74.666667H320a32 32 0 0 0 0 64z" fill="#212121" p-id="6074"></path></svg>
+</template>
\ No newline at end of file
diff --git a/src/icons/Ellipsis.vue b/src/icons/Ellipsis.vue
new file mode 100644
index 00000000..f0e7caf6
--- /dev/null
+++ b/src/icons/Ellipsis.vue
@@ -0,0 +1,3 @@
+<template>
+  <svg t="1669464773854" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8666" width="32" height="32"><path d="M621.714286 713.142857l0 109.714286q0 22.820571-16.018286 38.838857t-38.838857 16.018286l-109.714286 0q-22.820571 0-38.838857-16.018286t-16.018286-38.838857l0-109.714286q0-22.820571 16.018286-38.838857t38.838857-16.018286l109.714286 0q22.820571 0 38.838857 16.018286t16.018286 38.838857zM621.714286 420.571429l0 109.714286q0 22.820571-16.018286 38.838857t-38.838857 16.018286l-109.714286 0q-22.820571 0-38.838857-16.018286t-16.018286-38.838857l0-109.714286q0-22.820571 16.018286-38.838857t38.838857-16.018286l109.714286 0q22.820571 0 38.838857 16.018286t16.018286 38.838857zM621.714286 128l0 109.714286q0 22.820571-16.018286 38.838857t-38.838857 16.018286l-109.714286 0q-22.820571 0-38.838857-16.018286t-16.018286-38.838857l0-109.714286q0-22.820571 16.018286-38.838857t38.838857-16.018286l109.714286 0q22.820571 0 38.838857 16.018286t16.018286 38.838857z" p-id="8667"></path></svg>
+</template>
\ No newline at end of file
diff --git a/src/icons/index.js b/src/icons/index.js
index 467ebf50..0c8389aa 100644
--- a/src/icons/index.js
+++ b/src/icons/index.js
@@ -62,6 +62,8 @@ import SwitchTheme from './SwitchTheme';
 import Search from './Search';
 import FindReplace from './FindReplace';
 import SelectTheme from './SelectTheme';
+import Copy from './Copy';
+import Ellipsis from './Ellipsis';
 
 Vue.component('iconProvider', Provider);
 Vue.component('iconFormatBold', FormatBold);
@@ -126,3 +128,5 @@ Vue.component('iconSwitchTheme', SwitchTheme);
 Vue.component('iconSearch', Search);
 Vue.component('iconFindReplace', FindReplace);
 Vue.component('iconSelectTheme', SelectTheme);
+Vue.component('iconCopy', Copy);
+Vue.component('iconEllipsis', Ellipsis);
diff --git a/src/services/editorSvc.js b/src/services/editorSvc.js
index 88829cd0..6cec70f4 100644
--- a/src/services/editorSvc.js
+++ b/src/services/editorSvc.js
@@ -218,7 +218,7 @@ const editorSvc = Object.assign(new Vue(), editorSvcDiscussions, editorSvcUtils,
 
           Array.prototype.slice.call(sectionPreviewElt.getElementsByTagName('a')).forEach((aElt) => {
             const url = aElt.attributes.href.nodeValue;
-            if (url.indexOf('http://') >= 0 || url.indexOf('https://') >= 0) {
+            if (url.indexOf('http://') >= 0 || url.indexOf('https://') >= 0 || url.indexOf('#') >= 0) {
               return;
             }
             aElt.href = 'javascript:void(0);'; // eslint-disable-line no-script-url
@@ -233,6 +233,7 @@ const editorSvc = Object.assign(new Vue(), editorSvcDiscussions, editorSvcUtils,
             const clonedElt = headingElt.cloneNode(true);
             clonedElt.removeAttribute('id');
             sectionTocElt.appendChild(clonedElt);
+            headingElt.innerHTML = `<span class="prefix"></span><span class="content">${headingElt.innerHTML}</span><span class="suffix"></span>`;
           }
           if (insertBeforeTocElt) {
             this.tocElt.insertBefore(sectionTocElt, insertBeforeTocElt);
diff --git a/src/services/exportSvc.js b/src/services/exportSvc.js
index ac3efde5..373cc27b 100644
--- a/src/services/exportSvc.js
+++ b/src/services/exportSvc.js
@@ -107,7 +107,11 @@ export default {
     await Promise.all(loadedPromises);
 
     // Make TOC
-    const headings = containerElt.querySelectorAll('h1,h2,h3,h4,h5,h6').cl_map(headingElt => ({
+    const allHeaders = containerElt.querySelectorAll('h1,h2,h3,h4,h5,h6');
+    Array.prototype.slice.call(allHeaders).forEach((headingElt) => {
+      headingElt.innerHTML = `<span class="prefix"></span><span class="content">${headingElt.innerHTML}</span><span class="suffix"></span>`;
+    });
+    const headings = allHeaders.cl_map(headingElt => ({
       title: headingElt.textContent,
       anchor: headingElt.id,
       level: parseInt(headingElt.tagName.slice(1), 10),
diff --git a/src/store/theme.js b/src/store/theme.js
index 98b4a784..6509aaa7 100644
--- a/src/store/theme.js
+++ b/src/store/theme.js
@@ -1,5 +1,7 @@
 const localKey = 'theme/currEditTheme';
 const customEditThemeKey = 'theme/customEditThemeStyle';
+const previewLocalKey = 'theme/currPreviewTheme';
+const customPreviewThemeKey = 'theme/customPreviewThemeStyle';
 
 export default {
   namespaced: true,
@@ -7,6 +9,9 @@ export default {
     // 当前编辑主题
     currEditTheme: '',
     customEditThemeStyle: null,
+    // 当前预览主题
+    currPreviewTheme: '',
+    customPreviewThemeStyle: null,
   },
   mutations: {
     setEditTheme: (state, value) => {
@@ -15,10 +20,18 @@ export default {
     setCustomEditThemeStyle: (state, value) => {
       state.customEditThemeStyle = value;
     },
+    setPreviewTheme: (state, value) => {
+      state.currPreviewTheme = value;
+    },
+    setCustomPreviewThemeStyle: (state, value) => {
+      state.customPreviewThemeStyle = value;
+    },
   },
   getters: {
     currEditTheme: state => state.currEditTheme,
     customEditThemeStyle: state => state.customEditThemeStyle,
+    currPreviewTheme: state => state.currPreviewTheme,
+    customPreviewThemeStyle: state => state.customPreviewThemeStyle,
   },
   actions: {
     async setEditTheme({ commit }, theme) {
@@ -71,5 +84,55 @@ export default {
       commit('setCustomEditThemeStyle', value);
       localStorage.setItem(customEditThemeKey, value);
     },
+    async setPreviewTheme({ commit }, theme) {
+      // 如果不是default 则加载样式
+      if (!theme || theme === 'default') {
+        commit('setPreviewTheme', theme);
+        localStorage.setItem(previewLocalKey, theme);
+        return;
+      }
+      const themeStyle = document.getElementById(`preview-theme-${theme}`);
+      if (themeStyle) {
+        commit('setPreviewTheme', theme);
+        localStorage.setItem(previewLocalKey, theme);
+        return;
+      }
+      // 如果是自定义则直接追加
+      if (theme === 'custom') {
+        const styleEle = document.createElement('style');
+        styleEle.id = `preview-theme-${theme}`;
+        styleEle.type = 'text/css';
+        styleEle.innerHTML = localStorage.getItem(customPreviewThemeKey) || '';
+        commit('setCustomPreviewThemeStyle', styleEle.innerHTML);
+        document.head.appendChild(styleEle);
+        commit('setPreviewTheme', theme);
+        localStorage.setItem(previewLocalKey, theme);
+        return;
+      }
+      const script = document.createElement('script');
+      let timeout;
+      try {
+        await new Promise((resolve, reject) => {
+          script.onload = resolve;
+          script.onerror = reject;
+          script.src = `/themes/preview-theme-${theme}.js`;
+          try {
+            document.head.appendChild(script);
+            timeout = setTimeout(reject, 30);
+            commit('setPreviewTheme', theme);
+            localStorage.setItem(previewLocalKey, theme);
+          } catch (e) {
+            reject(e);
+          }
+        });
+      } finally {
+        clearTimeout(timeout);
+        document.head.removeChild(script);
+      }
+    },
+    setCustomPreviewThemeStyle({ commit }, value) {
+      commit('setCustomPreviewThemeStyle', value);
+      localStorage.setItem(customPreviewThemeKey, value);
+    },
   },
 };
diff --git a/static/themes/preview-theme-activeblue.js b/static/themes/preview-theme-activeblue.js
new file mode 100644
index 00000000..0a2f1bb7
--- /dev/null
+++ b/static/themes/preview-theme-activeblue.js
@@ -0,0 +1,216 @@
+function init_preview_theme_activeblue() {
+const style = document.createElement('style');
+style.id = 'preview-theme-activeblue';
+style.type = 'text/css';
+style.innerHTML = "/** activeblue 灵动蓝\n \
+*/\n \
+.preview-theme--activeblue {\n \
+ color: #333;\n \
+ background-color: #fff;\n \
+ font-family: -apple-system,system-ui,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif;\n \
+}\n \
+\n \
+/* 标题的通用设置 */\n \
+.preview-theme--activeblue h1,\n \
+.preview-theme--activeblue h2,\n \
+.preview-theme--activeblue h3,\n \
+.preview-theme--activeblue h4,\n \
+.preview-theme--activeblue h5,\n \
+.preview-theme--activeblue h6 {\n \
+ padding: 30px 0;\n \
+ margin: 0;\n \
+ color: #135ce0;\n \
+}\n \
+\n \
+/* 一级标题 */\n \
+.preview-theme--activeblue h1 {\n \
+ position: relative;\n \
+ margin-top: 30px;\n \
+ margin-bottom: 10px;\n \
+ text-align: center;\n \
+}\n \
+\n \
+/* 一级标题前缀，用来放背景图，支持透明度控制 */\n \
+.preview-theme--activeblue h1 .prefix {\n \
+ display: inline-block;\n \
+ top: 0;\n \
+ width: 60px;\n \
+ height: 60px;\n \
+ background: url(https://my-wechat.mdnice.com/ape_blue.svg);\n \
+ background-size: 100% 100%;\n \
+ opacity: .12;\n \
+}\n \
+\n \
+/* 一级标题内容 */\n \
+.preview-theme--activeblue h1 .content {\n \
+ font-size: 22px;\n \
+ display: block;\n \
+ margin-top: -36px;\n \
+}\n \
+\n \
+/* 二级标题 */\n \
+.preview-theme--activeblue h2 {\n \
+ position: relative;\n \
+   font-size: 20px;\n \
+}\n \
+\n \
+/* 二级标题前缀，有兴趣加内容的可以魔改 */\n \
+.preview-theme--activeblue h2 .prefix {\n \
+\n \
+}\n \
+\n \
+/* 二级标题内容 */\n \
+.preview-theme--activeblue h2 .content {\n \
+   border-left: 4px solid;\n \
+ padding-left: 10px;\n \
+}\n \
+\n \
+/* 一二级标题之间间距控制一下 */\n \
+.preview-theme--activeblue h1 + h2 {\n \
+ padding-top: 0;\n \
+}\n \
+\n \
+/* 三级标题 */\n \
+.preview-theme--activeblue h3 {\n \
+ font-size: 16px;\n \
+}\n \
+\n \
+/* 段落 */\n \
+.preview-theme--activeblue p {\n \
+ font-size: 16px;\n \
+ line-height: 2;\n \
+ font-weight: 400;\n \
+}\n \
+\n \
+/* 段落间距控制 */\n \
+.preview-theme--activeblue p+p {\n \
+ margin-top: 16px;\n \
+}\n \
+\n \
+/* 无序列表 */\n \
+.preview-theme--activeblue ul>li ul>li {\n \
+ list-style: circle;\n \
+}\n \
+\n \
+/* 无序列表内容行高 */\n \
+.preview-theme--activeblue li section {\n \
+ line-height: 2;\n \
+}\n \
+\n \
+/* 引用 */\n \
+.preview-theme--activeblue blockquote {\n \
+ border-left-color: #b2aec5 !important;\n \
+ background: #fff9f9 !important;\n \
+}\n \
+\n \
+/* 引用文字 */\n \
+.preview-theme--activeblue blockquote p {\n \
+ color: #666;\n \
+ line-height: 2;\n \
+}\n \
+\n \
+/* 链接 */\n \
+.preview-theme--activeblue a {\n \
+ color: #036aca;\n \
+ border-bottom: 0;\n \
+ font-weight: 400;\n \
+ text-decoration: none;\n \
+}\n \
+\n \
+/* 加粗 */\n \
+.preview-theme--activeblue strong {\n \
+ background: linear-gradient(to right ,#3299d2,#efbdb5);\n \
+ color: #fff;\n \
+ font-weight: 400;\n \
+ padding: 0 4px;\n \
+ display: inline-block;\n \
+ border-radius: 4px;\n \
+ margin: 0 2px;\n \
+ letter-spacing: 1px;\n \
+}\n \
+\n \
+/* 加粗斜体 */\n \
+.preview-theme--activeblue em strong {\n \
+ color: #fff;\n \
+}\n \
+\n \
+/* 分隔线 */\n \
+.preview-theme--activeblue hr {\n \
+ border-top: 1px solid #135ce0;\n \
+}\n \
+\n \
+/* 图片描述文字，隐藏了，如果需要，请删除display */\n \
+.preview-theme--activeblue figcaption {\n \
+ display: none;\n \
+ opacity: .6;\n \
+ margin-top: 12px;\n \
+ font-size: 12px;\n \
+}\n \
+\n \
+/* 行内代码 */\n \
+.preview-theme--activeblue p code,\n \
+.preview-theme--activeblue li code,\n \
+.preview-theme--activeblue table code {\n \
+ background-color: rgba(0,0,0,.05);\n \
+ color: #1394d8;\n \
+ padding: 2px 6px;\n \
+ word-break: normal;\n \
+}\n \
+\n \
+/* 表格 */\n \
+.preview-theme--activeblue table {\n \
+ border-spacing: 0;\n \
+}\n \
+\n \
+/*\n \
+* 表格内的单元格\n \
+*/\n \
+.preview-theme--activeblue table tr th {\n \
+ background-color: #d4f1ff;\n \
+}\n \
+\n \
+/* 脚注文字 */\n \
+.preview-theme--activeblue .footnote-word {\n \
+ color: #135ce0;\n \
+ font-weight: 400;\n \
+}\n \
+\n \
+/* 脚注上标 */\n \
+.preview-theme--activeblue .footnote-ref {\n \
+ color: #5ba1e2;\n \
+ font-weight: 400;\n \
+}\n \
+\n \
+/* 参考资料 */\n \
+.preview-theme--activeblue .footnotes-sep:before {\n \
+ text-align: center;\n \
+ color: #135ce0;\n \
+ content: \"参考\";\n \
+}\n \
+\n \
+/* 参考编号 */\n \
+.preview-theme--activeblue .footnote-num {\n \
+ color: #666;\n \
+}\n \
+\n \
+/* 参考文字 */\n \
+.preview-theme--activeblue .footnote-item p { \n \
+ color: #999;\n \
+ font-weight: 700;\n \
+ font-style: italic;\n \
+ font-size: 13px;\n \
+}\n \
+\n \
+/* 参考解释 */\n \
+.preview-theme--activeblue .footnote-item p em {\n \
+ color: #3375e2;\n \
+ font-style: normal;\n \
+ margin-left: 4px;\n \
+}\n \
+.preview-theme--activeblue pre>code {\n \
+background-color: #333;\n \
+color: rgba(255,255,255,0.75);\n \
+}";
+document.head.appendChild(style);
+}
+init_preview_theme_activeblue();
diff --git a/static/themes/preview-theme-allblue.js b/static/themes/preview-theme-allblue.js
new file mode 100644
index 00000000..2ddac13a
--- /dev/null
+++ b/static/themes/preview-theme-allblue.js
@@ -0,0 +1,426 @@
+function init_preview_theme_allblue() {
+const style = document.createElement('style');
+style.id = 'preview-theme-allblue';
+style.type = 'text/css';
+style.innerHTML = "/* 全栈蓝 */\n \
+\n \
+/* 全局属性\n \
+*/\n \
+.preview-theme--allblue {\n \
+line-height: 1.25;\n \
+color: #2b2b2b;\n \
+background-color: #fff;\n \
+font-family: Optima-Regular, Optima, PingFangTC-Light, PingFangSC-light, PingFangTC-light;\n \
+letter-spacing: 2px;\n \
+background-image: linear-gradient(90deg, rgba(50, 0, 0, 0.04) 3%, rgba(0, 0, 0, 0) 3%), linear-gradient(360deg, rgba(50, 0, 0, 0.04) 3%, rgba(0, 0, 0, 0) 3%);\n \
+background-size: 20px 20px;\n \
+background-position: center;\n \
+}\n \
+\n \
+/* 段落\n \
+*/\n \
+.preview-theme--allblue p {\n \
+color: #2b2b2b;\n \
+margin: 10px 0px;\n \
+letter-spacing: 2px;\n \
+font-size: 14px;\n \
+word-spacing: 2px;\n \
+}\n \
+\n \
+/* 一级标题 */\n \
+.preview-theme--allblue h1 {\n \
+font-size: 25px;\n \
+}\n \
+\n \
+/* 一级标题内容 */\n \
+.preview-theme--allblue h1 span {\n \
+display: inline-block;\n \
+font-weight: bold;\n \
+color: #40B8FA;\n \
+}\n \
+\n \
+/* 一级标题修饰 请参考有实例的主题 */\n \
+.preview-theme--allblue h1:after {\n \
+position: unset;\n \
+display: unset;\n \
+border-bottom: unset;\n \
+}\n \
+\n \
+/* 二级标题 */\n \
+.preview-theme--allblue h2 {\n \
+display:block;\n \
+border-bottom: 4px solid #40B8FA;\n \
+}\n \
+\n \
+/* 二级标题内容 */\n \
+.preview-theme--allblue h2 .content {\n \
+display: flex;\n \
+color: #40B8FA;\n \
+font-size: 20px;\n \
+margin-left: 25px;\n \
+}\n \
+\n \
+/* 二级标题前缀 */\n \
+.preview-theme--allblue h2 .prefix {\n \
+display: flex;\n \
+width: 20px;\n \
+height: 20px;\n \
+background-size: 20px 20px;\n \
+background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAB00lEQVRYCe1Xy23DMAz1BB2jA+TSU2EBmSMzeIUM4WuHyKXWoWeP02sdS4CLJ4YW5ciKDUdICySAAMn68PHxiVSK4vn7Swy8fQ4vpbYH1ZyPORrOho2oz6r5UaU230r3Q84GG/uv4fUKhNKmJQC2BpgsTXcVbJTanAIAQASvS91/BBMZBjAOWwELzltQ35yPsElawEJbc8zQlwBpbE7Yuwan05azJfZNAYzjy8JwTCC9Tkx7dwDwGppAYwbg/XQ8K6gEokUMJPZvnooD0F1FlMJrW+dtsIGr3lWjNxj4mObNA96OAOCyn0Nl63fd73I2YhdX3h48A0g8TvGk8HEiQyeugf8MAJlNJqhbpN2VAdbOVW5PoFgNwNUJlGdt2iB/F0VBySkUFATMekJ/imUxAHjHhYOuTgwAlW/OljBGhY3vOsAhRF7xiwDI3A8vY57coh97mCFihIrPIgDwhAxIT8JSzexI75juwLB7Z6xkgA9iIGxMagBeoRhJ+rEe7NHDxrToy7NoHnpC6RdzI+WX98B0Ex8sv5OXIp3KyUR/cQgSZ2yaigIg5YLSMM6bLM1sjoXTLcU9p9g94FEKBF48ectx8hUFRbvr94g/JjMhe37OzsAvpzCHV7lWaToAAAAASUVORK5CYII=);\n \
+margin-bottom: -22px;\n \
+}\n \
+\n \
+/* 二级标题后缀 */\n \
+.preview-theme--allblue h2 .suffix {\n \
+display: flex;\n \
+box-sizing: border-box;\n \
+width: 200px;\n \
+height: 10px;\n \
+border-top-left-radius: 20px;\n \
+background: RGBA(64, 184, 250, .5);\n \
+color: rgb(255, 255, 255);\n \
+font-size: 16px;\n \
+letter-spacing: 0.544px;\n \
+justify-content: flex-end;\n \
+box-sizing: border-box !important;\n \
+overflow-wrap: break-word !important;\n \
+float: right;\n \
+margin-top: -10px;\n \
+}\n \
+\n \
+.preview-theme--allblue h2:after {\n \
+position: unset;\n \
+display: unset;\n \
+border-bottom: unset;\n \
+}\n \
+\n \
+/* 三级标题 */\n \
+.preview-theme--allblue h3 {\n \
+font-size: 17px;\n \
+font-weight: bold;\n \
+text-align: center;\n \
+position:relative;\n \
+margin-top: 20px;\n \
+margin-bottom: 20px;\n \
+}\n \
+\n \
+/* 三级标题内容 */\n \
+.preview-theme--allblue h3 .content {\n \
+border-bottom: 2px solid RGBA(79, 177, 249, .65);\n \
+color: #2b2b2b;\n \
+padding-bottom:2px\n \
+}\n \
+\n \
+.preview-theme--allblue h3 .content:before{\n \
+content:'';\n \
+width:30px;\n \
+height:30px;\n \
+display:block;\n \
+background-position:center;\n \
+background-size:30px;\n \
+margin:auto;\n \
+opacity:1;\n \
+background-repeat:no-repeat;\n \
+margin-bottom:-8px;\n \
+}\n \
+\n \
+/* 三级标题修饰 请参考有实例的主题 */\n \
+.preview-theme--allblue h3:after {}\n \
+\n \
+.preview-theme--allblue h4 .content {\n \
+height:16px;\n \
+line-height:16px;\n \
+font-size: 16px;\n \
+}\n \
+\n \
+.preview-theme--allblue h4 .content:before{\n \
+content:'';\n \
+background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABXElEQVRYCe1WsRHCMAzMVHRcvAcz0KekZQ92iNMwCzPQ2SngxJ2MbMm2RCjDHRdb+X/L8kfJMOy/vQIbK3D08eB8fOF/o5yd7pZwwsWdX+92hY2M0YdrSmBZp41ydjrsGhOA47ArNBhuDhcU/1zncCnhzocHYuCehlNqiHONEDXg6OMThTRcxIpXrcC4xDPuvjSgVoMlYCG6Od5SAoIBLVqfRKwEjQHVmmogqRmcO1aAhNmwq90FMMlhoAaEJ0GAZKHqGtUbGZ1PMt4cbxzBIxkH2jc81mKQc1kkM6DQHxih1SN+SYI2IE0H7K7RBRRbQvPRBlRA0lStrQXmBmy/AbWapmzdsk5YAfBCIhcD8+LI7xFpA4J2jDx67WlQrDhuCdAGJBmwxRUXqwVrQqn8QgOqcWprmOMWA5rFNQRqQPgc03D+iqEGhA/Sv4prxL7nH1+SATUaO2avAK3AG91vsolsvFjsAAAAAElFTkSuQmCC);\n \
+display:inline-block;\n \
+width:16px;\n \
+height:16px;\n \
+background-size:100% ;\n \
+background-position:left bottom;\n \
+background-repeat:no-repeat;\n \
+width: 16px;\n \
+height: 15px;\n \
+line-height:15px;\n \
+margin-right:6px;\n \
+margin-bottom:-2px;\n \
+}\n \
+\n \
+/* 无序列表整体样式\n \
+* list-style-type: square|circle|disc;\n \
+*/\n \
+.preview-theme--allblue ul {\n \
+font-size: 15px; /*神奇逻辑，必须比li section的字体大才会在二级中生效*/\n \
+color: #595959;\n \
+list-style-type: circle;\n \
+}\n \
+\n \
+\n \
+/* 有序列表整体样式\n \
+* list-style-type: upper-roman|lower-greek|lower-alpha;\n \
+*/\n \
+.preview-theme--allblue ol {\n \
+font-size: 15px;\n \
+color: #595959;\n \
+}\n \
+\n \
+/* 列表内容，不要设置li\n \
+*/\n \
+.preview-theme--allblue li section {\n \
+font-size: 14px;\n \
+font-weight: normal;\n \
+color: #595959;\n \
+}\n \
+\n \
+/* 引用\n \
+* 左边缘颜色 border-left-color:black;\n \
+* 背景色 background:gray;\n \
+*/\n \
+.preview-theme--allblue blockquote::before {\n \
+content: \"❝\";\n \
+color: RGBA(64, 184, 250, .5);\n \
+font-size: 34px;\n \
+line-height: 1;\n \
+font-weight: 700;\n \
+}\n \
+\n \
+.preview-theme--allblue blockquote {\n \
+text-size-adjust: 100%;\n \
+line-height: 1.55em;\n \
+font-weight: 400;\n \
+border-radius: 6px;\n \
+color: #595959 !important;\n \
+font-style: normal;\n \
+text-align: left;\n \
+box-sizing: inherit;\n \
+border-left: none;\n \
+padding-bottom: 25px;\n \
+border: 1px solid RGBA(64, 184, 250, .4) !important;\n \
+background: RGBA(64, 184, 250, .1) !important;\n \
+}\n \
+\n \
+.preview-theme--allblue blockquote p {\n \
+color: #595959;\n \
+margin: 0px;\n \
+}\n \
+\n \
+.preview-theme--allblue blockquote::after {\n \
+content: \"❞\";\n \
+float: right;\n \
+line-height: 1;\n \
+color: RGBA(64, 184, 250, .5);\n \
+}\n \
+\n \
+/* 链接\n \
+* border-bottom: 1px solid #009688;\n \
+*/\n \
+.preview-theme--allblue a {\n \
+color: #40B8FA;\n \
+font-weight: normal;\n \
+border-bottom: 1px solid #3BAAFA;\n \
+}\n \
+\n \
+.preview-theme--allblue strong::before {\n \
+content: '「';\n \
+}\n \
+\n \
+/* 加粗 */\n \
+.preview-theme--allblue strong {\n \
+color: #3594F7;\n \
+font-weight: bold;\n \
+}\n \
+\n \
+.preview-theme--allblue strong::after {\n \
+content: '」';\n \
+}\n \
+\n \
+/* 斜体 */\n \
+.preview-theme--allblue em {\n \
+font-style: normal;\n \
+color: #3594F7;\n \
+font-weight:bold;\n \
+}\n \
+\n \
+/* 加粗斜体 */\n \
+.preview-theme--allblue em strong {\n \
+color: #3594F7;\n \
+}\n \
+\n \
+/* 删除线 */\n \
+.preview-theme--allblue s {\n \
+color: #3594F7;\n \
+}\n \
+\n \
+/* 分隔线\n \
+* 粗细、样式和颜色\n \
+* border-top:1px solid #3e3e3e;\n \
+*/\n \
+.preview-theme--allblue hr {\n \
+height: 1px;\n \
+padding: 0;\n \
+border: none;\n \
+border-top: 2px solid #3BAAFA;\n \
+}\n \
+\n \
+/* 图片\n \
+* 宽度 width:80%;\n \
+* 居中 margin:0 auto;\n \
+* 居左 margin:0 0;\n \
+*/\n \
+.preview-theme--allblue img {\n \
+border-radius: 6px;\n \
+display: block;\n \
+margin: 20px auto;\n \
+object-fit: contain;\n \
+box-shadow:2px 4px 7px #999;\n \
+}\n \
+\n \
+/* 图片描述文字 */\n \
+.preview-theme--allblue figcaption {\n \
+text-align: center;\n \
+display: block;\n \
+font-size: 13px;\n \
+color: #2b2b2b;\n \
+}\n \
+\n \
+.preview-theme--allblue figcaption:before{\n \
+content:'';\n \
+background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAGFBMVEVHcExAuPtAuPpAuPtAuPpAuPtAvPxAuPokzOX5AAAAB3RSTlMAkDLqNegkoiUM7wAAAGBJREFUKM9jYBhcgMkBTUDVBE1BeDGqEtXychNUBeXlKEqACsrLQxB8lnCQQClCiWt5OYoSiAIkJVAF5eVBqAqAShTAAs7l5ShKWMwRAmAlSArASpAVgJUkCqIAscESHwCVVjMBK9JnbQAAAABJRU5ErkJggg==);\n \
+display:inline-block;\n \
+width:18px;\n \
+height:18px;\n \
+background-size:18px;\n \
+background-repeat:no-repeat;\n \
+background-position:center;\n \
+margin-right:5px;\n \
+margin-bottom:-5px;\n \
+}\n \
+\n \
+/* 行内代码 */\n \
+.preview-theme--allblue p code,\n \
+.preview-theme--allblue li code {\n \
+color: #3594F7;\n \
+background: RGBA(59, 170, 250, .1);\n \
+padding:0 2px;\n \
+border-radius:2px;\n \
+height:21px;\n \
+line-height:22px;\n \
+}\n \
+\n \
+/* 非微信代码块\n \
+* 代码块不换行 display:-webkit-box !important;\n \
+* 代码块换行 display:block;\n \
+*/\n \
+.preview-theme--allblue .code-snippet__fix {\n \
+background: #f7f7f7;\n \
+border-radius: 2px;\n \
+}\n \
+\n \
+.preview-theme--allblue pre code {\n \
+letter-spacing: 0px;\n \
+}\n \
+\n \
+/*\n \
+* 表格内的单元格\n \
+* 字体大小 font-size: 16px;\n \
+* 边框 border: 1px solid #ccc;\n \
+* 内边距 padding: 5px 10px;\n \
+*/\n \
+.preview-theme--allblue table tr th,\n \
+.preview-theme--allblue table tr td {\n \
+font-size: 14px;\n \
+color: #595959;\n \
+}\n \
+\n \
+.preview-theme--allblue .footnotes {\n \
+background: #F6EEFF;\n \
+padding: 20px 20px 20px 20px;\n \
+font-size: 14px;\n \
+border: 0.8px solid #DEC6FB;\n \
+border-radius: 6px;\n \
+border: 1px solid #DEC6FB;\n \
+}\n \
+\n \
+/* 脚注文字 */\n \
+.preview-theme--allblue .footnote-word {\n \
+font-weight: normal;\n \
+color: #595959;\n \
+}\n \
+\n \
+/* 脚注上标 */\n \
+.preview-theme--allblue .footnote-ref {\n \
+font-weight: normal;\n \
+color: #595959;\n \
+}\n \
+\n \
+/*脚注链接样式*/\n \
+.preview-theme--allblue .footnote-item em {\n \
+font-size: 14px;\n \
+color: #595959;\n \
+display: block;\n \
+}\n \
+\n \
+.preview-theme--allblue .footnotes{\n \
+background: RGBA(53, 148, 247, .4);\n \
+padding: 20px 20px 20px 20px;\n \
+font-size: 14px;\n \
+border-radius: 6px;\n \
+border: 1px solid RGBA(53, 148, 247, 1);\n \
+}\n \
+\n \
+.preview-theme--allblue .footnotes-sep {\n \
+border-top: unset;\n \
+}\n \
+\n \
+/* \"参考资料\"四个字\n \
+* 内容 content: \"参考资料\";\n \
+*/\n \
+.preview-theme--allblue .footnotes-sep:before {\n \
+content: 'Reference';\n \
+color: #595959;\n \
+letter-spacing: 1px;\n \
+border-bottom: 2px solid RGBA(64, 184, 250, 1);\n \
+display: inline;\n \
+background: linear-gradient(white 60%, RGBA(64, 184, 250, .4) 40%);\n \
+font-size: 20px;\n \
+}\n \
+\n \
+/* 参考资料编号 */\n \
+.preview-theme--allblue .footnote-num {}\n \
+\n \
+/* 参考资料文字 */\n \
+.preview-theme--allblue .footnote-item p {\n \
+color: #595959;\n \
+font-weight: bold;\n \
+}\n \
+\n \
+/* 参考资料解释 */\n \
+.preview-theme--allblue .footnote-item p em {\n \
+font-weight: normal;\n \
+}\n \
+\n \
+/* 行间公式\n \
+* 最大宽度 max-width: 300% !important;\n \
+*/\n \
+.preview-theme--allblue .katex--display svg {}\n \
+\n \
+/* 行内公式\n \
+*/\n \
+.preview-theme--allblue .katex--inline svg {}\n \
+\n \
+/* \n \
+ */\n \
+.preview-theme--allblue pre>code {\n \
+background-color: #333;\n \
+color: rgba(255,255,255,0.75);\n \
+}\n \
+\n \
+.preview-theme--allblue .language-mermaid {\n \
+letter-spacing: 0;\n \
+}";
+document.head.appendChild(style);
+}
+init_preview_theme_allblue();
diff --git a/static/themes/preview-theme-caoyuangreen.js b/static/themes/preview-theme-caoyuangreen.js
new file mode 100644
index 00000000..3c3ff101
--- /dev/null
+++ b/static/themes/preview-theme-caoyuangreen.js
@@ -0,0 +1,382 @@
+function init_preview_theme_caoyuangreen() {
+const style = document.createElement('style');
+style.id = 'preview-theme-caoyuangreen';
+style.type = 'text/css';
+style.innerHTML = "/* 草原绿 caoyuangreen\n \
+*/\n \
+.preview-theme--caoyuangreen {\n \
+  line-height: 1.35;\n \
+  color: #333;\n \
+  background-color: #fff;\n \
+  font-family: Optima-Regular, PingFangTC-light;\n \
+  letter-spacing: 1.5px;\n \
+}\n \
+\n \
+/* 段落，下方未标注标签参数均同此处\n \
+*/\n \
+.preview-theme--caoyuangreen p {\n \
+  color: #2b2b2b;\n \
+  margin: 10px 0px;\n \
+  letter-spacing: 2px;\n \
+  font-size: 16px;\n \
+  word-spacing: 2px;\n \
+}\n \
+\n \
+/* 一级标题 */\n \
+.preview-theme--caoyuangreen h1 {\n \
+  font-size: 25px;\n \
+}\n \
+\n \
+/* 一级标题内容 */\n \
+.preview-theme--caoyuangreen h1 span {\n \
+  display: inline-block;\n \
+  font-weight: bold;\n \
+  color: #4CAF50;\n \
+}\n \
+\n \
+/* 一级标题修饰 请参考有实例的主题 */\n \
+.preview-theme--caoyuangreen h1:after {}\n \
+\n \
+/* 二级标题 */\n \
+.preview-theme--caoyuangreen h2 {\n \
+  display:block;\n \
+  border-bottom: 4px solid #4CAF50;\n \
+}\n \
+\n \
+/* 二级标题内容 */\n \
+.preview-theme--caoyuangreen h2 .content {\n \
+  display: flex;\n \
+  color: #4CAF50;\n \
+  font-size: 20px;\n \
+\n \
+}\n \
+\n \
+/* 二级标题前缀 */\n \
+.preview-theme--caoyuangreen h2 .prefix {\n \
+\n \
+}\n \
+\n \
+/* 二级标题后缀 */\n \
+.preview-theme--caoyuangreen h2 .suffix {\n \
+  display: flex;\n \
+  box-sizing: border-box;\n \
+  width: 20px;\n \
+  height: 10px;\n \
+  border-top-left-radius: 20px;\n \
+  border-top-right-radius: 20px;\n \
+  background: RGBA(76, 175, 80, .5);\n \
+  color: rgb(255, 255, 255);\n \
+  font-size: 16px;\n \
+  letter-spacing: 0.544px;\n \
+  justify-content: flex-end;\n \
+  box-sizing: border-box !important;\n \
+  overflow-wrap: break-word !important;\n \
+  float: right;\n \
+  margin-top: -10px;\n \
+}\n \
+\n \
+.preview-theme--caoyuangreen h1:after, .preview-theme--caoyuangreen h2:after {\n \
+    border-bottom: unset;\n \
+}\n \
+\n \
+/* 三级标题 */\n \
+.preview-theme--caoyuangreen h3 {\n \
+  font-size: 17px;\n \
+  font-weight: bold;\n \
+  text-align: center;\n \
+  position:relative;\n \
+  margin-top: 20px;\n \
+  margin-bottom: 20px;\n \
+}\n \
+\n \
+/* 三级标题内容 */\n \
+.preview-theme--caoyuangreen h3 .content {\n \
+  color: #2b2b2b;\n \
+  padding-bottom:2px\n \
+}\n \
+\n \
+.preview-theme--caoyuangreen h3 .content:before{\n \
+  content:'';\n \
+  width:30px;\n \
+  height:30px;\n \
+  display:block;\n \
+  background-image:url(https://files.mdnice.com/grass-green.png);\n \
+  background-position:center;\n \
+  background-size:30px;\n \
+  margin:auto;\n \
+  opacity:1;\n \
+  background-repeat:no-repeat;\n \
+  margin-bottom:-8px;\n \
+}\n \
+\n \
+/* 三级标题修饰 请参考有实例的主题 */\n \
+.preview-theme--caoyuangreen h3:after {}\n \
+\n \
+.preview-theme--caoyuangreen h4 .content {\n \
+  height:16px;\n \
+  line-height:16px;\n \
+  font-size: 16px;\n \
+}\n \
+\n \
+.preview-theme--caoyuangreen h4 .content:before{\n \
+\n \
+}\n \
+\n \
+/* 无序列表整体样式\n \
+* list-style-type: square|circle|disc;\n \
+*/\n \
+.preview-theme--caoyuangreen ul {\n \
+  font-size: 15px; /*神奇逻辑，必须比li section的字体大才会在二级中生效*/\n \
+  color: #595959;\n \
+  list-style-type: circle;\n \
+}\n \
+\n \
+\n \
+/* 有序列表整体样式\n \
+* list-style-type: upper-roman|lower-greek|lower-alpha;\n \
+*/\n \
+.preview-theme--caoyuangreen ol {\n \
+  font-size: 15px;\n \
+  color: #595959;\n \
+}\n \
+\n \
+/* 列表内容，不要设置li\n \
+*/\n \
+.preview-theme--caoyuangreen li section {\n \
+  font-size: 16px;\n \
+  font-weight: normal;\n \
+  color: #595959;\n \
+}\n \
+\n \
+/* 引用\n \
+* 左边缘颜色 border-left-color:black;\n \
+* 背景色 background:gray;\n \
+*/\n \
+.preview-theme--caoyuangreen blockquote::before {\n \
+  content: \"❝\";\n \
+  color: #74b56d;\n \
+  font-size: 34px;\n \
+  line-height: 1;\n \
+  font-weight: 700;\n \
+}\n \
+\n \
+.preview-theme--caoyuangreen blockquote {\n \
+  text-size-adjust: 100%;\n \
+  line-height: 1.55em;\n \
+  font-weight: 400;\n \
+  border-radius: 6px;\n \
+  color: #595959 !important;\n \
+  font-style: normal;\n \
+  text-align: left;\n \
+  box-sizing: inherit;\n \
+  padding-bottom: 25px;\n \
+  border-left: none !important;\n \
+  border: 1px solid #1b900d !important;\n \
+  background: #fff;\n \
+\n \
+}\n \
+\n \
+.preview-theme--caoyuangreen blockquote p {\n \
+  margin: 0px;\n \
+}\n \
+\n \
+.preview-theme--caoyuangreen blockquote::after {\n \
+  content: \"❞\";\n \
+  float: right;\n \
+  color: #74b56d;\n \
+}\n \
+\n \
+/* 链接\n \
+* border-bottom: 1px solid #009688;\n \
+*/\n \
+.preview-theme--caoyuangreen a {\n \
+  color: #399003;\n \
+  font-weight: normal;\n \
+  border-bottom: 1px solid #399003;\n \
+}\n \
+\n \
+.preview-theme--caoyuangreen strong::before {\n \
+  content: '「';\n \
+}\n \
+\n \
+/* 加粗 */\n \
+.preview-theme--caoyuangreen strong {\n \
+  color: #399003;\n \
+  font-weight: bold;\n \
+}\n \
+\n \
+.preview-theme--caoyuangreen strong::after {\n \
+  content: '」';\n \
+}\n \
+\n \
+/* 斜体 */\n \
+.preview-theme--caoyuangreen em {\n \
+  font-style: normal;\n \
+  color: #399003;\n \
+  font-weight:bold;\n \
+}\n \
+\n \
+/* 加粗斜体 */\n \
+.preview-theme--caoyuangreen em strong {\n \
+  color: #399003;\n \
+}\n \
+\n \
+/* 删除线 */\n \
+.preview-theme--caoyuangreen del {\n \
+  color: #399003;\n \
+}\n \
+\n \
+/* 分隔线\n \
+* 粗细、样式和颜色\n \
+* border-top:1px solid #3e3e3e;\n \
+*/\n \
+.preview-theme--caoyuangreen hr {\n \
+  height: 1px;\n \
+  padding: 0;\n \
+  border: none;\n \
+  border-top: 2px solid #399003;\n \
+}\n \
+\n \
+/* 图片\n \
+* 宽度 width:80%;\n \
+* 居中 margin:0 auto;\n \
+* 居左 margin:0 0;\n \
+*/\n \
+.preview-theme--caoyuangreen img {\n \
+  border-radius: 6px;\n \
+  display: block;\n \
+  margin: 20px auto;\n \
+  object-fit: contain;\n \
+  box-shadow:2px 4px 7px #999;\n \
+}\n \
+\n \
+/* 图片描述文字 */\n \
+.preview-theme--caoyuangreen figcaption {\n \
+  display: block;\n \
+  font-size: 13px;\n \
+  color: #2b2b2b;\n \
+}\n \
+\n \
+/* 行内代码 */\n \
+.preview-theme--caoyuangreen p code,\n \
+.preview-theme--caoyuangreen li code,\n \
+.preview-theme--caoyuangreen table code {\n \
+  color: #0bb712;\n \
+  background: rgba(127, 226, 159, 0.48);\n \
+  display:inline-block;\n \
+  padding:0 2px;\n \
+  border-radius:2px;\n \
+  height:21px;\n \
+  line-height:22px;\n \
+}\n \
+\n \
+/* 非微信代码块\n \
+* 代码块不换行 display:-webkit-box !important;\n \
+* 代码块换行 display:block;\n \
+*/\n \
+.preview-theme--caoyuangreen .code-snippet__fix {\n \
+  background: #f7f7f7;\n \
+  border-radius: 2px;\n \
+}\n \
+\n \
+.preview-theme--caoyuangreen pre code {\n \
+  letter-spacing: 0px;\n \
+}\n \
+\n \
+/*\n \
+* 表格内的单元格\n \
+* 字体大小 font-size: 16px;\n \
+* 边框 border: 1px solid #ccc;\n \
+* 内边距 padding: 5px 10px;\n \
+*/\n \
+.preview-theme--caoyuangreen table tr th,\n \
+.preview-theme--caoyuangreen table tr td {\n \
+  font-size: 16px;\n \
+  color: #595959;\n \
+}\n \
+\n \
+.preview-theme--caoyuangreen .footnotes {\n \
+  background: #F6EEFF;\n \
+  padding: 20px 20px 20px 20px;\n \
+  font-size: 16px;\n \
+  border: 0.8px solid #399003;\n \
+  border-radius: 6px;\n \
+  border: 1px solid #399003;\n \
+}\n \
+\n \
+/* 脚注文字 */\n \
+.preview-theme--caoyuangreen .footnote-word {\n \
+  font-weight: normal;\n \
+  color: #595959;\n \
+}\n \
+\n \
+/* 脚注上标 */\n \
+.preview-theme--caoyuangreen .footnote-ref {\n \
+  font-weight: normal;\n \
+  color: #595959;\n \
+}\n \
+\n \
+/*脚注链接样式*/\n \
+.preview-theme--caoyuangreen .footnote-item em {\n \
+  font-size: 16px;\n \
+  color: #595959;\n \
+  display: block;\n \
+}\n \
+\n \
+.preview-theme--caoyuangreen .footnotes{\n \
+  background: #fff;\n \
+  padding: 20px 20px 20px 20px;\n \
+  font-size: 16px;\n \
+  border-radius: 6px;\n \
+  border: 1px solid #4CAF50;\n \
+}\n \
+\n \
+/* \"参考资料\"四个字\n \
+* 内容 content: \"参考资料\";\n \
+*/\n \
+.preview-theme--caoyuangreen .footnotes-sep:before {\n \
+  content: 'Reference';\n \
+  color: #595959;\n \
+  letter-spacing: 1px;\n \
+  border-bottom: 2px solid #4CAF50;\n \
+  display: inline;\n \
+  font-size: 20px;\n \
+}\n \
+\n \
+/* 参考资料编号 */\n \
+.preview-theme--caoyuangreen .footnote-num {}\n \
+\n \
+/* 参考资料文字 */\n \
+.preview-theme--caoyuangreen .footnote-item p {\n \
+  color: #595959;\n \
+  font-weight: bold;\n \
+}\n \
+\n \
+/* 参考资料解释 */\n \
+.preview-theme--caoyuangreen .footnote-item p em {\n \
+  font-weight: normal;\n \
+}\n \
+\n \
+/* 行间公式\n \
+* 最大宽度 max-width: 300% !important;\n \
+*/\n \
+.preview-theme--caoyuangreen .block-equation svg {}\n \
+\n \
+/* 行内公式\n \
+*/\n \
+.preview-theme--caoyuangreen .inline-equation svg {}\n \
+\n \
+/* 滑动图片\n \
+ */\n \
+.preview-theme--caoyuangreen .imageflow-img {\n \
+  display: inline-block;\n \
+  width:100%;\n \
+  margin-bottom: 0;\n \
+}\n \
+.preview-theme--caoyuangreen pre>code {\n \
+background-color: #333;\n \
+color: rgba(255,255,255,0.75);\n \
+}";
+document.head.appendChild(style);
+}
+init_preview_theme_caoyuangreen();
diff --git a/static/themes/preview-theme-jikebrack.js b/static/themes/preview-theme-jikebrack.js
new file mode 100644
index 00000000..ee729a6f
--- /dev/null
+++ b/static/themes/preview-theme-jikebrack.js
@@ -0,0 +1,272 @@
+function init_preview_theme_jikebrack() {
+const style = document.createElement('style');
+style.id = 'preview-theme-jikebrack';
+style.type = 'text/css';
+style.innerHTML = "/*极客黑样式，实时生效*/\n \
+\n \
+/* 全局属性\n \
+ */\n \
+.preview-theme--jikebrack {\n \
+color: #2b2b2b;\n \
+background-color: #fff;\n \
+}\n \
+\n \
+/* 段落\n \
+ */\n \
+.preview-theme--jikebrack p {\n \
+box-sizing: border-box;\n \
+margin-bottom: 16px;\n \
+font-family: \"Helvetica Neue\", Helvetica, \"Segoe UI\", Arial, freesans, sans-serif;\n \
+font-size: 15px;\n \
+text-align: start;\n \
+white-space: normal;\n \
+text-size-adjust: auto;\n \
+line-height: 1.75em;\n \
+}\n \
+\n \
+/* 一级标题 */\n \
+.preview-theme--jikebrack h1 {\n \
+margin-top: -0.46em;\n \
+margin-bottom: 0.1em;\n \
+border-bottom: 2px solid rgb(198, 196, 196);\n \
+box-sizing: border-box;\n \
+}\n \
+\n \
+/* 一级标题内容 */\n \
+.preview-theme--jikebrack h1 .content {\n \
+padding-top: 5px;\n \
+padding-bottom: 5px;\n \
+color: rgb(160, 160, 160);\n \
+font-size: 13px;\n \
+line-height: 2;\n \
+box-sizing: border-box;\n \
+}\n \
+\n \
+/* 一级标题修饰 请参考有实例的主题 */\n \
+.preview-theme--jikebrack h1:after {\n \
+}\n \
+\n \
+/* 二级标题 */\n \
+.preview-theme--jikebrack h2 {\n \
+margin: 10px auto;\n \
+height: 40px;\n \
+background-color: rgb(251, 251, 251);\n \
+border-bottom: 1px solid rgb(246, 246, 246);\n \
+overflow: hidden;\n \
+box-sizing: border-box;\n \
+}\n \
+\n \
+/* 二级标题内容 */\n \
+.preview-theme--jikebrack h2 .content {\n \
+margin-left: -10px;\n \
+display: inline-block;\n \
+width: auto;\n \
+height: 40px;\n \
+background-color: rgb(33, 33, 34);\n \
+border-bottom-right-radius:100px;\n \
+color: rgb(255, 255, 255);\n \
+padding-right: 30px;\n \
+padding-left: 30px;\n \
+line-height: 40px;\n \
+font-size: 16px;\n \
+}\n \
+\n \
+/* 二级标题修饰 请参考有实例的主题 */\n \
+.preview-theme--jikebrack h2:after {\n \
+}\n \
+\n \
+/* 三级标题 */\n \
+.preview-theme--jikebrack h3 {\n \
+margin: 20px auto 5px;\n \
+border-top: 1px solid rgb(221, 221, 221);\n \
+box-sizing: border-box;\n \
+}\n \
+\n \
+/* 三级标题内容 */\n \
+.preview-theme--jikebrack h3 .content {\n \
+margin-top: -1px;\n \
+padding-top: 6px;\n \
+padding-right: 5px;\n \
+padding-left: 5px;\n \
+font-size: 17px;\n \
+border-top: 2px solid rgb(33, 33, 34);\n \
+display: inline-block;\n \
+line-height: 1.1;\n \
+}\n \
+\n \
+/* 三级标题修饰 请参考有实例的主题 */\n \
+.preview-theme--jikebrack h3:after {\n \
+}\n \
+\n \
+.preview-theme--jikebrack h4 {\n \
+margin: 10px auto -1px;\n \
+border-top: 1px solid rgb(221, 221, 221);\n \
+box-sizing: border-box;\n \
+}\n \
+\n \
+.preview-theme--jikebrack h4 .content {\n \
+margin-top: -1px;\n \
+padding-top: 6px;\n \
+padding-right: 5px;\n \
+padding-left: 5px;\n \
+font-size: 16px;\n \
+border-top: 2px solid rgb(33, 33, 34);\n \
+display: inline-block;\n \
+line-height: 1.1;\n \
+}\n \
+\n \
+/* 无序列表整体样式\n \
+ * list-style-type: square|circle|disc;\n \
+ */\n \
+.preview-theme--jikebrack ul {\n \
+}\n \
+\n \
+/* 有序列表整体样式\n \
+ * list-style-type: upper-roman|lower-greek|lower-alpha;\n \
+ */\n \
+.preview-theme--jikebrack ol {\n \
+}\n \
+\n \
+/* 列表内容，不要设置li\n \
+ */\n \
+.preview-theme--jikebrack li section {\n \
+font-size: 15px;\n \
+font-family: \"Helvetica Neue\", Helvetica, \"Segoe UI\", Arial, freesans, sans-serif;\n \
+}\n \
+\n \
+/* 引用\n \
+ * 左边缘颜色 border-left-color: black;\n \
+ * 背景色 background: gray;\n \
+ */\n \
+.preview-theme--jikebrack blockquote {\n \
+border-left-color: rgb(221, 221, 221) !important;\n \
+margin-top: 1.2em;\n \
+margin-bottom: 1.2em;\n \
+padding-right: 1em;\n \
+padding-left: 1em;\n \
+border-left-width: 4px;\n \
+color: rgb(119, 119, 119) !important;\n \
+quotes: none;\n \
+background: rgba(0, 0, 0, 0.05) !important;\n \
+}\n \
+\n \
+/* 引用文字 */\n \
+.preview-theme--jikebrack blockquote p {\n \
+font-size: 15px;\n \
+font-family: -apple-system-font, BlinkMacSystemFont, \"Helvetica Neue\", \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei UI\", \"Microsoft YaHei\", Arial, sans-serif;\n \
+color: rgb(119, 119, 119);\n \
+line-height: 1.75em;\n \
+}\n \
+\n \
+/* 链接 \n \
+ * border-bottom: 1px solid #009688;\n \
+ */\n \
+.preview-theme--jikebrack a {\n \
+color: rgb(239, 112, 96);\n \
+border-bottom: 1px solid rgb(239, 112, 96);\n \
+}\n \
+\n \
+/* 加粗 */\n \
+.preview-theme--jikebrack strong {\n \
+}\n \
+\n \
+/* 斜体 */\n \
+.preview-theme--jikebrack em {\n \
+}\n \
+\n \
+/* 加粗斜体 */\n \
+.preview-theme--jikebrack em strong {\n \
+}\n \
+\n \
+/* 删除线 */\n \
+.preview-theme--jikebrack s {\n \
+}\n \
+\n \
+/* 分隔线\n \
+ * 粗细、样式和颜色\n \
+ * border-top: 1px solid #3e3e3e;\n \
+ */\n \
+.preview-theme--jikebrack hr {\n \
+}\n \
+\n \
+/* 图片\n \
+ * 宽度 width: 80%;\n \
+ * 居中 margin: 0 auto;\n \
+ * 居左 margin: 0 0;\n \
+ */\n \
+.preview-theme--jikebrack img {\n \
+}\n \
+\n \
+/* 图片描述文字 */\n \
+.preview-theme--jikebrack figcaption {\n \
+}\n \
+\n \
+/* 行内代码 */\n \
+.preview-theme--jikebrack p code,.preview-theme--jikebrack li code {\n \
+color: rgb(239, 112, 96) !important;\n \
+background-color: rgba(27,31,35,.05) !important;\n \
+}\n \
+\n \
+/* 非微信代码块\n \
+ * 代码块不换行 display: -webkit-box !important;\n \
+ * 代码块换行 display: block;\n \
+ */\n \
+.preview-theme--jikebrack pre code {\n \
+}\n \
+\n \
+/*\n \
+ * 表格内的单元格\n \
+ * 字体大小 font-size: 16px;\n \
+ * 边框 border: 1px solid #ccc;\n \
+ * 内边距 padding: 5px 10px;\n \
+ */\n \
+.preview-theme--jikebrack table tr th,\n \
+.preview-theme--jikebrack table tr td {\n \
+}\n \
+\n \
+/* 脚注文字 */\n \
+.preview-theme--jikebrack .footnote-word {\n \
+color: #ff3502;\n \
+}\n \
+\n \
+/* 脚注上标 */\n \
+.preview-theme--jikebrack .footnote-ref {\n \
+color: rgb(239, 112, 96);\n \
+}\n \
+\n \
+/* \"参考资料\"四个字 \n \
+ * 内容 content: \"参考资料\";\n \
+ */\n \
+.preview-theme--jikebrack .footnotes-sep:before {\n \
+}\n \
+\n \
+/* 参考资料编号 */\n \
+.preview-theme--jikebrack .footnote-num {\n \
+}\n \
+\n \
+/* 参考资料文字 */\n \
+.preview-theme--jikebrack .footnote-item p { \n \
+}\n \
+\n \
+/* 参考资料解释 */\n \
+.preview-theme--jikebrack .footnote-item p em {\n \
+}\n \
+\n \
+/* 行间公式\n \
+ * 最大宽度 max-width: 300% !important;\n \
+ */\n \
+.preview-theme--jikebrack .block-equation svg {\n \
+}\n \
+\n \
+/* 行内公式\n \
+ */\n \
+.preview-theme--jikebrack .inline-equation svg {\n \
+}\n \
+\n \
+.preview-theme--jikebrack pre>code {\n \
+background-color: #333;\n \
+color: rgba(255,255,255,0.75);\n \
+}";
+document.head.appendChild(style);
+}
+init_preview_theme_jikebrack();
diff --git a/static/themes/preview-theme-ningyezi.js b/static/themes/preview-theme-ningyezi.js
new file mode 100644
index 00000000..6739277c
--- /dev/null
+++ b/static/themes/preview-theme-ningyezi.js
@@ -0,0 +1,269 @@
+function init_preview_theme_ningyezi() {
+const style = document.createElement('style');
+style.id = 'preview-theme-ningyezi';
+style.type = 'text/css';
+style.innerHTML = "/*凝夜紫 ningyezi\n \
+*/\n \
+.preview-theme--ningyezi {\n \
+  line-height: 1.5;\n \
+  font-family: Optima-Regular, Optima, PingFangTC-Light, PingFangSC-light, PingFangTC-light;\n \
+  letter-spacing: 2px;\n \
+  color: #2b2b2b;\n \
+  background-color: #fff;\n \
+  background-image: linear-gradient(90deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%), linear-gradient(360deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%);\n \
+  background-size: 20px 20px;\n \
+  background-position: center center;\n \
+}\n \
+\n \
+/* 段落，下方未标注标签参数均同此处\n \
+  */\n \
+.preview-theme--ningyezi p {\n \
+  margin: 10px 0px;\n \
+  letter-spacing: 2px;\n \
+  font-size: 14px;\n \
+  word-spacing: 2px;\n \
+}\n \
+\n \
+/* 一级标题 */\n \
+.preview-theme--ningyezi h1 {\n \
+  font-size: 25px;\n \
+}\n \
+\n \
+/* 一级标题内容 */\n \
+.preview-theme--ningyezi h1 .content {\n \
+  display: inline-block;\n \
+  font-weight: bold;\n \
+  color: #773098;\n \
+}\n \
+\n \
+/* 一级标题修饰 请参考有实例的主题 */\n \
+.preview-theme--ningyezi h1:after {}\n \
+\n \
+/* 二级标题 */\n \
+.preview-theme--ningyezi h2 {\n \
+  text-align: left;\n \
+  margin: 20px 10px 0px 0px;\n \
+}\n \
+\n \
+/* 二级标题内容 */\n \
+.preview-theme--ningyezi h2 .content {\n \
+  font-size: 18px;\n \
+  font-weight: bold;\n \
+  display: inline-block;\n \
+  padding-left: 10px;\n \
+  border-left: 5px solid #916dd5;\n \
+}\n \
+\n \
+/* 二级标题修饰 请参考有实例的主题 */\n \
+.preview-theme--ningyezi h2:after {}\n \
+\n \
+/* 三级标题 */\n \
+.preview-theme--ningyezi h3 {\n \
+  font-size: 16px;\n \
+  font-weight: bold;\n \
+  text-align: center;\n \
+}\n \
+\n \
+/* 三级标题内容 */\n \
+.preview-theme--ningyezi h3 .content {\n \
+  border-bottom: 2px solid #d89cf6;\n \
+}\n \
+\n \
+/* 三级标题修饰 请参考有实例的主题 */\n \
+.preview-theme--ningyezi h3:after {}\n \
+\n \
+/* 无序列表整体样式\n \
+  * list-style-type: square|circle|disc;\n \
+  */\n \
+.preview-theme--ningyezi ul {\n \
+  font-size: 15px;\n \
+  /*神奇逻辑，必须比li section的字体大才会在二级中生效*/\n \
+  list-style-type: circle;\n \
+}\n \
+\n \
+\n \
+/* 有序列表整体样式\n \
+  * list-style-type: upper-roman|lower-greek|lower-alpha;\n \
+  */\n \
+.preview-theme--ningyezi ol {\n \
+  font-size: 15px;\n \
+}\n \
+\n \
+/* 列表内容，不要设置li\n \
+  */\n \
+.preview-theme--ningyezi li section {\n \
+  font-size: 14px;\n \
+  font-weight: normal;\n \
+}\n \
+\n \
+/* 引用\n \
+  * 左边缘颜色 border-left-color:black;\n \
+  * 背景色 background:gray;\n \
+  */\n \
+.preview-theme--ningyezi blockquote {\n \
+  color: rgba(0,0,0,0.5) !important;\n \
+  border-left-color: #d89cf6 !important;\n \
+  background: #f4eeff !important;\n \
+}\n \
+\n \
+/* 链接 \n \
+  * border-bottom: 1px solid #009688;\n \
+  */\n \
+.preview-theme--ningyezi a {\n \
+  color: #916dd5;\n \
+  font-weight: bolder;\n \
+  border-bottom: 1px solid #916dd5;\n \
+}\n \
+\n \
+.preview-theme--ningyezi strong::before {\n \
+  content: '「';\n \
+}\n \
+\n \
+/* 加粗 */\n \
+.preview-theme--ningyezi strong {\n \
+  color: #916dd5;\n \
+  font-weight: bold;\n \
+}\n \
+\n \
+.preview-theme--ningyezi strong::after {\n \
+  content: '」';\n \
+}\n \
+\n \
+/* 斜体 */\n \
+.preview-theme--ningyezi em {\n \
+  font-style: normal;\n \
+  color: #916dd5;\n \
+}\n \
+\n \
+/* 加粗斜体 */\n \
+.preview-theme--ningyezi em strong {\n \
+  color: #916dd5;\n \
+}\n \
+\n \
+/* 删除线 */\n \
+.preview-theme--ningyezi del {\n \
+  color: #916dd5;\n \
+}\n \
+\n \
+/* 分隔线\n \
+  * 粗细、样式和颜色\n \
+  */\n \
+.preview-theme--ningyezi hr {\n \
+  height: 1px;\n \
+  padding: 0;\n \
+  border: none;\n \
+  border-top: 2px solid #d9b8fa;\n \
+}\n \
+\n \
+/* 图片\n \
+  * 宽度 width:80%;\n \
+  * 居中 margin:0 auto;\n \
+  * 居左 margin:0 0;\n \
+  */\n \
+.preview-theme--ningyezi img {\n \
+  border-radius: 6px;\n \
+  display: block;\n \
+  margin: 20px auto;\n \
+  object-fit: contain;\n \
+  box-shadow: 2px 4px 7px #999;\n \
+}\n \
+\n \
+/* 图片描述文字 */\n \
+.preview-theme--ningyezi figcaption {\n \
+  display: block;\n \
+  font-size: 13px;\n \
+}\n \
+\n \
+/* 行内代码 */\n \
+.preview-theme--ningyezi p code,\n \
+.preview-theme--ningyezi li code,\n \
+.preview-theme--ningyezi table code {\n \
+  color: #916dd5;\n \
+  font-weight: bolder;\n \
+  background: none;\n \
+}\n \
+\n \
+/* 非微信代码块\n \
+  * 代码块不换行 display:-webkit-box !important;\n \
+  * 代码块换行 display:block;\n \
+  */\n \
+.preview-theme--ningyezi .code-snippet__fix {\n \
+  background: #f7f7f7;\n \
+  border-radius: 2px;\n \
+}\n \
+\n \
+.preview-theme--ningyezi pre code {}\n \
+\n \
+/*\n \
+  * 表格内的单元格\n \
+  * 字体大小 font-size: 16px;\n \
+  * 边框 border: 1px solid #ccc;\n \
+  * 内边距 padding: 5px 10px;\n \
+  */\n \
+.preview-theme--ningyezi table tr th,\n \
+.preview-theme--ningyezi table tr td {\n \
+  font-size: 14px;\n \
+}\n \
+\n \
+.preview-theme--ningyezi .footnotes {\n \
+  font-size: 14px;\n \
+}\n \
+\n \
+/* 脚注文字 */\n \
+.preview-theme--ningyezi .footnote-word {\n \
+  font-weight: normal;\n \
+  color: #916dd5;\n \
+  font-weight: bold;\n \
+}\n \
+\n \
+/* 脚注上标 */\n \
+.preview-theme--ningyezi .footnote-ref {\n \
+  font-weight: normal;\n \
+  color: #916dd5;\n \
+}\n \
+\n \
+/*脚注链接样式*/\n \
+.preview-theme--ningyezi .footnote-item em {\n \
+  font-size: 14px;\n \
+  color: #916dd5;\n \
+  display: block;\n \
+}\n \
+\n \
+/* \"参考资料\"四个字 \n \
+  * 内容 content: \"参考资料\";\n \
+  */\n \
+.preview-theme--ningyezi .footnotes-sep:before {\n \
+  font-size: 20px;\n \
+}\n \
+\n \
+/* 参考资料编号 */\n \
+.preview-theme--ningyezi .footnote-num {\n \
+  color: #916dd5;\n \
+}\n \
+\n \
+/* 参考资料文字 */\n \
+.preview-theme--ningyezi .footnote-item p {\n \
+  color: #916dd5;\n \
+  font-weight: bold;\n \
+}\n \
+\n \
+/* 参考资料解释 */\n \
+.preview-theme--ningyezi .footnote-item p em {\n \
+  font-weight: normal;\n \
+}\n \
+\n \
+/* 行间公式\n \
+  * 最大宽度 max-width: 300% !important;\n \
+  */\n \
+.preview-theme--ningyezi .block-equation svg {}\n \
+\n \
+/* 行内公式\n \
+  */\n \
+.preview-theme--ningyezi .inline-equation svg {}\n \
+.preview-theme--ningyezi pre>code {\n \
+background-color: #333;\n \
+color: rgba(255,255,255,0.75);\n \
+}";
+document.head.appendChild(style);
+}
+init_preview_theme_ningyezi();
diff --git a/static/themes/preview-theme-simplebrack.js b/static/themes/preview-theme-simplebrack.js
new file mode 100644
index 00000000..f9a69c8d
--- /dev/null
+++ b/static/themes/preview-theme-simplebrack.js
@@ -0,0 +1,339 @@
+function init_preview_theme_simplebrack() {
+const style = document.createElement('style');
+style.id = 'preview-theme-simplebrack';
+style.type = 'text/css';
+style.innerHTML = "/* 全局属性\n \
+ * 页边距 padding: 30px;\n \
+ * 全文字体 font-family: ptima-Regular;\n \
+ * 英文换行 word-break: break-all;\n \
+ */\n \
+ .preview-theme--simplebrack {\n \
+font-size:14px;\n \
+padding:10px;\n \
+color: #2b2b2b;\n \
+background-color: #fff;\n \
+}\n \
+\n \
+/*图片下提示*/\n \
+.preview-theme--simplebrack figcaption{\n \
+font-size:12px;\n \
+}\n \
+.preview-theme--simplebrack .imageflow-caption{\n \
+font-size:12px;\n \
+}\n \
+\n \
+/* 段落，下方未标注标签参数均同此处\n \
+ * 上边距 margin-top: 5px;\n \
+ * 下边距 margin-bottom: 5px;\n \
+ * 行高 line-height: 26px;\n \
+ * 词间距 word-spacing: 3px;\n \
+ * 字间距 letter-spacing: 3px;\n \
+ * 对齐 text-align: left;\n \
+ * 颜色 color: #3e3e3e;\n \
+ * 字体大小 font-size: 16px;\n \
+ * 首行缩进 text-indent: 2em;\n \
+ */\n \
+.preview-theme--simplebrack p {\n \
+font-size:14px;\n \
+}\n \
+\n \
+/* 一级标题 */\n \
+.preview-theme--simplebrack h1 {\n \
+}\n \
+\n \
+/* 一级标题内容 */\n \
+.preview-theme--simplebrack h1 .content {\n \
+}\n \
+\n \
+/* 一级标题前缀 */\n \
+.preview-theme--simplebrack h1 .prefix {\n \
+}\n \
+\n \
+/* 一级标题后缀 */\n \
+.preview-theme--simplebrack h1 .suffix{\n \
+}\n \
+\n \
+/* 二级标题 */\n \
+.preview-theme--simplebrack h2 {\n \
+text-align:center;\n \
+position:relative;\n \
+font-weight: bold;\n \
+color: black;\n \
+line-height: 1.1em;\n \
+padding-top: 12px;\n \
+padding-bottom: 12px;\n \
+margin:70px 30px 30px;\n \
+border: 1px solid #000;\n \
+}\n \
+\n \
+.preview-theme--simplebrack h2:before{\n \
+content: ' ';\n \
+float: left;\n \
+display: block;\n \
+width: 90%;\n \
+border-top: 1px solid #000;\n \
+height: 1px;\n \
+line-height: 1px;\n \
+margin-left: -5px;\n \
+margin-top: -17px;\n \
+}\n \
+.preview-theme--simplebrack h2:after{\n \
+content: ' ';\n \
+float: right;\n \
+display: block;\n \
+width: 90%;\n \
+border-bottom: 1px solid #000;\n \
+height: 1px;\n \
+line-height: 1px;\n \
+margin-right: -5px;\n \
+margin-top: 16px;\n \
+position: unset;\n \
+}\n \
+/* 二级标题内容 */\n \
+.preview-theme--simplebrack h2 .content {\n \
+display: block;\n \
+-webkit-box-reflect: below 0em -webkit-gradient(linear,left top,left bottom, from(rgba(0,0,0,0)),to(rgba(255,255,255,0.1)));\n \
+}\n \
+.preview-theme--simplebrack h2 strong {\n \
+}\n \
+/* 二级标题前缀 */\n \
+.preview-theme--simplebrack h2 .prefix {\n \
+display: block;\n \
+width: 3px;\n \
+margin: 0 0 0 5%;\n \
+height: 3px;\n \
+line-height: 3px;\n \
+overflow: hidden;\n \
+background-color: #000;\n \
+box-shadow:3px 0 #000,\n \
+0 3px #000,\n \
+-3px 0 #000,\n \
+0 -3px #000;\n \
+}\n \
+\n \
+/* 二级标题后缀 */\n \
+.preview-theme--simplebrack h2 .suffix {\n \
+display: block;\n \
+width: 3px;\n \
+margin: 0 0 0 95%;\n \
+height: 3px;\n \
+line-height: 3px;\n \
+overflow: hidden;\n \
+background-color: #000;\n \
+box-shadow:3px 0 #000,\n \
+0 3px #000,\n \
+-3px 0 #000,\n \
+0 -3px #000;\n \
+}\n \
+\n \
+/* 三级标题 */\n \
+.preview-theme--simplebrack h3 {\n \
+background-color:#000;\n \
+color:#fff;\n \
+padding:2px 10px;\n \
+width:fit-content;\n \
+font-size:17px;\n \
+margin:60px auto 10px;\n \
+}\n \
+.preview-theme--simplebrack h3 strong {\n \
+color:#fff;\n \
+}\n \
+\n \
+/* 三级标题内容 */\n \
+.preview-theme--simplebrack h3 .content {\n \
+}\n \
+\n \
+/* 三级标题前缀 */\n \
+.preview-theme--simplebrack h3 .prefix {\n \
+}\n \
+\n \
+/* 三级标题后缀 */\n \
+.preview-theme--simplebrack h3 .suffix {\n \
+}\n \
+\n \
+/* 无序列表整体样式\n \
+ * list-style-type: square|circle|disc;\n \
+ */\n \
+.preview-theme--simplebrack ul {\n \
+list-style-type: square;\n \
+}\n \
+/* 无序二级列表\n \
+ */\n \
+.preview-theme--simplebrack ul li ul li{\n \
+list-style-type: circle;\n \
+}\n \
+\n \
+/* 有序列表整体样式\n \
+ * list-style-type: upper-roman|lower-greek|lower-alpha;\n \
+ */\n \
+.preview-theme--simplebrack ol {\n \
+}\n \
+\n \
+/* 列表内容，不要设置li\n \
+ */\n \
+.preview-theme--simplebrack li section {\n \
+}\n \
+\n \
+/* 引用\n \
+ * 左边缘颜色 border-left-color: black;\n \
+ * 背景色 background: gray;\n \
+ */\n \
+.preview-theme--simplebrack blockquote {\n \
+border-left: 3px solid rgba(0, 0, 0, 0.65) !important;\n \
+border-right: 1px solid rgba(0, 0, 0, 0.65) !important;\n \
+background: rgb(249, 249, 249) !important;\n \
+}\n \
+\n \
+/* 引用文字 */\n \
+.preview-theme--simplebrack blockquote p {\n \
+}\n \
+\n \
+/* 链接 \n \
+ * border-bottom: 1px solid #009688;\n \
+ */\n \
+.preview-theme--simplebrack a {\n \
+}\n \
+\n \
+/* 加粗 */\n \
+.preview-theme--simplebrack strong {\n \
+}\n \
+\n \
+/* 斜体 */\n \
+.preview-theme--simplebrack em {\n \
+}\n \
+\n \
+/* 加粗斜体 */\n \
+.preview-theme--simplebrack em strong {\n \
+}\n \
+\n \
+/* 删除线 */\n \
+.preview-theme--simplebrack del {\n \
+}\n \
+\n \
+/* 分隔线\n \
+ * 粗细、样式和颜色\n \
+ * border-top: 1px solid #3e3e3e;\n \
+ */\n \
+.preview-theme--simplebrack hr {\n \
+}\n \
+\n \
+/* 图片\n \
+ * 宽度 width: 80%;\n \
+ * 居中 margin: 0 auto;\n \
+ * 居左 margin: 0 0;\n \
+ */\n \
+.preview-theme--simplebrack img {\n \
+box-shadow: rgba(170, 170, 170, 0.48) 0px 0px 6px 0px;\n \
+border-radius:4px;\n \
+margin-top:10px;\n \
+}\n \
+/* 行内代码 */\n \
+.preview-theme--simplebrack p code, .preview-theme--simplebrack li code {\n \
+color:#ff6441;\n \
+background-color: rgba(27,31,35,.05) !important;\n \
+}\n \
+\n \
+/* 非微信代码块\n \
+ * 代码块不换行 display: -webkit-box !important;\n \
+ * 代码块换行 display: block;\n \
+ */\n \
+.preview-theme--simplebrack pre.custom {\n \
+box-shadow: rgba(170, 170, 170, 0.48) 0px 0px 6px 0px;\n \
+max-width: 100%;\n \
+border-radius:4px;\n \
+margin: 10px auto 0 auto;\n \
+}\n \
+.preview-theme--simplebrack pre code {\n \
+}\n \
+\n \
+/*\n \
+ * 表格内的单元格\n \
+ * 字体大小 font-size: 16px;\n \
+ * 边框 border: 1px solid #ccc;\n \
+ * 内边距 padding: 5px 10px;\n \
+ */\n \
+.preview-theme--simplebrack table tr th,\n \
+.preview-theme--simplebrack table tr td {\n \
+font-size:14px;\n \
+}\n \
+\n \
+/* 脚注文字 */\n \
+.preview-theme--simplebrack .footnote-word {\n \
+}\n \
+\n \
+/* 脚注上标 */\n \
+.preview-theme--simplebrack .footnote-ref {\n \
+}\n \
+\n \
+/* \"参考资料\"四个字 \n \
+ * 内容 content: \"参考资料\";\n \
+ */\n \
+.preview-theme--simplebrack .footnotes-sep {\n \
+font-size: 14px;\n \
+color: #888;\n \
+border-top: 1px solid #eee;\n \
+padding: 30px 0 10px 0px;\n \
+background-color: transparent;\n \
+margin-bottom: 20px;\n \
+width: 100%;\n \
+}\n \
+.preview-theme--simplebrack .footnotes-sep:before {\n \
+content:'参考资料';\n \
+}\n \
+.preview-theme--simplebrack .footnotes{\n \
+border-left:5px solid #eee;\n \
+padding-left:10px;\n \
+}\n \
+\n \
+/* 参考资料编号 */\n \
+.preview-theme--simplebrack .footnote-num {\n \
+font-size:14px;\n \
+color:#999;\n \
+}\n \
+\n \
+/* 参考资料文字 */\n \
+.preview-theme--simplebrack .footnote-item p { \n \
+font-size:14px;\n \
+color:#999;\n \
+}\n \
+\n \
+/* 参考资料解释 */\n \
+.preview-theme--simplebrack .footnote-item p em {\n \
+font-size:14px;\n \
+color:#999;\n \
+}\n \
+\n \
+/* 行间公式\n \
+ * 最大宽度 max-width: 300% !important;\n \
+ */\n \
+.preview-theme--simplebrack .block-equation svg {\n \
+}\n \
+\n \
+/* 行内公式\n \
+ */\n \
+.preview-theme--simplebrack .inline-equation svg {\n \
+}\n \
+/* 文章结尾 */\n \
+.preview-theme--simplebrack:after{\n \
+content:'- END -';\n \
+font-size:15px;\n \
+display:block;\n \
+text-align:center;\n \
+margin-top:50px;\n \
+color:#999;\n \
+border-bottom:1px solid #eee;\n \
+}\n \
+\n \
+/*滑动幻灯片*/\n \
+.preview-theme--simplebrack .imageflow-layer1 img{\n \
+margin:0;\n \
+box-shadow: none;\n \
+border-radius: 0;\n \
+}\n \
+.preview-theme--simplebrack pre>code {\n \
+background-color: #333;\n \
+color: rgba(255,255,255,0.75);\n \
+}";
+document.head.appendChild(style);
+}
+init_preview_theme_simplebrack();
diff --git a/static/themes/preview-theme-yanqihu.js b/static/themes/preview-theme-yanqihu.js
new file mode 100644
index 00000000..d12163a8
--- /dev/null
+++ b/static/themes/preview-theme-yanqihu.js
@@ -0,0 +1,305 @@
+function init_preview_theme_yanqihu() {
+const style = document.createElement('style');
+style.id = 'preview-theme-yanqihu';
+style.type = 'text/css';
+style.innerHTML = "/* 雁栖湖 yanqihu\n \
+*/\n \
+.preview-theme--yanqihu {\n \
+ color: #2b2b2b;\n \
+ background-color: #fff;\n \
+ counter-reset: counterh1 counterh2 counterh3;\n \
+}\n \
+\n \
+/* 段落，下方未标注标签参数均同此处\n \
+*/\n \
+.preview-theme--yanqihu p {\n \
+}\n \
+\n \
+/* 一级标题 */\n \
+.preview-theme--yanqihu h1 {\n \
+ line-height: 28px;\n \
+ border-bottom: 1px solid rgb(37,132,181);\n \
+}\n \
+\n \
+.preview-theme--yanqihu h1:before {\n \
+ background: rgb(37,132,181);\n \
+ color: white;\n \
+ counter-increment: counterh1;\n \
+ content: 'Part'counter(counterh1); \n \
+ padding: 2px 8px;\n \
+}\n \
+\n \
+/* 一级标题内容 */\n \
+.preview-theme--yanqihu h1 .content {\n \
+ color: rgb(37,132,181);\n \
+ margin-left: 8px;\n \
+ font-size: 20px;\n \
+}\n \
+\n \
+/* 一级标题前缀 */\n \
+.preview-theme--yanqihu h1 .prefix {\n \
+}\n \
+\n \
+/* 一级标题后缀 */\n \
+.preview-theme--yanqihu h1 .suffix {\n \
+}\n \
+\n \
+/* 二级标题 */\n \
+.preview-theme--yanqihu h2 {\n \
+}\n \
+\n \
+/* 二级标题内容 */\n \
+.preview-theme--yanqihu h2 .content {\n \
+ font-size: 18px;\n \
+ border-bottom: 4px solid rgb(37,132,181);\n \
+ padding: 2px 4px;\n \
+ color: rgb(37,132,181);\n \
+}\n \
+\n \
+/* 二级标题前缀 */\n \
+.preview-theme--yanqihu h2 .prefix {\n \
+ display: inline-block;\n \
+}\n \
+\n \
+.preview-theme--yanqihu h2 .prefix:before {\n \
+ counter-increment: counterh2;\n \
+ content: counter(counterh2); \n \
+ color:rgb(159,205,208);\n \
+ border-bottom: 4px solid rgb(159,205,208);\n \
+ font-size: 18px;\n \
+ padding: 2px 4px;\n \
+}\n \
+\n \
+/* 二级标题后缀 */\n \
+.preview-theme--yanqihu h2 .suffix {\n \
+}\n \
+\n \
+.preview-theme--yanqihu h1:after, .preview-theme--yanqihu h2:after {\n \
+   border-bottom: unset;\n \
+}\n \
+\n \
+/* 三级标题 */\n \
+.preview-theme--yanqihu h3 {\n \
+}\n \
+\n \
+/* 三级标题内容 */\n \
+.preview-theme--yanqihu h3 .content {\n \
+ font-size: 16px;\n \
+ border-bottom: 1px solid rgb(37,132,181);\n \
+ padding: 2px 10px;\n \
+ color: rgb(37,132,181);\n \
+}\n \
+\n \
+/* 三级标题前缀 */\n \
+.preview-theme--yanqihu h3 .prefix {\n \
+ display:inline-block;\n \
+ background:linear-gradient(45deg, transparent 48%, rgb(37,132,181) 48%, \n \
+           rgb(37,132,181) 52%, transparent 52%);\n \
+ width:24px;\n \
+ height:24px;\n \
+ margin-bottom: -7px;\n \
+}\n \
+\n \
+/* 三级标题后缀 */\n \
+.preview-theme--yanqihu h3 .suffix {\n \
+}\n \
+\n \
+/* 无序列表整体样式\n \
+* list-style-type: square|circle|disc;\n \
+*/\n \
+.preview-theme--yanqihu ul {\n \
+}\n \
+\n \
+/* 有序列表整体样式\n \
+* list-style-type: upper-roman|lower-greek|lower-alpha;\n \
+*/\n \
+.preview-theme--yanqihu ol {\n \
+}\n \
+\n \
+/* 列表内容，不要设置li\n \
+*/\n \
+.preview-theme--yanqihu li section {\n \
+}\n \
+\n \
+/* 一级引用\n \
+* 左边缘颜色 border-left-color: black;\n \
+* 背景色 background: gray;\n \
+*/\n \
+.preview-theme--yanqihu blockquote {\n \
+ color: rgba(0,0,0,0.5) !important;\n \
+ border: 1px dashed rgb(37,132,181) !important;\n \
+ background: transparent !important;\n \
+}\n \
+\n \
+/* 一级引用文字 */\n \
+.preview-theme--yanqihu blockquote p {\n \
+}\n \
+\n \
+/* 二级引用\n \
+*/\n \
+.preview-theme--yanqihu .multiquote-2 {\n \
+ border: 1px dashed rgb(248,99,77);\n \
+ box-shadow: none;\n \
+}\n \
+\n \
+.preview-theme--yanqihu .multiquote-2 blockquote {\n \
+ margin: 0;\n \
+}\n \
+\n \
+/* 二级引用文字 */\n \
+.preview-theme--yanqihu .multiquote-2 p {\n \
+}\n \
+\n \
+.preview-theme--yanqihu .multiquote-2 strong {\n \
+ color:rgb(248,99,77);\n \
+}\n \
+\n \
+.preview-theme--yanqihu .multiquote-2 a {\n \
+ color:rgb(248,99,77);\n \
+ border-bottom: 1px solid rgb(248,99,77);\n \
+}\n \
+\n \
+/* 三级引用\n \
+*/\n \
+.preview-theme--yanqihu .multiquote-3 {\n \
+}\n \
+\n \
+/* 三级引用文字 */\n \
+.preview-theme--yanqihu .multiquote-3 p {\n \
+}\n \
+\n \
+/* 链接 \n \
+* border-bottom: 1px solid #009688;\n \
+*/\n \
+.preview-theme--yanqihu a {\n \
+ color:rgb(37,132,181);\n \
+ border-bottom: 1px solid rgb(37,132,181);\n \
+}\n \
+\n \
+/* 加粗 */\n \
+.preview-theme--yanqihu strong {\n \
+ color: rgb(37,132,181);\n \
+}\n \
+\n \
+/* 斜体 */\n \
+.preview-theme--yanqihu em {\n \
+ color: rgb(37,132,181);\n \
+}\n \
+\n \
+/* 加粗斜体 */\n \
+.preview-theme--yanqihu em strong {\n \
+ color: rgb(37,132,181);\n \
+}\n \
+\n \
+/* 删除线 */\n \
+.preview-theme--yanqihu del {\n \
+}\n \
+\n \
+/* 分隔线\n \
+* 粗细、样式和颜色\n \
+* border-top: 1px solid #3e3e3e;\n \
+*/\n \
+.preview-theme--yanqihu hr {\n \
+ border-top: 1px solid rgb(37,132,181);\n \
+}\n \
+\n \
+/* 图片\n \
+* 宽度 width: 80%;\n \
+* 居中 margin: 0 auto;\n \
+* 居左 margin: 0 0;\n \
+*/\n \
+.preview-theme--yanqihu img {\n \
+}\n \
+\n \
+/* 图片描述文字 */\n \
+.preview-theme--yanqihu figcaption {\n \
+}\n \
+\n \
+/* 行内代码 */\n \
+.preview-theme--yanqihu p code,\n \
+.preview-theme--yanqihu li code,\n \
+.preview-theme--yanqihu table code {\n \
+ background-color: rgba(0,0,0,.05);\n \
+}\n \
+\n \
+/* \n \
+* 代码块不换行 display: -webkit-box !important;\n \
+* 代码块换行 display: block;\n \
+*/\n \
+.preview-theme--yanqihu pre code {\n \
+}\n \
+\n \
+/*\n \
+* 表格内的单元格\n \
+* 字体大小 font-size: 16px;\n \
+* 边框 border: 1px solid #ccc;\n \
+* 内边距 padding: 5px 10px;\n \
+*/\n \
+.preview-theme--yanqihu table tr th {\n \
+ border: 1px solid rgb(248,99,77);\n \
+ background-color: rgb(235,114, 80);\n \
+ color: #f8f8f8;\n \
+ border-bottom: 0;\n \
+ border: 1px solid rgb(245,203,174);\n \
+}\n \
+\n \
+.preview-theme--yanqihu table tr td {\n \
+ border: 1px solid rgb(245,203,174);\n \
+}\n \
+/* \n \
+* 某一列表格列宽控制\n \
+* n 可以修改为具体数字，不修改时表示所有列\n \
+* 最小列宽 min-width: 85px;\n \
+*/\n \
+.preview-theme--yanqihu table tr th:nth-of-type(n),\n \
+.preview-theme--yanqihu table tr td:nth-of-type(n){\n \
+}\n \
+\n \
+.preview-theme--yanqihu table tr:nth-of-type(2n) {\n \
+ background-color: rgb(248,222,203);\n \
+}\n \
+/* 脚注文字 */\n \
+.preview-theme--yanqihu .footnote-word {\n \
+ color:rgb(37,132,181);\n \
+}\n \
+\n \
+/* 脚注上标 */\n \
+.preview-theme--yanqihu .footnote-ref {\n \
+ color:rgb(37,132,181);\n \
+}\n \
+\n \
+/* \"参考资料\"四个字 \n \
+* 内容 content: \"参考资料\";\n \
+*/\n \
+.preview-theme--yanqihu .footnotes-sep:before {\n \
+}\n \
+\n \
+/* 参考资料编号 */\n \
+.preview-theme--yanqihu .footnote-num {\n \
+}\n \
+\n \
+/* 参考资料文字 */\n \
+.preview-theme--yanqihu .footnote-item p { \n \
+}\n \
+\n \
+/* 参考资料解释 */\n \
+.preview-theme--yanqihu .footnote-item p em {\n \
+}\n \
+\n \
+/* 行间公式\n \
+* 最大宽度 max-width: 300% !important;\n \
+*/\n \
+.preview-theme--yanqihu .block-equation svg {\n \
+}\n \
+\n \
+/* 行内公式\n \
+*/\n \
+.preview-theme--yanqihu .inline-equation svg { \n \
+}\n \
+.preview-theme--yanqihu pre>code {\n \
+background-color: #333;\n \
+color: rgba(255,255,255,0.75);\n \
+}";
+document.head.appendChild(style);
+}
+init_preview_theme_yanqihu();