feat: add base theme.

README.md

@@ -6,7 +6,7 @@
 
 ![](https://user-images.githubusercontent.com/1680273/187980169-e648f2a4-41f0-496f-8450-7f5ffc255059.png)
 
-微信公众号文章 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 标题样式定义 */

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 <Warpper dangerouslySetInnerHTML={{ __html: html }} />;
+  return <Warpper contentEditable dangerouslySetInnerHTML={{ __html: html }} />;
 };

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 <Warpper dangerouslySetInnerHTML={{ __html: html }} />;
+  return <Warpper contentEditable dangerouslySetInnerHTML={{ __html: html }} />;
 };

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;

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;
+}

src/themes/default.md.css

@@ -62,7 +62,6 @@ ol {
 }
 
 li {
-  font-size: 16px;
   margin: 0;
   line-height: 26px;
   color: rgb(30 41 59);

src/themes/simple.md.css

@@ -62,7 +62,6 @@ ol {
 }
 
 li {
-  font-size: 16px;
   margin: 0;
   line-height: 26px;
   color: rgb(30 41 59);

src/themes/underscore.md.css

@@ -59,7 +59,6 @@ ol {
 }
 
 li {
-  font-size: 16px;
   margin: 0;
   line-height: 26px;
   color: rgb(30 41 59);