From f245c3397355f575a4fa215e5706f45f83481fb5 Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Sat, 3 Sep 2022 12:50:18 +0800
Subject: [PATCH] feat: add `base` theme.
---
README.md | 8 +-
src/pages/home/Preview.tsx | 2 +-
src/pages/theme/Preview.tsx | 2 +-
src/store/context.tsx | 5 ++
src/themes/base.md.css | 166 +++++++++++++++++++++++++++++++++++
src/themes/default.md.css | 1 -
src/themes/simple.md.css | 1 -
src/themes/underscore.md.css | 1 -
8 files changed, 178 insertions(+), 8 deletions(-)
create mode 100644 src/themes/base.md.css
diff --git a/README.md b/README.md
index f22e352..5973cf7 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@
-微信公众号文章 Markdown 在线编辑器，使用 markdown 语法创建一篇简介美观大方的微信公众号图文。由于发版本麻烦，和一些功能无法扩展停滞开发了，未来不再开发 Chrome 的工具(暂存在 chrome 分支)，通过 web 版本定制更丰富的功能。
+微信公众号文章 Markdown 在线编辑器，使用 markdown 语法创建一篇简介美观大方的微信公众号图文。由于发版本麻烦，和一些功能无法扩展停滞开发了，未来不再开发 Chrome 的插件(暂存在 chrome 分支)，通过 web 版本定制更丰富的功能。
## 功能特性
@@ -14,9 +14,11 @@
- [x] 支持 Markdown 所有基础语法
- [x] 支持自定义 CSS 样式
-- [x] 支持主题选择 & 配置。
+- [x] 支持主题选择 & 编辑预览。
- [x] 支持明暗两种主题预览。
- [ ] 支持色盘取色，快速替换文章整体色调
+- [ ] 支持 URL 参数加载 Markdown 内容。
+- [ ] 支持 URL 参数选择编辑器和预览主题。
### 支持代码块样式
@@ -102,7 +104,7 @@ Inline Code `{code: 0}`
## 主题定制
-在目录 `src/themes` 中存放默认主题，主题使用 css 定义样式，不支持复杂的选择器。
+在目录 `src/themes` 中存放默认主题，主题使用 css 定义样式，不支持复杂的选择器。提供在线主题编辑器，欢迎修改并 PR 进仓库供大家使用。
```css
/* 1~6 标题样式定义 */
diff --git a/src/pages/home/Preview.tsx b/src/pages/home/Preview.tsx
index c5da940..b391538 100644
--- a/src/pages/home/Preview.tsx
+++ b/src/pages/home/Preview.tsx
@@ -15,5 +15,5 @@ const Warpper = styled.div`
export const Preview = (props: MarkdownPreviewProps) => {
const { css } = useContext(Context);
const html = markdownToHTML(props.source || '', css);
- return ;
+ return ;
};
diff --git a/src/pages/theme/Preview.tsx b/src/pages/theme/Preview.tsx
index 77b80b4..574e79d 100644
--- a/src/pages/theme/Preview.tsx
+++ b/src/pages/theme/Preview.tsx
@@ -15,5 +15,5 @@ const Warpper = styled.div`
export const Preview = (props: MarkdownPreviewProps) => {
const { css, markdown } = useContext(Context);
const html = markdownToHTML(markdown, css);
- return ;
+ return ;
};
diff --git a/src/store/context.tsx b/src/store/context.tsx
index 259acf1..4e8c351 100644
--- a/src/store/context.tsx
+++ b/src/store/context.tsx
@@ -16,6 +16,7 @@ import { xcodeLight, xcodeDark } from '@uiw/codemirror-theme-xcode';
import defStyle from '../themes/default.md.css';
import simpleStyle from '../themes/simple.md.css';
import underscoreStyle from '../themes/underscore.md.css';
+import baseStyle from '../themes/base.md.css';
import data from '../../README.md';
@@ -103,6 +104,10 @@ export const previewThemes = {
label: '下划线黄',
value: underscoreStyle,
},
+ base: {
+ label: '简洁',
+ value: baseStyle,
+ },
};
export type ThemeValue = keyof typeof themes;
diff --git a/src/themes/base.md.css b/src/themes/base.md.css
new file mode 100644
index 0000000..52522b1
--- /dev/null
+++ b/src/themes/base.md.css
@@ -0,0 +1,166 @@
+a {
+ color: inherit;
+ text-decoration: none;
+}
+
+h1 {
+ color: inherit;
+ font-size: 1.5rem;
+}
+
+h2 {
+ color: inherit;
+ margin: 2.5rem 0 1rem 0;
+}
+
+h3 {
+ color: inherit;
+ margin: 2rem 0 1rem 0;
+}
+
+p {
+ color: initial;
+}
+
+ul {
+ padding-left: 1.2em;
+}
+
+ol {
+ padding-left: 1.2em;
+}
+
+li {
+ margin: 0;
+}
+
+blockquote {
+ font-style: normal;
+ border-left: none;
+ margin: 1rem 0;
+}
+
+pre {
+ display: block;
+ overflow-x: auto;
+ padding: 1em;
+ color: rgb(51, 51, 51);
+ background: rgb(248, 248, 248);
+ font-size: 14px;
+ font-weight: 400;
+ letter-spacing: normal;
+ word-spacing: 0px;
+ border-radius: 5px;
+ margin: 0.9rem 0;
+ white-space: pre;
+}
+
+table {
+ width: 100% !important;
+ border-collapse: collapse;
+ line-height: 1.35;
+ font-size: 90%;
+}
+
+td {
+ border: 1px solid #ddd;
+ padding: 0.25em 0.5em;
+}
+
+th {
+ background: rgb(0 0 0 / 5%);
+ border: 1px solid #ddd;
+ padding: 0.25em 0.5em;
+}
+
+.code-highlight {
+ text-align: left;
+ font-family: Menlo, 'Operator Mono', Consolas, Monaco, monospace;
+ font-size: 14px;
+ margin: 0px;
+ white-space: nowrap;
+}
+
+.code-line {
+ display: block;
+ line-height: 1.3;
+}
+
+.code-spans {
+ text-align: left;
+ line-height: 1;
+ white-space: pre;
+ background: rgba(27, 31, 35, 0.05);
+ padding: 0.2rem 0.3rem;
+ border-radius: 4px;
+ font-weight: bold;
+}
+
+.footnotes-title {
+ display: table;
+ font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
+ 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
+ font-size: 1rem;
+ font-weight: bold;
+ margin: 3rem 0 0.6rem 0;
+ padding-left: 0.2rem;
+}
+
+.footnotes-list {
+ font-size: 12px;
+ font-style: italic;
+ line-height: 1.2;
+ margin: 0.4rem 0;
+}
+
+figure {
+ margin: 0;
+}
+
+.image-warpper {
+ text-align: center;
+ margin-bottom: 0rem;
+ visibility: visible;
+}
+
+.image {
+ display: initial;
+ max-width: 100%;
+}
+
+.comment {
+ color: #6a737d;
+}
+.property {
+ color: #6f42c1;
+}
+.function {
+ color: #6f42c1;
+}
+.keyword {
+ color: #d73a49;
+}
+.punctuation {
+ color: #0550ae;
+}
+.unit {
+ color: #0550ae;
+}
+.tag {
+ color: #22863a;
+}
+.selector {
+ color: #22863a;
+}
+.quote {
+ color: #22863a;
+}
+.number {
+ color: #005cc5;
+}
+.attr-name {
+ color: #005cc5;
+}
+.attr-value {
+ color: #005cc5;
+}
diff --git a/src/themes/default.md.css b/src/themes/default.md.css
index f0af72b..7a64cce 100644
--- a/src/themes/default.md.css
+++ b/src/themes/default.md.css
@@ -62,7 +62,6 @@ ol {
}
li {
- font-size: 16px;
margin: 0;
line-height: 26px;
color: rgb(30 41 59);
diff --git a/src/themes/simple.md.css b/src/themes/simple.md.css
index 87d4e1f..74b8764 100644
--- a/src/themes/simple.md.css
+++ b/src/themes/simple.md.css
@@ -62,7 +62,6 @@ ol {
}
li {
- font-size: 16px;
margin: 0;
line-height: 26px;
color: rgb(30 41 59);
diff --git a/src/themes/underscore.md.css b/src/themes/underscore.md.css
index 3db2b54..5135a6f 100644
--- a/src/themes/underscore.md.css
+++ b/src/themes/underscore.md.css
@@ -59,7 +59,6 @@ ol {
}
li {
- font-size: 16px;
margin: 0;
line-height: 26px;
color: rgb(30 41 59);