fix(table): fix table too wide

fix #9

src/hooks/useMarkdown.hook.ts

@@ -1,5 +1,6 @@
 import markdownItClass from '@toycode/markdown-it-class'
 import MarkdownIt from 'markdown-it'
+import Renderer from 'markdown-it/lib/renderer'
 import blockEmbedPlugin from 'markdown-it-block-embed'
 import markdownItCheckbox from 'markdown-it-checkbox'
 import markdownItFootnote from 'markdown-it-footnote'
@@ -21,8 +22,7 @@ const md = new MarkdownIt({
     h3: ['title', 'is-4'],
     h4: ['title', 'is-5'],
     h5: ['title', 'is-6'],
-    h6: ['title', 'is-6'],
-    table: ['table', 'is-fullwidth']
+    h6: ['title', 'is-6']
   })
   .use(html5Media)
   .use(blockEmbedPlugin, {
@@ -40,6 +40,14 @@ const md = new MarkdownIt({
     height: 400
   })
 
+const rules: Renderer.RenderRuleRecord = {
+  table_close: () => '</table>\n</div>',
+  table_open: () =>
+    '<div class="table-wrapper table is-fullwidth is striped">\n<table>\n'
+}
+
+md.renderer.rules = { ...md.renderer.rules, ...rules }
+
 export const useMarkdown = (defaultPrefix?: Ref<string> | string) => {
   const getRawContent = (content: string) => decodeBase64ToUTF8(content)
   const renderFromUTF8 = (content: string, prefix?: string) =>

src/styles/app.scss

@@ -93,6 +93,10 @@ a {
   transition: cubic-bezier(0.39, 0.575, 0.565, 1) 0.2s;
 }
 
+.table-wrapper {
+  overflow-x: auto;
+}
+
 @media print {
 
   html,