feat: add documemt.

README.md

@@ -66,13 +66,20 @@ Inline Code `{code: 0}`
 
 ### 支持注释
 
+```html
 <ruby>
-  汉 <rp></rp><rt>Han</rt><rp></rp>
+  汉 <rt>Han</rt>
-  字 <rp></rp><rt>zi</rt><rp></rp>
+</ruby>
-  拼 <rp></rp><rt>pin</rt><rp></rp>
+```
-  音 <rp></rp><rt>yin</rt><rp></rp>
+
-  注 <rp></rp><rt>zhu</rt><rp></rp>
+汉字注音效果：
-  音 <rp></rp><rt>yin</rt><rp></rp>
+<ruby>
+  汉 <rt>Han</rt>
+  字 <rt>zi</rt>
+  拼 <rt>pin</rt>
+  音 <rt>yin</rt>
+  注 <rt>zhu</rt>
+  音 <rt>yin</rt>
 </ruby>
 
 ### 支持自定义样式
@@ -100,6 +107,20 @@ Inline Code `{code: 0}`
 <!--rehype:ignore:start-->内容在微信 Markdown 编辑器预览中不显示。在其它预览工具中展示内容。<!--rehype:ignore:end-->
 ```
 
+### 支持 URL 参数加载 Markdown 内容
+
+```
+https://<URL>?md=<Markdown 资源 URL>
+```
+
+加载 Markdown 内容的示例 URL：
+
+```
+https://jaywcjlove.github.io/wxmp/#/?theme=underscore&md=https%3A%2F%2Fraw.githubusercontent.com%2Fuiwjs%2Freact-markdown-editor%2Fmaster%2FREADME.md
+
+Markdown URL 地址: https://raw.githubusercontent.com/uiwjs/react-markdown-editor/master/README.md
+```
+
 ## 主题定制
 
 在目录 `src/themes` 中存放默认主题，在 `src/store/context.tsx` 中配置主题，主题使用 css 定义样式，不支持复杂的选择器。提供在线主题编辑器，欢迎修改并 PR 进仓库供大家使用。

src/App.tsx

@@ -2,6 +2,7 @@ import { Routes, Route } from 'react-router-dom';
 import { Layout } from './components/Layout';
 import { HomePage } from './pages/home';
 import { EditorPage } from './pages/theme/editor';
+import { DocsPage } from './pages/docs';
 
 export default function App() {
   return (
@@ -9,6 +10,7 @@ export default function App() {
       <Route path="/" element={<Layout />}>
         <Route index element={<HomePage />} />
         <Route path="/editor/theme" element={<EditorPage />} />
+        <Route path="/doc" element={<DocsPage />} />
       </Route>
     </Routes>
   );

src/components/Layout.tsx

@@ -88,6 +88,7 @@ export function Layout() {
         <Section>
           <NavLink to="/">首页</NavLink>
           <NavLink to="/editor/theme">编辑主题</NavLink>
+          <NavLink to="/doc">文档</NavLink>
           <dark-mode permanent dark="Dark" light="Light" />
           <a href="https://github.com/jaywcjlove/wxmp" target="__blank">
             <GithubIcon width={23} height={23} />

src/index.tsx

@@ -52,12 +52,14 @@ export const GlobalStyle = createGlobalStyle`
   }
 `;
 
+const style: React.CSSProperties = { zIndex: 999 };
+
 const container = document.getElementById('root');
 const root = createRoot(container!);
 root.render(
   <HashRouter>
     <Toaster />
-    <BackToUp>Top</BackToUp>
+    <BackToUp style={style}>Top</BackToUp>
     <GlobalStyle />
     <Provider>
       <App />

src/pages/docs/index.tsx

@@ -0,0 +1,17 @@
+import MarkdownEditor from '@uiw/react-markdown-editor';
+import styled from 'styled-components';
+import data from '../../../README.md';
+
+const Warpper = styled.div`
+  max-width: 59rem;
+  margin: 0 auto 0 auto;
+  padding: 0 1rem 3rem 1rem;
+`;
+
+export const DocsPage = () => {
+  return (
+    <Warpper>
+      <MarkdownEditor.Markdown source={data.source} />
+    </Warpper>
+  );
+};

src/pages/home/index.tsx

@@ -8,7 +8,7 @@ import { theme as themeCommand, previeTheme } from '../../commands/theme';
 import { cssCommand } from '../../commands/css';
 import { Context, themes } from '../../store/context';
 
-const Warpper = styled.div`
+export const Warpper = styled.div`
   height: calc(100vh - 2.9rem);
 `;
 

src/pages/theme/editor.tsx

@@ -1,7 +1,6 @@
 import MarkdownEditor, { IMarkdownEditor } from '@uiw/react-markdown-editor';
 import { useContext } from 'react';
 import { EditorView } from '@codemirror/view';
-import styled from 'styled-components';
 import { css as cssLang } from '@codemirror/lang-css';
 import { Preview } from './Preview';
 import { copy } from '../../commands/copy';
@@ -9,10 +8,7 @@ import { previousCommand } from '../../commands/css';
 import { themeTitle } from '../../commands/title';
 import { theme as themeCommand, previeTheme } from '../../commands/theme';
 import { Context, themes } from '../../store/context';
-
+import { Warpper } from '../home';
-const Warpper = styled.div`
-  height: calc(100vh - 2.9rem);
-`;
 
 export const EditorPage = () => {
   const commands = [themeTitle, themeCommand, previousCommand];