diff --git a/README.md b/README.md index 87936fa..d2616b4 100644 --- a/README.md +++ b/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 {} /* 下划线样式定义 */ -p {} /* 段落样式定义 */ -ul {} /* 无序列表样式定义 */ -ol {} /* 有序列表样式定义 */ -li {} /* 列表条目样式定义 */ +u {} /* 下划线样式定义 */ +p {} /* 段落样式定义 */ +ul {} /* 无序列表样式定义 */ +ol {} /* 有序列表样式定义 */ +li {} /* 列表条目样式定义 */ blockquote {} /* 块级引用样式定义 */ table {} td {} diff --git a/src/store/context.tsx b/src/store/context.tsx index 4e8c351..00fde78 100644 --- a/src/store/context.tsx +++ b/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({ }); export const Provider: React.FC = ({ children }) => { + const [searchParams, setSearchParams] = useSearchParams(); + const paramPreviewTheme = searchParams.get('theme') as PreviewThemeValue; + const initPreviewTheme = paramPreviewTheme || 'underscore'; const [markdown, setMarkdown] = React.useState(data.source); - const [css, setCss] = React.useState(previewThemes['underscore'].value); - const [previewTheme, setPreviewTheme] = React.useState('underscore'); + const [css, setCss] = React.useState(previewThemes[initPreviewTheme].value); + const [previewTheme, setPreviewTheme] = React.useState(initPreviewTheme); const [theme, setTheme] = React.useState('default'); - + useEffect(() => { + if (paramPreviewTheme !== previewTheme) { + searchParams.set('theme', previewTheme); + setSearchParams(searchParams); + } + }, [paramPreviewTheme, previewTheme, searchParams, setSearchParams]); return (