feat: add theme url parameter.

README.md

@@ -16,7 +16,7 @@
 - [x] 支持明暗两种主题预览。
 - [ ] 支持色盘取色，快速替换文章整体色调
 - [ ] 支持 URL 参数加载 Markdown 内容。
-- [ ] 支持 URL 参数选择编辑器和预览主题。
+- [x] 支持 URL 参数选择预览主题。
 
 ### 支持代码块样式
 
@@ -102,20 +102,20 @@ Inline Code `{code: 0}`
 
 ## 主题定制
 
-在目录 `src/themes` 中存放默认主题，主题使用 css 定义样式，不支持复杂的选择器。提供在线主题编辑器，欢迎修改并 PR 进仓库供大家使用。
+在目录 `src/themes` 中存放默认主题，在 `src/store/context.tsx` 中配置主题，主题使用 css 定义样式，不支持复杂的选择器。提供在线主题编辑器，欢迎修改并 PR 进仓库供大家使用。
 
 ```css
 /* 1~6 标题样式定义 */
 h1 {} h2 {} h3 {} h4 {} h5 {} h6 {}
 a { color: red; } /* 超链接样式定义 */
+strong {} /* 加粗样式定义 */
 del {} /* 删除线样式定义 */
 em {}  /* 下划线样式定义 */
-strong {} /* 加粗样式定义 */
+u {}   /* 下划线样式定义 */
-u {}    /* 下划线样式定义 */
+p {}   /* 段落样式定义 */
-p {}    /* 段落样式定义 */
+ul {}  /* 无序列表样式定义 */
-ul {}   /* 无序列表样式定义 */
+ol {}  /* 有序列表样式定义 */
-ol {}   /* 有序列表样式定义 */
+li {}  /* 列表条目样式定义 */
-li {}   /* 列表条目样式定义 */
 blockquote {} /* 块级引用样式定义 */
 table {}
 td {}

src/store/context.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useSearchParams } from 'react-router-dom';
 import { defaultTheme } from '@uiw/react-markdown-editor';
 import { abcdef } from '@uiw/codemirror-theme-abcdef';
 import { androidstudio } from '@uiw/codemirror-theme-androidstudio';
@@ -136,11 +137,19 @@ export const Context = React.createContext<CreateContext>({
 });
 
 export const Provider: React.FC<React.PropsWithChildren> = ({ children }) => {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const paramPreviewTheme = searchParams.get('theme') as PreviewThemeValue;
+  const initPreviewTheme = paramPreviewTheme || 'underscore';
   const [markdown, setMarkdown] = React.useState<string>(data.source);
-  const [css, setCss] = React.useState<string>(previewThemes['underscore'].value);
+  const [css, setCss] = React.useState<string>(previewThemes[initPreviewTheme].value);
-  const [previewTheme, setPreviewTheme] = React.useState<PreviewThemeValue>('underscore');
+  const [previewTheme, setPreviewTheme] = React.useState<PreviewThemeValue>(initPreviewTheme);
   const [theme, setTheme] = React.useState<ThemeValue>('default');
-
+  useEffect(() => {
+    if (paramPreviewTheme !== previewTheme) {
+      searchParams.set('theme', previewTheme);
+      setSearchParams(searchParams);
+    }
+  }, [paramPreviewTheme, previewTheme, searchParams, setSearchParams]);
   return (
     <Context.Provider
       value={{

src/themes/base.md.css

@@ -32,6 +32,7 @@ h4 {
 
 p {
   color: initial;
+  font-size: 0.85em;
 }
 
 ul {
@@ -44,12 +45,13 @@ ol {
 
 li {
   margin: 0;
+  font-size: 0.85em;
 }
 
 blockquote {
   font-style: normal;
   border-left: none;
-  margin: 1rem 0;
+  margin: 1em 0;
 }
 
 pre {
@@ -58,7 +60,7 @@ pre {
   padding: 1em;
   color: rgb(51, 51, 51);
   background: rgb(248, 248, 248);
-  font-size: 14px;
+  font-size: 0.85em;
   font-weight: 400;
   letter-spacing: normal;
   word-spacing: 0px;
@@ -71,7 +73,7 @@ table {
   width: 100% !important;
   border-collapse: collapse;
   line-height: 1.35;
-  font-size: 90%;
+  font-size: 0.85em;
 }
 
 td {
@@ -88,7 +90,7 @@ th {
 .code-highlight {
   text-align: left;
   font-family: Menlo, 'Operator Mono', Consolas, Monaco, monospace;
-  font-size: 14px;
+  font-size: 0.85em;
   margin: 0px;
   white-space: nowrap;
 }
@@ -103,23 +105,24 @@ th {
   line-height: 1;
   white-space: pre;
   background: rgba(27, 31, 35, 0.05);
-  padding: 0.2rem 0.3rem;
+  padding: 0.2em 0.6em;
-  border-radius: 4px;
+  border-radius: 0.6em;
   font-weight: bold;
+  font-size: 0.45em;
 }
 
 .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-size: 1em;
   font-weight: bold;
   margin: 3rem 0 0.6rem 0;
   padding-left: 0.2rem;
 }
 
 .footnotes-list {
-  font-size: 12px;
+  font-size: 0.75em;
   font-style: italic;
   line-height: 1.2;
   margin: 0.4rem 0;

src/themes/default.md.css

@@ -102,7 +102,7 @@ pre {
   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;
+  border-radius: 0.3em;
   margin: 0.9rem 0;
   white-space: pre;
 }
@@ -145,10 +145,10 @@ th {
   white-space: pre;
   color: #009874;
   background: rgba(27, 31, 35, 0.05);
-  padding: 0.2em 0.3em;
+  padding: 0.2em 0.6em;
-  border-radius: 4px;
+  border-radius: 0.6em;
   font-weight: bold;
-  font-size: 0.85em;
+  font-size: 0.45em;
 }
 
 .footnotes-title {
@@ -162,7 +162,7 @@ th {
 }
 
 .footnotes-list {
-  font-size: 12px;
+  font-size: 0.75em;
   font-style: italic;
   line-height: 1.2;
   margin: 0.4rem 0;

src/themes/simple.md.css

@@ -102,7 +102,7 @@ pre {
   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;
+  border-radius: 0.3em;
   margin: 0.9rem 0;
   white-space: pre;
 }
@@ -145,10 +145,10 @@ th {
   white-space: pre;
   color: #0f4c81;
   background: rgba(27, 31, 35, 0.05);
-  padding: 0.2rem 0.3rem;
+  padding: 0.2em 0.6em;
-  border-radius: 4px;
+  border-radius: 0.6em;
   font-weight: bold;
-  font-size: 0.85em;
+  font-size: 0.45em;
 }
 
 .footnotes-title {
@@ -162,7 +162,7 @@ th {
 }
 
 .footnotes-list {
-  font-size: 12px;
+  font-size: 0.75em;
   font-style: italic;
   line-height: 1.2;
   margin: 0.4rem 0;

src/themes/underscore.md.css

@@ -99,7 +99,7 @@ pre {
   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;
+  border-radius: 0.3em;
   margin: 0.9rem 0;
   white-space: pre;
 }
@@ -142,10 +142,10 @@ th {
   white-space: pre;
   color: #ffb11b;
   background: rgba(27, 31, 35, 0.05);
-  padding: 0.2em 0.3em;
+  padding: 0.2em 0.6em;
-  border-radius: 4px;
+  border-radius: 0.6em;
   font-weight: bold;
-  font-size: 0.85em;
+  font-size: 0.45em;
 }
 
 .footnotes-title {
@@ -159,7 +159,7 @@ th {
 }
 
 .footnotes-list {
-  font-size: 12px;
+  font-size: 0.75em;
   font-style: italic;
   line-height: 1.2;
   margin: 0.4rem 0;