chore: css preview

imzbf · May 8, 2022 · 9c967a6 · 9c967a6
1 parent e9f1755
commit 9c967a6
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 23 deletions.
diff --git a/dev/App.tsx b/dev/App.tsx
@@ -8,13 +8,29 @@ export type Theme = 'dark' | 'light';
 
 export default defineComponent({
   setup() {
-    const theme = ref<Theme>('dark');
+    const theme = ref<Theme>('light');
+    const previewTheme = ref<string>('default');
+    const codeCssName = ref<string>('gradient');
 
     return () => (
       <div class={['app', theme.value === 'dark' && 'theme-dark']}>
-        <Header theme={theme.value} onChange={(v: Theme) => (theme.value = v)} />
+        {codeCssName.value}
+        <Header
+          theme={theme.value}
+          onChange={(v: Theme) => (theme.value = v)}
+          onPreviewChange={(pt: string) => {
+            previewTheme.value = pt;
+          }}
+          onCodeCssNameChange={(ct: string) => {
+            codeCssName.value = ct;
+          }}
+        />
         <div class="page-body">
-          <Preview theme={theme.value} />
+          <Preview
+            theme={theme.value}
+            previewTheme={previewTheme.value}
+            codeCssName={codeCssName.value}
+          />
         </div>
       </div>
     );

diff --git a/dev/Header/index.less b/dev/Header/index.less
@@ -2,12 +2,14 @@
 
 .page-header {
   color: @colorReverse;
-  padding: 5rem 6rem;
+  padding: 1rem 6rem;
   text-align: center;
   background-color: #159957;
   background-image: linear-gradient(120deg, #155799, #159957);
 
   .header-actions {
+    margin-bottom: 10px;
+
     .btn-header {
       font-size: 1rem;
       font-family: inherit;

diff --git a/dev/Header/index.tsx b/dev/Header/index.tsx
@@ -8,27 +8,96 @@ export default defineComponent({
     onChange: {
       type: Function as PropType<(v: Theme) => void>,
       default: () => {}
+    },
+    onPreviewChange: {
+      type: Function as PropType<(v: string) => void>,
+      default: () => {}
+    },
+    onCodeCssNameChange: {
+      type: Function as PropType<(v: string) => void>,
+      default: () => {}
     }
   },
   setup(props) {
     return () => (
       <header class="page-header">
         <section class="container">
           <p class="header-actions">
-            <button class="btn btn-header">
-              <a
-                href="https://github.com/imzbf/md-editor-v3"
-                target="_blank"
-                title="md-editor-v3"
-              >
-                GitHub源码
-              </a>
-            </button>
             <button class="btn btn-header" onClick={() => props.onChange('light')}>
-              默认模式
+              亮模式
             </button>
             <button class="btn btn-header" onClick={() => props.onChange('dark')}>
-              暗黑模式
+              暗模式
+            </button>
+          </p>
+          <p class="header-actions">
+            <button
+              class="btn btn-header"
+              onClick={() => props.onPreviewChange('default')}
+            >
+              default
+            </button>
+            <button
+              class="btn btn-header"
+              onClick={() => props.onPreviewChange('github')}
+            >
+              cyanosis
+            </button>
+            <button
+              class="btn btn-header"
+              onClick={() => props.onPreviewChange('github')}
+            >
+              github
+            </button>
+            <button
+              class="btn btn-header"
+              onClick={() => props.onPreviewChange('mk-cute')}
+            >
+              mk-cute
+            </button>
+            <button
+              class="btn btn-header"
+              onClick={() => props.onPreviewChange('smart-blue')}
+            >
+              smart-blue
+            </button>
+            <button
+              class="btn btn-header"
+              onClick={() => props.onPreviewChange('vuepress')}
+            >
+              vuepress
+            </button>
+          </p>
+          <p class="header-actions">
+            <button
+              class="btn btn-header"
+              onClick={() => props.onCodeCssNameChange('a11y')}
+            >
+              a11y
+            </button>
+            <button
+              class="btn btn-header"
+              onClick={() => props.onCodeCssNameChange('atom')}
+            >
+              atom-one
+            </button>
+            <button
+              class="btn btn-header"
+              onClick={() => props.onCodeCssNameChange('github')}
+            >
+              github
+            </button>
+            <button
+              class="btn btn-header"
+              onClick={() => props.onCodeCssNameChange('gradient')}
+            >
+              gradient
+            </button>
+            <button
+              class="btn btn-header"
+              onClick={() => props.onCodeCssNameChange('tokyo-night')}
+            >
+              tokyo-night
             </button>
           </p>
         </section>

diff --git a/dev/Preview/index.tsx b/dev/Preview/index.tsx
@@ -28,10 +28,10 @@ Editor.config({
   editorExtensions: {
     highlight: {
       css: {
-        kimbie: {
+        'tokyo-night': {
           light:
-            'https://cdn.jsdelivr.net/npm/[email protected]/styles/kimbie-light.css',
-          dark: 'https://cdn.jsdelivr.net/npm/[email protected]/styles/kimbie-dark.css'
+            'https://cdn.jsdelivr.net/npm/[email protected]/styles/tokyo-night-light.css',
+          dark: 'https://cdn.jsdelivr.net/npm/[email protected]/styles/tokyo-night-dark.css'
         }
       }
     },
@@ -54,7 +54,9 @@ const SAVE_KEY = 'XHMPGLJIZTDB';
 
 export default defineComponent({
   props: {
-    theme: String as PropType<Theme>
+    theme: String as PropType<Theme>,
+    previewTheme: String as PropType<string>,
+    codeCssName: String as PropType<string>
   },
   setup(props) {
     const storagedText = localStorage.getItem(SAVE_KEY) || '';
@@ -100,14 +102,14 @@ export default defineComponent({
         <div class="container">
           <Editor
             editorId="md-prev"
-            previewTheme="cyanosis"
+            previewTheme={props.previewTheme}
             theme={props.theme}
             modelValue={md.text}
             // katex={katex}
             onSave={(v) => {
               localStorage.setItem(SAVE_KEY, v);
             }}
-            codeCssName="kimbie"
+            codeCssName={props.codeCssName}
             // toolbars={['bold', 'link', '=', 'prettier', 'link']}
             // toolbarsExclude={['github']}
             onChange={(value) => (md.text = value)}
@@ -229,13 +231,14 @@ export default defineComponent({
             }
           ></Editor>
           <br />
-          <Editor
+          {/* <Editor
             editorId="md-prev-2"
             theme={props.theme}
+            previewTheme={props.previewTheme}
             codeCssName="kimbie"
             modelValue={md.text2}
             onChange={(value) => (md.text2 = value)}
-          />
+          /> */}
           <br />
           <span class="tips-text">
             tips：本页上方的编辑器有localstorage保存功能，可手动点击保存触发，每次操作后两秒会自己保存一次，可用于一些文档的编辑。