feat: support rendering for level 5 and level 6 headings (doocs#432)

close doocs#428

src/assets/example/markdown.md

@@ -8,7 +8,7 @@ Markdown 是一种轻量级标记语言，用于格式化纯文本。它以简
 
 ### 1. 标题：让你的内容层次分明
 
-用 `#` 号来创建标题。标题从 `#` 开始，我们最多支持 4 个 `#` 号，对应 4 级标题。
+用 `#` 号来创建标题。标题从 `#` 开始，`#` 的数量表示标题的级别。
 
 ```markdown
 # 一级标题
@@ -22,8 +22,6 @@ Markdown 是一种轻量级标记语言，用于格式化纯文本。它以简
 
 以上代码将渲染出一组层次分明的标题，使你的文章井井有条。
 
-> 标准 Markdown 支持 1 ~ 6 级标题，此编辑器也不例外，不过我们只准备了四个级别样式，同时也是不推荐文章超过四级标题。
-
 ### 2. 段落与换行：自然流畅
 
 Markdown 中的段落就是一行接一行的文本。要创建新段落，只需在两行文本之间空一行。

src/assets/example/theme-css.txt

@@ -18,6 +18,12 @@ h3 {
 /* 四级标题样式 */
 h4 {
 }
+/* 五级标题样式 */
+h5 {
+}
+/* 六级标题样式 */
+h6 {
+}
 /* 图片样式 */
 image {
 }

src/config/theme.ts

@@ -52,6 +52,21 @@ const defaultTheme: Theme = {
       'font-weight': `bold`,
     },
 
+    // 五级标题
+    h5: {
+      'margin': `1.5em 8px 0.5em`,
+      'color': `var(--md-primary-color)`,
+      'font-size': `1em`,
+      'font-weight': `bold`,
+    },
+
+    // 六级标题
+    h6: {
+      'margin': `1.5em 8px 0.5em`,
+      'font-size': `1em`,
+      'color': `var(--md-primary-color)`,
+    },
+
     // 段落
     p: {
       'margin': `1.5em 8px`,
@@ -240,6 +255,14 @@ const graceTheme = toMerged(defaultTheme, {
       'font-size': `1.1em`,
     },
 
+    h5: {
+      'font-size': `1em`,
+    },
+
+    h6: {
+      'font-size': `1em`,
+    },
+
     p: {
     },
 

src/types/index.ts

@@ -1,6 +1,6 @@
 import type { PropertiesHyphen } from 'csstype'
 
-export type Block = `h1` | `h2` | `h3` | `h4` | `p` | `blockquote` | `blockquote_p` | `code_pre` | `code` | `image` | `ol` | `ul` | `footnotes` | `figure` | `hr`
+export type Block = `h1` | `h2` | `h3` | `h4` | `h5` | `h6` | `p` | `blockquote` | `blockquote_p` | `code_pre` | `code` | `image` | `ol` | `ul` | `footnotes` | `figure` | `hr`
 export type Inline = `listitem` | `codespan` | `link` | `wx_link` | `strong` | `table` | `thead` | `td` | `footnote` | `figcaption` | `em`
 
 interface CustomCSSProperties {

src/utils/file.ts

@@ -1,15 +1,15 @@
+import { giteeConfig, githubConfig } from '@/config'
+import fetch from '@/utils/fetch'
+import * as tokenTools from '@/utils/tokenTools'
+
+import { base64encode, safe64, utf16to8 } from '@/utils/tokenTools'
 import Buffer from 'buffer-from'
 import COS from 'cos-js-sdk-v5'
 import CryptoJS from 'crypto-js'
-
 import * as Minio from 'minio'
 import * as qiniu from 'qiniu-js'
 import OSS from 'tiny-oss'
 import { v4 as uuidv4 } from 'uuid'
-import * as tokenTools from '@/utils/tokenTools'
-import { base64encode, safe64, utf16to8 } from '@/utils/tokenTools'
-import fetch from '@/utils/fetch'
-import { giteeConfig, githubConfig } from '@/config'
 
 function getConfig(useDefault: boolean, platform: string) {
   if (useDefault) {

src/utils/index.ts

@@ -20,7 +20,7 @@ export function customizeTheme(theme: Theme, options: {
   const newTheme = JSON.parse(JSON.stringify(theme))
   const { fontSize, color } = options
   if (fontSize) {
-    for (let i = 1; i <= 4; i++) {
+    for (let i = 1; i <= 6; i++) {
       const v = newTheme.block[`h${i}`][`font-size`]
       newTheme.block[`h${i}`][`font-size`] = `${fontSize * Number.parseFloat(v)}px`
     }
@@ -47,6 +47,8 @@ export function customCssWithTemplate(jsonString: Partial<Record<Block | Inline,
     `h2`,
     `h3`,
     `h4`,
+    `h5`,
+    `h6`,
     `code`,
     `code_pre`,
     `p`,