支持预览区主题

This commit is contained in:
xiaoqi.cxq 2022-12-04 21:40:54 +08:00
parent 9ebde2eb75
commit d927099b28
26 changed files with 2660 additions and 47 deletions

View File

@ -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",

34
package-lock.json generated
View File

@ -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": {

View File

@ -1,6 +1,6 @@
{
"name": "stackedit",
"version": "5.15.16",
"version": "5.15.17",
"description": "免费, 开源, 功能齐全的 Markdown 编辑器",
"author": "Benoit Schweblin, 豆萁",
"license": "Apache-2.0",

View File

@ -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 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 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 the static folder with 1 year max-age
app.use('/static', serveStatic(resolvePath('dist/static'), {
maxAge: '1y',

View File

@ -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) {

View File

@ -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>

View File

@ -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() {

View File

@ -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', [

View File

@ -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>

View File

@ -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),

View File

@ -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;

View File

@ -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>

View File

@ -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>

3
src/icons/Copy.vue Normal file
View File

@ -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>

3
src/icons/Ellipsis.vue Normal file
View File

@ -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>

View File

@ -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);

View File

@ -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);

View File

@ -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),

View File

@ -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);
},
},
};

View File

@ -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();

View File

@ -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();

View File

@ -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();

View File

@ -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();

View File

@ -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();

View File

@ -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();

View File

@ -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();