feat: offsetting the default margin of p

src/assets/example/theme-css.txt

@@ -39,6 +39,9 @@ markdown-alert {
 /* GFM 警告块标题 */
 markdown-alert-title {
 }
+/* GFM 警告块内容，抵消 p 默认的 margin */
+markdown-alert-content-wrapper {
+}
 /* GFM note */
 markdown-alert-title-note {
 }

src/config/theme.ts

@@ -111,6 +111,11 @@ const defaultTheme: Theme = {
       'align-items': `center`,
     },
 
+    // GFM 警告块内容，抵消 p 默认的 margin
+    'markdown-alert-content-wrapper': {
+      margin: `-1em -8px -1.5em;`,
+    },
+
     'markdown-alert-title-note': {
       color: `#478be6`,
     },

src/utils/MDAlert.ts

@@ -1,5 +1,6 @@
 import type { AlertOptions, AlertVariantItem } from '@/types'
 import type { MarkedExtension, Tokens } from 'marked'
+import { getStyleString } from '.'
 
 /**
  * https://github.com/bent10/marked-extensions/tree/main/packages/alert
@@ -44,6 +45,9 @@ export default function markedAlert(options: AlertOptions = {}): MarkedExtension
               ...options.theme?.block[titleClassName],
               ...options.theme?.block[`${titleClassName}-${variantType}`],
             },
+            contentWrapperStyle: {
+              margin: options.theme?.block[`${className}-content-wrapper`]?.margin,
+            },
           },
         })
 
@@ -77,15 +81,15 @@ export default function markedAlert(options: AlertOptions = {}): MarkedExtension
         name: `alert`,
         level: `block`,
         renderer({ meta, tokens = [] }) {
-          let tmpl = `<div class="${meta.className} ${meta.className}-${meta.variant}" style='${Object.entries(meta.style ?? {}).map(([key, value]) => `${key}: ${value}`).join(`; `)}'>\n`
-          tmpl += `<p class="${meta.titleClassName}" style='${Object.entries(meta.titleStyle ?? {}).map(([key, value]) => `${key}: ${value}`).join(`; `)}'>`
+          let tmpl = `<div class="${meta.className} ${meta.className}-${meta.variant}" style='${getStyleString(meta.style)}'>\n`
+          tmpl += `<p class="${meta.titleClassName}" style='${getStyleString(meta.titleStyle)}'>`
           tmpl += meta.icon.replace(
             `<svg`,
             `<svg style="fill: ${meta.titleStyle?.color ?? `inherit`}"`,
           )
           tmpl += meta.title
           tmpl += `</p>\n`
-          tmpl += this.parser.parse(tokens)
+          tmpl += `<div style="${getStyleString(meta.contentWrapperStyle)}">${this.parser.parse(tokens)}</div>`
           tmpl += `</div>\n`
 
           return tmpl

src/utils/index.ts

@@ -1,4 +1,4 @@
-import type { Block, Inline, Theme } from '@/types'
+import type { Block, ExtendedProperties, Inline, Theme } from '@/types'
 
 import type { PropertiesHyphen } from 'csstype'
 import { prefix } from '@/config'
@@ -116,6 +116,15 @@ export function css2json(css: string): Partial<Record<Block | Inline, Properties
   return json
 }
 
+/**
+ * 将样式对象转换为 CSS 字符串
+ * @param {ExtendedProperties} style - 样式对象
+ * @returns {string} - CSS 字符串
+ */
+export function getStyleString(style: ExtendedProperties) {
+  return Object.entries(style ?? {}).map(([key, value]) => `${key}: ${value}`).join(`; `)
+}
+
 /**
  * 格式化内容
  * @param {string} content - 要格式化的内容

src/utils/renderer.ts

@@ -6,6 +6,7 @@ import hljs from 'highlight.js'
 
 import { marked } from 'marked'
 import mermaid from 'mermaid'
+import { getStyleString } from '.'
 import markedAlert from './MDAlert'
 import { MDKatex } from './MDKatex'
 
@@ -59,9 +60,7 @@ function getStyles(styleMapping: ThemeStyles, tokenName: string, addition: strin
   if (!dict) {
     return ``
   }
-  const styles = Object.entries(dict)
-    .map(([key, value]) => `${key}:${value}`)
-    .join(`;`)
+  const styles = getStyleString(dict)
   return `style="${styles}${addition}"`
 }