feat: add plugin-markdown-stylize

.vscode/settings.json

@@ -46,6 +46,7 @@
     "prefetch",
     "preload",
     "prismjs",
+    "revealjs",
     "shiki",
     "shikijs",
     "slugify",

plugins/markdown/plugin-markdown-stylize/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@vuepress/plugin-markdown-stylize",
+  "version": "2.0.0-rc.54",
+  "description": "VuePress plugin - markdown stylize",
+  "keywords": [
+    "vuepress-plugin",
+    "vuepress",
+    "plugin",
+    "markdown",
+    "stylize"
+  ],
+  "homepage": "https://ecosystem.vuejs.press/plugins/markdown/markdown-stylize.html",
+  "bugs": {
+    "url": "https://github.com/vuepress/ecosystem/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vuepress/ecosystem.git",
+    "directory": "plugins/markdown/plugin-markdown-stylize"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Mr.Hope",
+    "email": "[email protected]",
+    "url": "https://mister-hope.com"
+  },
+  "type": "module",
+  "exports": {
+    ".": "./lib/node/index.js",
+    "./package.json": "./package.json"
+  },
+  "main": "./lib/node/index.js",
+  "types": "./lib/node/index.d.ts",
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "build": "tsc -b tsconfig.build.json",
+    "bundle": "rollup -c rollup.config.ts --configPlugin esbuild",
+    "clean": "rimraf --glob ./lib ./*.tsbuildinfo"
+  },
+  "dependencies": {
+    "@mdit/plugin-align": "^0.13.1",
+    "@mdit/plugin-attrs": "^0.13.1",
+    "@mdit/plugin-mark": "^0.13.1",
+    "@mdit/plugin-spoiler": "^0.13.1",
+    "@mdit/plugin-stylize": "^0.13.1",
+    "@mdit/plugin-sub": "^0.13.1",
+    "@mdit/plugin-sup": "^0.13.1",
+    "@types/markdown-it": "^14.1.2",
+    "@vuepress/helper": "workspace:*"
+  },
+  "peerDependencies": {
+    "vuepress": "2.0.0-rc.18"
+  },
+  "devDependencies": {
+    "markdown-it": "^14.1.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

plugins/markdown/plugin-markdown-stylize/rollup.config.ts

@@ -0,0 +1,13 @@
+import { rollupBundle } from '../../../scripts/rollup.js'
+
+export default rollupBundle('node/index', {
+  external: [
+    '@mdit/plugin-align',
+    '@mdit/plugin-attrs',
+    '@mdit/plugin-mark',
+    '@mdit/plugin-spoiler',
+    '@mdit/plugin-stylize',
+    '@mdit/plugin-sub',
+    '@mdit/plugin-sup',
+  ],
+})

plugins/markdown/plugin-markdown-stylize/src/node/index.ts

@@ -0,0 +1,2 @@
+export * from './markdownStylizePlugin.js'
+export type * from './options.js'

plugins/markdown/plugin-markdown-stylize/src/node/markdownStylizePlugin.ts

@@ -0,0 +1,43 @@
+import { align as alignPlugin } from '@mdit/plugin-align'
+import { attrs as attrsPlugin } from '@mdit/plugin-attrs'
+import { mark as markPlugin } from '@mdit/plugin-mark'
+import { spoiler as spoilerPlugin } from '@mdit/plugin-spoiler'
+import { stylize as stylizePlugin } from '@mdit/plugin-stylize'
+import { sub as subPlugin } from '@mdit/plugin-sub'
+import { sup as supPlugin } from '@mdit/plugin-sup'
+import type { Plugin } from 'vuepress/core'
+import type { MarkdownEnv } from 'vuepress/markdown'
+import { isPlainObject } from 'vuepress/shared'
+import type { MarkdownStylizePluginOptions } from './options.js'
+import { prepareConfigFile } from './prepareConfigFile.js'
+
+export const markdownStylizePlugin = ({
+  attrs,
+  align,
+  mark,
+  spoiler,
+  sup,
+  sub,
+  stylize,
+}: MarkdownStylizePluginOptions): Plugin => {
+  return {
+    name: '@vuepress/plugin-markdown-stylize',
+
+    extendsMarkdown: (md) => {
+      if (attrs) md.use(attrsPlugin, isPlainObject(attrs) ? attrs : {})
+      if (align) md.use(alignPlugin)
+      if (mark) md.use(markPlugin)
+      if (spoiler) md.use(spoilerPlugin)
+      if (sub) md.use(subPlugin)
+      if (sup) md.use(supPlugin)
+      if (stylize)
+        md.use(stylizePlugin, {
+          config: stylize,
+          localConfigGetter: (env: MarkdownEnv) =>
+            env.frontmatter?.stylize || null,
+        })
+    },
+
+    clientConfigFile: spoiler ? (app) => prepareConfigFile(app) : undefined,
+  }
+}

plugins/markdown/plugin-markdown-stylize/src/node/options.ts

@@ -0,0 +1,65 @@
+import type { MarkdownItAttrsOptions } from '@mdit/plugin-attrs'
+import type { MarkdownItStylizeConfig } from '@mdit/plugin-stylize'
+
+export interface MarkdownStylizePluginOptions {
+  /**
+   * Whether to enable align support
+   *
+   * 是否启用自定义对齐支持。
+   *
+   * @default false
+   */
+  align?: boolean
+
+  /**
+   * Whether to enable attr support
+   *
+   * 是否启用属性支持。
+   *
+   * @default false
+   */
+  attrs?: MarkdownItAttrsOptions | boolean
+
+  /**
+   * Whether to enable superscript format support
+   *
+   * 是否启用上角标格式支持。
+   *
+   * @default false
+   */
+  sup?: boolean
+
+  /**
+   * Whether to enable subscript format support
+   *
+   * 是否启用下角标格式支持。
+   *
+   * @default false
+   */
+  sub?: boolean
+
+  /**
+   * Whether to enable mark format support
+   *
+   * 是否启用标注支持。
+   *
+   * @default false
+   */
+  mark?: boolean
+
+  /**
+   * Whether to enable spoiler support
+   *
+   * 是否启用剧透支持
+   *
+   * @default false
+   */
+  spoiler?: boolean
+
+  /**
+   * Keyword enhancement
+   *
+   * 关键词显示增强选项
+   */
+  stylize?: MarkdownItStylizeConfig
+}

plugins/markdown/plugin-markdown-stylize/src/node/prepareConfigFile.ts

@@ -0,0 +1,12 @@
+import { getRealPath } from '@vuepress/helper'
+import type { App } from 'vuepress'
+
+const { url } = import.meta
+
+export const prepareConfigFile = (app: App): Promise<string> =>
+  app.writeTemp(
+    `markdown-ext/config.js`,
+    `\
+import "${getRealPath('@mdit/plugin-spoiler/style', url)}";
+`,
+  )

plugins/markdown/plugin-markdown-stylize/tsconfig.build.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../../tsconfig.build.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./lib"
+  },
+  "include": ["./src"],
+  "references": [{ "path": "../../../tools/helper/tsconfig.build.json" }]
+}