feat: add preview themes.

2026-01-10 15:28:47 +08:00 · 2022-09-03 01:11:22 +08:00
parent d007e11f20
commit 0580011f7b
11 changed files with 858 additions and 251 deletions
--- a/README.md
+++ b/README.md
@@ -14,7 +14,7 @@

 - [x] 支持 Markdown 所有基础语法
 - [x] 支持自定义 CSS 样式
- [ ] 支持主题选择 & 配置。
+- [x] 支持主题选择 & 配置。
 - [x] 支持明暗两种主题预览。
 - [ ] 支持色盘取色，快速替换文章整体色调

@@ -100,6 +100,54 @@ Inline Code `{code: 0}`
 <!--rehype:ignore:start-->内容在微信 Markdown 编辑器预览中不显示。在其它预览工具中展示内容。<!--rehype:ignore:end-->
 ```

+## 主题定制
+
+在目录 `src/themes` 中存放默认主题，主题使用 css 定义样式，不支持复杂的选择器。
+
+```css
+/* 1~6 标题样式定义 */
+h1 {} h2 {} h3 {} h4 {} h5 {} h6 {}
+a { color: red; } /* 超链接样式定义 */
+del {} /* 删除线样式定义 */
+em {}  /* 下划线样式定义 */
+strong {} /* 加粗样式定义 */
+u {}    /* 下划线样式定义 */
+p {}    /* 段落样式定义 */
+ul {}   /* 无序列表样式定义 */
+ol {}   /* 有序列表样式定义 */
+li {}   /* 列表条目样式定义 */
+blockquote {} /* 块级引用样式定义 */
+table {}
+td {}
+th {}
+pre {}        /* 样式定义 */
+.code-highlight {} /* 代码块样式定义 */
+.code-line {}      /* 代码块行样式定义 */
+.code-spans {}     /* 代码块行样式定义 */
+
+sup {} /* GFM 脚注样式定义 */
+.footnotes-title {} /* GFM 脚注，参考标题样式定义 */
+.footnotes-list {} /* GFM 脚注，参考列表样式定义 */
+
+.image-warpper {} /* 图片父节点样式定义 */
+.image {} /* 图片样式定义 */
+
+/* 部分代码高亮样式 */
+.comment {}
+.property {}
+.function {}
+.keyword {}
+.punctuation {}
+.unit {}
+.tag {}
+.color {}
+.selector {}
+.quote {}
+.number {}
+.attr-name {}
+.attr-value {}
+```
+
 ## 部署

 [![Docker Image Version (latest by date)](https://img.shields.io/docker/v/wcjiang/wxmp?logo=docker)](https://hub.docker.com/r/wcjiang/wxmp) [![Docker Image Size (latest by date)](https://img.shields.io/docker/image-size/wcjiang/wxmp?logo=docker)](https://hub.docker.com/r/wcjiang/wxmp) [![Docker Pulls](https://img.shields.io/docker/pulls/wcjiang/wxmp?logo=docker)](https://hub.docker.com/r/wcjiang/wxmp)
--- a/package.json
+++ b/package.json
@@ -27,8 +27,7 @@
    "@uiw/codemirror-theme-xcode": "^4.11.6",
    "@uiw/react-back-to-top": "^1.2.0",
    "@uiw/react-github-corners": "^1.5.15",
-    "@uiw/react-markdown-editor": "^5.3.2",
-    "@uiw/react-markdown-preview": "^4.1.0",
+    "@uiw/react-markdown-editor": "^5.5.1",
    "@wcj/dark-mode": "^1.0.15",
    "css-tree": "^2.2.1",
    "react": "^18.2.0",
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -48,7 +48,9 @@ const Section = styled.section`
  align-items: center;
  gap: 0.8rem;
  dark-mode {
-    font-size: 1.2rem;
+    font-size: 1.05rem;
+    display: block;
+    line-height: 12px;
  }
  a svg {
    display: block;
--- a/src/conf/default.md.css
+++ b/src/conf/default.md.css
@@ -1,195 +0,0 @@
-a {
-  color: #576b95;
-  text-decoration: none;
-  font-size: 14px;
-}
-
-h1 {
-  text-align:center;
-  color:#3f3f3f;
-  line-height:1.75;
-  font-family:-apple-system-font,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei",Arial,sans-serif;
-  font-size:1.2em;
-  font-weight:bold;
-  display:table;
-  margin:2em auto 1em;
-  padding:0 1em;
-  border-bottom:2px solid #009874;
-  margin-top: 0;
-}
-
-h2 {
-  text-align:center;
-  color:#fff;
-  line-height:1.75;
-  font-family:-apple-system-font,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei",Arial,sans-serif;
-  font-size:1.2em;
-  font-weight:bold;
-  display:table;
-  margin:4em auto 2em;
-  padding:0 0.3em;
-  border-radius: 0.3rem;
-  background:#009874;
-}
-
-p {
-  font-size: 14px;
-}
-
-h3 {
-  text-align:left;
-  color:#3f3f3f;
-  line-height:1.2;
-  font-family:-apple-system-font,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei",Arial,sans-serif;
-  font-size:1.1em;
-  font-weight:bold;
-  margin:2em 8px 0.75em 0;
-  padding-left:8px;
-  border-left:3px solid #009874;
-}
-
-ul {
-  padding-left: 1.2em;
-  font-size: 14px;
-}
-
-ol {
-  padding-left: 1.2em;
-  font-size: 14px;
-}
-
-li {
-  font-size: 16px;
-  margin: 0;
-  line-height: 26px;
-  color: rgb(30 41 59);
-  font-size: 14px;
-}
-
-blockquote {
-  text-align:left;
-  line-height:1.75;
-  font-family:-apple-system-font,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei",Arial,sans-serif;
-  font-size:14px;
-  font-style:normal;
-  border-left:none;
-  padding:0.1rem 1rem;
-  border-radius:4px;
-  background:rgba(27,31,35,.05);
-  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-style: normal;
-  font-variant-ligatures: normal;
-  font-variant-caps: normal;
-  font-weight: 400;
-  letter-spacing: normal;
-  orphans: 2;
-  text-indent: 0px;
-  text-transform: none;
-  widows: 2;
-  word-spacing: 0px;
-  text-decoration-style: initial;
-  text-decoration-color: initial;
-  text-align: left;
-  line-height: 1.5;
-  font-family: -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;
-  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;
-  line-height: 1.75;
-  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;
-  color: #009874;
-  background:rgba(27,31,35,.05);
-  padding: 0.2rem 0.3rem;
-  border-radius:4px;
-  font-weight: bold;
-  font-size: 14px;
-}
-
-.footnotes-title {
-  font-family:-apple-system-font,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei",Arial,sans-serif;
-  font-size:1.0rem;
-  font-weight:bold;
-  display:table;
-  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; }
--- a/src/pages/home/Preview.tsx
+++ b/src/pages/home/Preview.tsx
@@ -1,6 +1,7 @@
 import { MarkdownPreviewProps } from '@uiw/react-markdown-preview';
 import styled from 'styled-components';
-import def from '../../conf/default.md.css';
+import { useContext } from 'react';
+import { Context, previewThemes } from '../../store/context';

 import { markdownToHTML } from '../../utils/markdownToHTML';

@@ -11,7 +12,8 @@ const Warpper = styled.div`
  min-height: 100%;
 `;

-export const Preview = (props: MarkdownPreviewProps, visible: boolean) => {
-  const html = markdownToHTML(props.source || '', def);
+export const Preview = (props: MarkdownPreviewProps) => {
+  const { css } = useContext(Context);
+  const html = markdownToHTML(props.source || '', previewThemes[css].value);
  return <Warpper dangerouslySetInnerHTML={{ __html: html }} />;
 };
--- a/src/pages/home/index.tsx
+++ b/src/pages/home/index.tsx
@@ -4,7 +4,7 @@ import { EditorView } from '@codemirror/view';
 import styled from 'styled-components';
 import { Preview } from './Preview';
 import { copy } from './copy';
-import { theme as themeCommand } from './theme';
+import { theme as themeCommand, previeTheme } from './theme';
 import { Context, themes } from '../../store/context';
 import data from '../../../README.md';

@@ -15,13 +15,14 @@ const Warpper = styled.div`
 export const HomePage = () => {
  const commands = [...getCommands(), themeCommand];
  const { theme } = useContext(Context);
+  const value = themes[theme].value;
  return (
    <Warpper>
      <MarkdownEditor
        value={data.source}
        toolbars={commands}
-        theme={themes[theme]}
-        toolbarsMode={[copy, 'preview', 'fullscreen']}
+        theme={value}
+        toolbarsMode={[previeTheme, copy, 'preview', 'fullscreen']}
        extensions={[EditorView.lineWrapping]}
        renderPreview={Preview}
        visible={true}
--- a/src/pages/home/theme.tsx
+++ b/src/pages/home/theme.tsx
@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import { ICommand, IMarkdownEditor, ToolBarProps } from '@uiw/react-markdown-editor';
 import styled from 'styled-components';
-import { Context } from '../../store/context';
+import { Context, previewThemes, PreviewThemeValue, themes as editorThemes, ThemeValue } from '../../store/context';

 const Select = styled.select`
  max-width: 4rem;
@@ -11,7 +11,6 @@ const Select = styled.select`
  border: none;
  padding: 0 0.2rem 0 0.2rem;
  margin: 0;
-  width: 100%;
  font-family: inherit;
  font-size: 0.3rem;
  outline: none;
@@ -29,22 +28,13 @@ const ThemeView: React.FC<{ command: ICommand; editorProps: IMarkdownEditor & To
  const handleChange = (ev: React.ChangeEvent<HTMLSelectElement>) => setTheme(ev.target.value as any);
  return (
    <Select value={theme} onChange={handleChange}>
-      <option value="abcdef">Abcdef Theme</option>
-      <option value="androidstudio">Android Studio Theme</option>
-      <option value="atomone">Atomone Theme</option>
-      <option value="bbedit">Bbedit Theme</option>
-      <option value="bespin">Bespin Theme</option>
-      <option value="darcula">Darcula Theme</option>
-      <option value="dracula">Dracula Theme</option>
-      <option value="duotoneLight">Duotone Light Theme</option>
-      <option value="duotoneDark">Duotone Dark Theme</option>
-      <option value="eclipse">Eclipse Theme</option>
-      <option value="githubLight">Github Light Theme</option>
-      <option value="githubDark">Github Dark Theme</option>
-      <option value="okaidia">Okaidia Theme</option>
-      <option value="sublime">Sublime Theme</option>
-      <option value="xcodeLight">Xcode Light Theme</option>
-      <option value="xcodeDark">Xcode Dark Theme</option>
+      {(Object.keys(editorThemes) as Array<ThemeValue>).map((name, key) => {
+        return (
+          <option key={key} value={name}>
+            {editorThemes[name].label}
+          </option>
+        );
+      })}
    </Select>
  );
 };
@@ -53,10 +43,26 @@ export const theme: ICommand = {
  name: 'theme',
  keyCommand: 'theme',
  button: (command, props, opts) => <ThemeView command={command} editorProps={{ ...props, ...opts }} />,
-  icon: (
-    <svg fill="currentColor" viewBox="0 0 24 24" height="16" width="16">
-      <path d="M20 2H10a2 2 0 0 0-2 2v2h8a2 2 0 0 1 2 2v8h2a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z" />
-      <path d="M4 22h10c1.103 0 2-.897 2-2V10c0-1.103-.897-2-2-2H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2zm2-10h6v2H6v-2zm0 4h6v2H6v-2z" />
-    </svg>
-  ),
+};
+
+const ThemePreviewView: React.FC<{}> = () => {
+  const { css, setCss } = useContext(Context);
+  const handleChange = (ev: React.ChangeEvent<HTMLSelectElement>) => setCss(ev.target.value as any);
+  return (
+    <Select value={css} onChange={handleChange}>
+      {(Object.keys(previewThemes) as Array<PreviewThemeValue>).map((name, key) => {
+        return (
+          <option value={name} key={key}>
+            {previewThemes[name].label}
+          </option>
+        );
+      })}
+    </Select>
+  );
+};
+
+export const previeTheme: ICommand = {
+  name: 'previewTtheme',
+  keyCommand: 'previewTtheme',
+  button: () => <ThemePreviewView />,
 };
--- a/src/store/context.tsx
+++ b/src/store/context.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { defaultTheme } from '@uiw/react-markdown-editor';
 import { abcdef } from '@uiw/codemirror-theme-abcdef';
 import { androidstudio } from '@uiw/codemirror-theme-androidstudio';
 import { atomone } from '@uiw/codemirror-theme-atomone';
@@ -12,45 +13,116 @@ import { githubLight, githubDark } from '@uiw/codemirror-theme-github';
 import { okaidia } from '@uiw/codemirror-theme-okaidia';
 import { sublime } from '@uiw/codemirror-theme-sublime';
 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';

 export const themes = {
-  abcdef,
-  androidstudio,
-  atomone,
-  bbedit,
-  bespin,
-  darcula,
-  dracula,
-  duotoneLight,
-  duotoneDark,
-  eclipse,
-  githubLight,
-  githubDark,
-  okaidia,
-  sublime,
-  xcodeLight,
-  xcodeDark,
+  default: {
+    label: '默认主题',
+    value: defaultTheme,
+  },
+  abcdef: {
+    label: 'Abcdef Theme',
+    value: abcdef,
+  },
+  androidstudio: {
+    label: 'Android Studio Theme',
+    value: androidstudio,
+  },
+  atomone: {
+    label: 'Atomone Theme',
+    value: atomone,
+  },
+  bbedit: {
+    label: 'Bbedit Theme',
+    value: bbedit,
+  },
+  bespin: {
+    label: 'Bespin Theme',
+    value: bespin,
+  },
+  darcula: {
+    label: 'Darcula Theme',
+    value: darcula,
+  },
+  dracula: {
+    label: 'Dracula Theme',
+    value: dracula,
+  },
+  duotoneLight: {
+    label: 'Duotone Light Theme',
+    value: duotoneLight,
+  },
+  duotoneDark: {
+    label: 'Duotone Dark Theme',
+    value: duotoneDark,
+  },
+  eclipse: {
+    label: 'Eclipse Theme',
+    value: eclipse,
+  },
+  githubLight: {
+    label: 'Github Light Theme',
+    value: githubLight,
+  },
+  githubDark: {
+    label: 'Github Dark Theme',
+    value: githubDark,
+  },
+  okaidia: {
+    label: 'Okaidia Theme',
+    value: okaidia,
+  },
+  sublime: {
+    label: 'Sublime Theme',
+    value: sublime,
+  },
+  xcodeLight: {
+    label: 'Xcode Light Theme',
+    value: xcodeLight,
+  },
+  xcodeDark: {
+    label: 'Xcode Dark Theme',
+    value: xcodeDark,
+  },
+};
+
+export const previewThemes = {
+  default: {
+    label: '翡翠绿',
+    value: defStyle,
+  },
+  simple: {
+    label: '简洁蓝',
+    value: simpleStyle,
+  },
+  underscore: {
+    label: '下划线黄',
+    value: underscoreStyle,
+  },
 };

 export type ThemeValue = keyof typeof themes;
+export type PreviewThemeValue = keyof typeof previewThemes;

 export interface CreateContext {
-  css: string;
-  setCss: React.Dispatch<React.SetStateAction<string>>;
+  css: PreviewThemeValue;
+  setCss: React.Dispatch<React.SetStateAction<PreviewThemeValue>>;
  theme: ThemeValue;
  setTheme: React.Dispatch<React.SetStateAction<ThemeValue>>;
 }

 export const Context = React.createContext<CreateContext>({
-  css: '',
+  css: 'default',
  setCss: () => {},
-  theme: 'githubLight',
+  theme: 'default',
  setTheme: () => {},
 });

 export const Provider: React.FC<React.PropsWithChildren> = ({ children }) => {
-  const [css, setCss] = React.useState('');
-  const [theme, setTheme] = React.useState<ThemeValue>('githubLight');
+  const [css, setCss] = React.useState<PreviewThemeValue>('underscore');
+  const [theme, setTheme] = React.useState<ThemeValue>('default');

  return (
    <Context.Provider
--- a/src/themes/default.md.css
+++ b/src/themes/default.md.css
@@ -0,0 +1,225 @@
+a {
+  color: #576b95;
+  text-decoration: none;
+  font-size: 14px;
+}
+
+h1 {
+  text-align: center;
+  color: #3f3f3f;
+  line-height: 1.75;
+  font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
+    'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
+  font-size: 1.2em;
+  font-weight: bold;
+  display: table;
+  margin: 2em auto 1em;
+  padding: 0 1em;
+  border-bottom: 2px solid #009874;
+  margin-top: 0;
+}
+
+h2 {
+  text-align: center;
+  color: #fff;
+  line-height: 1.75;
+  font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
+    'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
+  font-size: 1.2em;
+  font-weight: bold;
+  display: table;
+  margin: 4em auto 2em;
+  padding: 0 0.3em;
+  border-radius: 0.3rem;
+  background: #009874;
+}
+
+p {
+  font-size: 14px;
+}
+
+h3 {
+  text-align: left;
+  color: #3f3f3f;
+  line-height: 1.2;
+  font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
+    'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
+  font-size: 1.1em;
+  font-weight: bold;
+  margin: 2em 8px 0.75em 0;
+  padding-left: 8px;
+  border-left: 3px solid #009874;
+}
+
+ul {
+  padding-left: 1.2em;
+  font-size: 14px;
+}
+
+ol {
+  padding-left: 1.2em;
+  font-size: 14px;
+}
+
+li {
+  font-size: 16px;
+  margin: 0;
+  line-height: 26px;
+  color: rgb(30 41 59);
+  font-size: 14px;
+}
+
+blockquote {
+  text-align: left;
+  line-height: 1.75;
+  font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
+    'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  border-left: none;
+  padding: 0.1rem 1rem;
+  border-radius: 4px;
+  background: rgba(27, 31, 35, 0.05);
+  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-style: normal;
+  font-variant-ligatures: normal;
+  font-variant-caps: normal;
+  font-weight: 400;
+  letter-spacing: normal;
+  orphans: 2;
+  text-indent: 0px;
+  text-transform: none;
+  widows: 2;
+  word-spacing: 0px;
+  text-decoration-style: initial;
+  text-decoration-color: initial;
+  text-align: left;
+  line-height: 1.5;
+  font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
+    'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
+  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;
+  line-height: 1.75;
+  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;
+  color: #009874;
+  background: rgba(27, 31, 35, 0.05);
+  padding: 0.2rem 0.3rem;
+  border-radius: 4px;
+  font-weight: bold;
+  font-size: 14px;
+}
+
+.footnotes-title {
+  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;
+  display: table;
+  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;
+}
--- a/src/themes/simple.md.css
+++ b/src/themes/simple.md.css
@@ -0,0 +1,225 @@
+a {
+  color: #576b95;
+  text-decoration: none;
+  font-size: 14px;
+}
+
+h1 {
+  text-align: center;
+  color: #3f3f3f;
+  line-height: 1.75;
+  font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
+    'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
+  font-size: 1.2em;
+  font-weight: bold;
+  display: table;
+  margin: 2em auto 1em;
+  padding: 0 1em;
+  border-bottom: 2px solid #0f4c81;
+  margin-top: 0;
+}
+
+h2 {
+  text-align: center;
+  color: #fff;
+  line-height: 1.75;
+  font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
+    'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
+  font-size: 1.2em;
+  font-weight: bold;
+  display: table;
+  margin: 4em auto 2em;
+  padding: 0 0.3em;
+  border-radius: 0.3rem;
+  background: #0f4c81;
+}
+
+p {
+  font-size: 14px;
+}
+
+h3 {
+  text-align: left;
+  color: #3f3f3f;
+  line-height: 1.2;
+  font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
+    'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
+  font-size: 1.1em;
+  font-weight: bold;
+  margin: 2em 8px 0.75em 0;
+  padding-left: 8px;
+  border-left: 3px solid #0f4c81;
+}
+
+ul {
+  padding-left: 1.2em;
+  font-size: 14px;
+}
+
+ol {
+  padding-left: 1.2em;
+  font-size: 14px;
+}
+
+li {
+  font-size: 16px;
+  margin: 0;
+  line-height: 26px;
+  color: rgb(30 41 59);
+  font-size: 14px;
+}
+
+blockquote {
+  text-align: left;
+  line-height: 1.75;
+  font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
+    'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  border-left: none;
+  padding: 0.1rem 1rem;
+  border-radius: 4px;
+  background: rgba(27, 31, 35, 0.05);
+  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-style: normal;
+  font-variant-ligatures: normal;
+  font-variant-caps: normal;
+  font-weight: 400;
+  letter-spacing: normal;
+  orphans: 2;
+  text-indent: 0px;
+  text-transform: none;
+  widows: 2;
+  word-spacing: 0px;
+  text-decoration-style: initial;
+  text-decoration-color: initial;
+  text-align: left;
+  line-height: 1.5;
+  font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
+    'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
+  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;
+  line-height: 1.75;
+  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;
+  color: #0f4c81;
+  background: rgba(27, 31, 35, 0.05);
+  padding: 0.2rem 0.3rem;
+  border-radius: 4px;
+  font-weight: bold;
+  font-size: 14px;
+}
+
+.footnotes-title {
+  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;
+  display: table;
+  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;
+}
--- a/src/themes/underscore.md.css
+++ b/src/themes/underscore.md.css
@@ -0,0 +1,222 @@
+a {
+  color: #576b95;
+  text-decoration: none;
+  font-size: 14px;
+}
+
+h1 {
+  text-align: center;
+  color: #3f3f3f;
+  line-height: 1.15;
+  font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
+    'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
+  font-size: 1.3em;
+  font-weight: bold;
+  display: table;
+  margin: 2em auto 1em;
+  padding: 0 1em 0.3em 1em;
+  margin-top: 0;
+  box-shadow: inset 0 -0.9rem 0 0 #ffb11b;
+}
+
+h2 {
+  line-height: 1.35;
+  font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
+    'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
+  font-size: 1.2em;
+  font-weight: bold;
+  display: table;
+  padding: 0 0.3em;
+  margin: 2em 0 1em 0;
+  box-shadow: inset 0 -0.7rem 0 0 #ffb11b;
+}
+
+p {
+  font-size: 14px;
+}
+
+h3 {
+  text-align: left;
+  color: #3f3f3f;
+  line-height: 1.2;
+  font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
+    'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
+  font-size: 1.1em;
+  font-weight: bold;
+  margin: 2em 8px 0.75em 0;
+  padding-left: 8px;
+  border-left: 5px solid #ffb11b;
+}
+
+ul {
+  padding-left: 1.2em;
+  font-size: 14px;
+}
+
+ol {
+  padding-left: 1.2em;
+  font-size: 14px;
+}
+
+li {
+  font-size: 16px;
+  margin: 0;
+  line-height: 26px;
+  color: rgb(30 41 59);
+  font-size: 14px;
+}
+
+blockquote {
+  text-align: left;
+  line-height: 1.75;
+  font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
+    'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  border-left: none;
+  padding: 0.1rem 1rem;
+  border-radius: 4px;
+  background: rgba(27, 31, 35, 0.05);
+  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-style: normal;
+  font-variant-ligatures: normal;
+  font-variant-caps: normal;
+  font-weight: 400;
+  letter-spacing: normal;
+  orphans: 2;
+  text-indent: 0px;
+  text-transform: none;
+  widows: 2;
+  word-spacing: 0px;
+  text-decoration-style: initial;
+  text-decoration-color: initial;
+  text-align: left;
+  line-height: 1.5;
+  font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
+    'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
+  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;
+  line-height: 1.75;
+  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;
+  color: #ffb11b;
+  background: rgba(27, 31, 35, 0.05);
+  padding: 0.2rem 0.3rem;
+  border-radius: 4px;
+  font-weight: bold;
+  font-size: 14px;
+}
+
+.footnotes-title {
+  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;
+  display: table;
+  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;
+}