支持预览区主题
This commit is contained in:
xiaoqi.cxq
parent
9ebde2eb75
commit
d927099b28
@ -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
34
package-lock.json
generated
@ -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": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "stackedit",
|
||||
"version": "5.15.16",
|
||||
"version": "5.15.17",
|
||||
"description": "免费, 开源, 功能齐全的 Markdown 编辑器",
|
||||
"author": "Benoit Schweblin, 豆萁",
|
||||
"license": "Apache-2.0",
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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() {
|
||||
|
||||
@ -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', [
|
||||
|
||||
159
src/components/PreviewInPageButtons.vue
Normal file
159
src/components/PreviewInPageButtons.vue
Normal 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>
|
||||
@ -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),
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
116
src/components/menus/PreviewThemeMenu.vue
Normal file
116
src/components/menus/PreviewThemeMenu.vue
Normal 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
3
src/icons/Copy.vue
Normal 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
3
src/icons/Ellipsis.vue
Normal 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>
|
||||
@ -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);
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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),
|
||||
|
||||
@ -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);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
216
static/themes/preview-theme-activeblue.js
Normal file
216
static/themes/preview-theme-activeblue.js
Normal 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();
|
||||
426
static/themes/preview-theme-allblue.js
Normal file
426
static/themes/preview-theme-allblue.js
Normal 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();
|
||||
382
static/themes/preview-theme-caoyuangreen.js
Normal file
382
static/themes/preview-theme-caoyuangreen.js
Normal 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();
|
||||
272
static/themes/preview-theme-jikebrack.js
Normal file
272
static/themes/preview-theme-jikebrack.js
Normal 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();
|
||||
269
static/themes/preview-theme-ningyezi.js
Normal file
269
static/themes/preview-theme-ningyezi.js
Normal 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();
|
||||
339
static/themes/preview-theme-simplebrack.js
Normal file
339
static/themes/preview-theme-simplebrack.js
Normal 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();
|
||||
305
static/themes/preview-theme-yanqihu.js
Normal file
305
static/themes/preview-theme-yanqihu.js
Normal 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();
|
||||
Loading…
Reference in New Issue
Block a user