@@ -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 @@
+
+
+
\ 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 @@
+
+
+
\ 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 @@
+
+
+
\ 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 = `
${headingElt.innerHTML}`;
}
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 = `
${headingElt.innerHTML}`;
+ });
+ 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();