feat: can switch or customize the markdown theme

README.md

@@ -140,6 +140,8 @@ import SelectImage from './components/SelectImage.vue'
 export const vuetifyProTipTap = createVuetifyProTipTap({
   // Set default lang
   lang: 'zhHans',
+  // Set markdown theme 
+  markdownTheme: 'github',
   // Global registration app.component
   components: {
     VuetifyTiptap,
@@ -222,6 +224,38 @@ All available extensions：
 - [`History`](./src/extensions/history.ts)
 
 
+## Custom theme
+
+Create github.scss
+
+```scss
+$value: 'github';
+
+.vuetify-pro-tiptap-editor__content.markdown-theme-#{$value} {
+  // your custom styles
+  &.__dark {
+    // your dark mode custom styles
+  }
+}
+```
+
+Import github.scss in ts
+
+```typescript
+// import 'vuetify-pro-tiptap/style.css' // import all(editor and markdown) styles
+import 'vuetify-pro-tiptap/styles/editor.css' // only use editor style, not using markdown style
+import './styles/markdown/github.scss'
+```
+
+In the component using
+
+```vue
+<template>
+  <VuetifyTiptap v-model="content" markdown-theme="github" />
+  <VuetifyViewer :value="content" markdown-theme="github" />
+</template>
+```
+
 ## Custom extensions
 
 <details>
@@ -385,6 +419,7 @@ const content = ref('')
 | Name | Type | Default | Description |
 | ---- | ---- | ---- | ---- |
 | modelValue | string | '' | The input’s value |
+| markdownTheme | string \| false | 'default' | Markdown theme |
 | dark | boolean | false | Applies the dark theme variant to the component. |
 | dense | boolean | false | Reduces the input height |
 | outlined | boolean | true | Applies the outlined style to the input |
@@ -413,7 +448,7 @@ const content = ref('')
 | value | value | '' | The preview’s value |
 | dark | boolean | false | Applies the dark theme variant to the component. |
 | dense | boolean | false | Reduces the input height |
-| hideMarkdownStyle | boolean | false | Hide .markdown-body class |
+| markdownTheme | string \| false | 'default' | Markdown theme |
 | xss | boolean | true | Enable xss filter |
 | xssOptions | xss.IWhiteList | Default rule | Xss filter rule config |
 | maxWidth | string \| number | undefined | Sets the maximum width for the component. |

README.zh-CN.md

@@ -140,6 +140,8 @@ import SelectImage from './components/SelectImage.vue'
 export const vuetifyProTipTap = createVuetifyProTipTap({
   // Set default lang
   lang: 'zhHans',
+  // Set markdown theme 
+  markdownTheme: 'github',
   // Global registration app.component
   components: {
     VuetifyTiptap,
@@ -221,6 +223,38 @@ export const vuetifyProTipTap = createVuetifyProTipTap({
 - [`Fullscreen`](./src/extensions/fullscreen.ts)
 - [`History`](./src/extensions/history.ts)
 
+## 自定义主题
+
+创建 github.scss
+
+```scss
+$value: 'github';
+
+.vuetify-pro-tiptap-editor__content.markdown-theme-#{$value} {
+  // 自定义样式
+  &.__dark {
+    // dark 模式下的自定义样式
+  }
+}
+```
+
+在 ts 中导入 github.scss
+
+```typescript
+// import 'vuetify-pro-tiptap/style.css' // 导入全部（editor 和 markdown）样式
+import 'vuetify-pro-tiptap/styles/editor.css' // 只使用 editor 样式，不使用 markdown 样式
+import './styles/markdown/github.scss'
+```
+
+在组件中使用
+
+```vue
+<template>
+  <VuetifyTiptap v-model="content" markdown-theme="github" />
+  <VuetifyViewer :value="content" markdown-theme="github" />
+</template>
+```
+
 ## 自定义 extension
 
 <details>
@@ -384,6 +418,7 @@ const content = ref('')
 | 名称 | 类型 | 默认值 | 说明 |
 | ---- | ---- | ---- | ---- |
 | modelValue | string | '' | 输入的值 |
+| markdownTheme | string \| false | 'default' | markdown主题 |
 | dark | boolean | false | 是否为深色主题 |
 | dense | boolean | false | 是否为紧凑模式 |
 | outlined | boolean | true | 将轮廓样式应用于输入 |
@@ -412,7 +447,7 @@ const content = ref('')
 | value | value | '' | 预览的值 |
 | dark | boolean | false | 是否为深色主题 |
 | dense | boolean | false | 是否为紧凑模式 |
-| hideMarkdownStyle | boolean | false | 隐藏.markdown-body类 |
+| markdownTheme | string \| false | 'default' | markdown主题 |
 | xss | boolean | true | 是否开启xss过滤 |
 | xssOptions | xss.IWhiteList | 内置默认规则 | xss过滤规则配置 |
 | maxWidth | string \| number | undefined | 预览最大宽度 |

examples/App.vue

@@ -1,3 +1,9 @@
+<!--
+ * @Date: 2023-05-27 17:21:21
+ * @LastEditors: yikoyu 2282373181@qq.com
+ * @LastEditTime: 2023-06-13 20:58:58
+ * @FilePath: \vuetify-pro-tiptap\examples\App.vue
+-->
 <script setup lang="ts">
 import { ref, unref } from 'vue'
 import { useTheme } from 'vuetify'
@@ -12,6 +18,7 @@ const extensions = [preview.configure({ spacer: true })]
 const theme = useTheme()
 
 const content = ref(html)
+const markdownTheme = ref('maidragon')
 const outlined = ref(true)
 const dense = ref(false)
 const editHtml = ref(false)
@@ -60,6 +67,15 @@ function setCustom() {
       <v-btn class="mb-4 ms-4" color="primary" @click="locale.setLang('en')">set English</v-btn>
       <v-btn class="mb-4 ms-4" color="primary" @click="setCustom">set Custom Lang</v-btn>
 
+      <div class="my-4">
+        <v-btn-toggle v-model="markdownTheme" color="deep-purple-accent-3" rounded="0" group>
+          <v-btn value="">Global</v-btn>
+          <v-btn value="default">Default</v-btn>
+          <v-btn value="github">Github</v-btn>
+          <v-btn value="maidragon">Maidragon</v-btn>
+        </v-btn-toggle>
+      </div>
+
       <vuetify-tiptap
         v-model="content"
         label="Title"
@@ -72,6 +88,7 @@ function setCustom() {
         :max-height="465"
         :max-width="maxWidth"
         :extensions="extensions"
+        :markdown-theme="markdownTheme"
       />
       <v-divider class="my-4"></v-divider>
 

examples/components/PreviewActionButton.vue

@@ -1,3 +1,9 @@
+<!--
+ * @Date: 2023-05-11 22:14:19
+ * @LastEditors: yikoyu 2282373181@qq.com
+ * @LastEditTime: 2023-06-13 21:24:28
+ * @FilePath: \vuetify-pro-tiptap\examples\components\PreviewActionButton.vue
+-->
 <script setup lang="ts">
 import { ref } from 'vue'
 import { mdiFileCodeOutline, mdiClose } from '@mdi/js'
@@ -15,6 +21,7 @@ const props = withDefaults(defineProps<Props>(), {
   disabled: false
 })
 
+const markdownTheme = ref('')
 const dialog = ref(false)
 const maxWidth = ref<number>(900)
 </script>
@@ -26,13 +33,20 @@ const maxWidth = ref<number>(900)
       <VCard>
         <VToolbar dark color="primary">
           <VBtn icon dark @click="dialog = false">
-            <v-icon>{{ `svg:${mdiClose}` }}</v-icon>
+            <VIcon>{{ `svg:${mdiClose}` }}</VIcon>
           </VBtn>
+
+          <VBtnToggle v-model="markdownTheme" color="deep-purple-accent-3" rounded="0" group>
+            <VBtn value="">Global</VBtn>
+            <VBtn value="default">Default</VBtn>
+            <VBtn value="github">Github</VBtn>
+            <VBtn value="maidragon">Maidragon</VBtn>
+          </VBtnToggle>
         </VToolbar>
 
         <VContainer>
           <VSheet class="mx-auto" :max-width="maxWidth">
-            <VuetifyViewer :value="editor.getHTML()" />
+            <VuetifyViewer :value="editor.getHTML()" :markdown-theme="markdownTheme" />
           </VSheet>
         </VContainer>
       </VCard>