feat: add root container (#486)

close #420
doocs · Dec 21, 2024 · 8a0a6ea · 8a0a6ea
1 parent 0808b98
commit 8a0a6ea
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 2 deletions.
diff --git a/src/assets/example/theme-css.txt b/src/assets/example/theme-css.txt
@@ -6,6 +6,9 @@
  * 召集令：如果你有好看的主题样式，欢迎分享，让更多人能够使用到你的主题。
  * 提交区：https://github.com/doocs/md/discussions/426
  */
+/* 顶层容器样式 */
+container {
+}
 /* 一级标题样式 */
 h1 {
 }

diff --git a/src/config/theme.ts b/src/config/theme.ts
@@ -9,6 +9,7 @@ const defaultTheme: Theme = {
     'line-height': `1.75`,
   },
   block: {
+    container: {},
     // 一级标题
     h1: {
       'display': `table`,
@@ -288,6 +289,7 @@ const graceTheme = toMerged(defaultTheme, {
   base: {
   },
   block: {
+    'container': {},
     'h1': {
       'padding': `0.5em 1em`,
       'border-bottom': `2px solid var(--md-primary-color)`,

diff --git a/src/stores/index.ts b/src/stores/index.ts
@@ -213,7 +213,7 @@ export const useStore = defineStore(`store`, () => {
       </style>
     `
 
-    output.value = outputTemp
+    output.value = renderer.createContainer(outputTemp)
   }
 
   // 更新 CSS

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -3,7 +3,7 @@ import type { PropertiesHyphen } from 'csstype'
 import type { Token } from 'marked'
 
 type GFMBlock = `blockquote_note` | `blockquote_tip` | `blockquote_important` | `blockquote_warning` | `blockquote_caution` | `blockquote_title` | `blockquote_title_note` | `blockquote_title_tip` | `blockquote_title_important` | `blockquote_title_warning` | `blockquote_title_caution` | `blockquote_p` | `blockquote_p_note` | `blockquote_p_tip` | `blockquote_p_important` | `blockquote_p_warning` | `blockquote_p_caution`
-export type Block = `h1` | `h2` | `h3` | `h4` | `h5` | `h6` | `p` | `blockquote` | `blockquote_p` | `code_pre` | `code` | `image` | `ol` | `ul` | `footnotes` | `figure` | `hr` | GFMBlock
+export type Block = `container` | `h1` | `h2` | `h3` | `h4` | `h5` | `h6` | `p` | `blockquote` | `blockquote_p` | `code_pre` | `code` | `image` | `ol` | `ul` | `footnotes` | `figure` | `hr` | GFMBlock
 export type Inline = `listitem` | `codespan` | `link` | `wx_link` | `strong` | `table` | `thead` | `td` | `footnote` | `figcaption` | `em`
 
 interface CustomCSSProperties {

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -43,6 +43,7 @@ export function customCssWithTemplate(jsonString: Partial<Record<Block | Inline,
   }
 
   const blockKeys: Block[] = [
+    `container`,
     `h1`,
     `h2`,
     `h3`,

diff --git a/src/utils/renderer.ts b/src/utils/renderer.ts
@@ -274,5 +274,8 @@ export function initRenderer(opts: IOpts) {
     buildFootnotes,
     setOptions,
     reset,
+    createContainer(content: string) {
+      return styledContent(`container`, content, `section`)
+    },
   }
 }
-Original file line number
+Diff line change
@@ Expand Up @@
       }
       const blockKeys: Block[] = [
+        `container`,
         `h1`,
         `h2`,
         `h3`,
@@ Expand Down @@