feat: add plugin-preview

docs/.vuepress/configs/plugins.ts

@@ -9,6 +9,7 @@ import { markdownExtPlugin } from '@vuepress/plugin-markdown-ext'
 import { markdownImagePlugin } from '@vuepress/plugin-markdown-image'
 import { markdownIncludePlugin } from '@vuepress/plugin-markdown-include'
 import { markdownMathPlugin } from '@vuepress/plugin-markdown-math'
+import { markdownPreviewPlugin } from '@vuepress/plugin-markdown-preview'
 import { markdownStylizePlugin } from '@vuepress/plugin-markdown-stylize'
 import { redirectPlugin } from '@vuepress/plugin-redirect'
 import { registerComponentsPlugin } from '@vuepress/plugin-register-components'
@@ -43,6 +44,7 @@ export const plugins = [
   iconPlugin({
     prefix: 'lucide:',
   }),
+  markdownPreviewPlugin(),
   markdownExtPlugin({
     gfm: true,
     component: true,

docs/.vuepress/configs/sidebar/en.ts

@@ -113,6 +113,7 @@ export const sidebarEn: SidebarOptions = {
     'markdown-include',
     'markdown-hint',
     'markdown-math',
+    'markdown-preview',
     'markdown-stylize',
     'markdown-tab',
     'links-check',

docs/.vuepress/configs/sidebar/zh.ts

@@ -113,6 +113,7 @@ export const sidebarZh: SidebarOptions = {
     'markdown-include',
     'markdown-hint',
     'markdown-math',
+    'markdown-preview',
     'markdown-stylize',
     'markdown-tab',
     'links-check',

docs/package.json

@@ -19,6 +19,7 @@
     "@vuepress/plugin-catalog": "workspace:*",
     "@vuepress/plugin-comment": "workspace:*",
     "@vuepress/plugin-copy-code": "workspace:*",
+    "@vuepress/plugin-markdown-preview": "workspace:*",
     "@vuepress/plugin-docsearch": "workspace:*",
     "@vuepress/plugin-feed": "workspace:*",
     "@vuepress/plugin-icon": "workspace:*",

docs/plugins/markdown/markdown-preview.md

@@ -0,0 +1,108 @@
+---
+icon: siren
+---
+
+# markdown-preview
+
+<NpmBadge package="@vuepress/plugin-markdown-preview" />
+
+Support preview contents in VuePress site.
+
+## Usage
+
+```bash
+npm i -D @vuepress/plugin-markdown-preview@next
+```
+
+```ts title=".vuepress/config.ts"
+import { markdownPreviewPlugin } from '@vuepress/plugin-markdown-preview'
+
+export default {
+  plugins: [markdownPreviewPlugin()],
+}
+```
+
+## Guide
+
+The plugin provides a `preview` container and `VPPreview` component to preview contents in VuePress site.
+
+You can use the `preview` container in markdown files like this:
+
+```md
+::: preview Optional Title
+
+Preview Contents
+
+:::
+```
+
+It will be rendered as a preview container in the site, showing both the content and its raw code:
+
+::: preview Optional Title
+
+Preview Contents
+
+:::
+
+Sometimes, codes for users may be different with embedding preview contents, you can use the `VPPreview` component directly to achieve this:
+
+````md
+<VPPreview title="Optional Title">
+  <template #content>
+    <!-- Your content here  -->
+
+    Hello world!
+
+  </template>
+  <template #code>
+    <!-- Your code here -->
+
+```js
+document.querySelector('body').innerText = 'Hello world!'
+```
+
+  </template>
+</VPPreview>
+````
+
+<VPPreview title="Optional Title">
+  <template #content>
+    <!-- Your content here  -->
+
+    Hello world!
+
+  </template>
+  <template #code>
+    <!-- Your code here -->
+
+```js
+document.querySelector('body').innerText = 'Hello world!'
+```
+
+  </template>
+</VPPreview>
+
+## Options
+
+### locales
+
+- Type: `Record<string, MarkdownPreviewLocaleData>`
+
+  ```ts
+  export interface MarkdownPreviewLocaleData {
+    /**
+     * Toggle code button text
+     */
+    toggle: string
+  }
+  ```
+
+- Details:
+
+  Locales configuration for `<VPPreview>`.
+
+## Styles
+
+You can customize the style via CSS variables:
+
+@[code css](@vuepress/plugin-markdown-preview/src/client/styles/vars.css)

docs/zh/plugins/markdown/markdown-preview.md

@@ -0,0 +1,108 @@
+---
+icon: siren
+---
+
+# markdown-preview
+
+<NpmBadge package="@vuepress/plugin-markdown-preview" />
+
+在 VuePress 站点中支持内容预览。
+
+## 使用
+
+```bash
+npm i -D @vuepress/plugin-markdown-preview@next
+```
+
+```ts title=".vuepress/config.ts"
+import { markdownPreviewPlugin } from '@vuepress/plugin-markdown-preview'
+
+export default {
+  plugins: [markdownPreviewPlugin()],
+}
+```
+
+## 指南
+
+该插件提供了 `preview` 容器和 `VPPreview` 组件来在 VuePress 站点中预览内容。
+
+你可以在 markdown 文件中像这样使用 `preview` 容器：
+
+```md
+::: preview 可选标题
+
+预览内容
+
+:::
+```
+
+它将在站点中渲染为一个预览容器，同时显示内容和其源代码：
+
+::: preview 可选标题
+
+预览内容
+
+:::
+
+有时，用户的代码可能与嵌入的预览内容不同，你可以直接使用 `VPPreview` 组件来实现这一点：
+
+````md
+<VPPreview title="可选标题">
+  <template #content>
+    <!-- 你的内容在这里  -->
+
+    Hello world!
+
+  </template>
+  <template #code>
+    <!-- 你的代码在这里 -->
+
+```js
+document.querySelector('body').innerText = 'Hello world!'
+```
+
+  </template>
+</VPPreview>
+````
+
+<VPPreview title="可选标题">
+  <template #content>
+    <!-- 你的内容在这里  -->
+
+    Hello world!
+
+  </template>
+  <template #code>
+    <!-- 你的代码在这里 -->
+
+```js
+document.querySelector('body').innerText = 'Hello world!'
+```
+
+  </template>
+</VPPreview>
+
+## 选项
+
+### locales
+
+- 类型: `Record<string, MarkdownPreviewLocaleData>`
+
+  ```ts
+  export interface MarkdownPreviewLocaleData {
+    /**
+     * 切换代码按钮文本
+     */
+    toggle: string
+  }
+  ```
+
+- 详细信息:
+
+  `<VPPreview>` 的多语言配置。
+
+## 样式
+
+你可以通过 CSS 变量自定义样式：
+
+@[code css](@vuepress/plugin-markdown-preview/src/client/styles/vars.css)

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

@@ -0,0 +1,60 @@
+{
+  "name": "@vuepress/plugin-markdown-preview",
+  "version": "2.0.0-rc.106",
+  "description": "VuePress plugin - preview",
+  "keywords": [
+    "vuepress-plugin",
+    "vuepress",
+    "plugin",
+    "markdown",
+    "preview"
+  ],
+  "homepage": "https://ecosystem.vuejs.press/plugins/markdown/preview.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-preview"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Mr.Hope",
+    "email": "mister-hope@outlook.com",
+    "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",
+    "style": "sass src:lib --embed-sources --style=compressed"
+  },
+  "dependencies": {
+    "@mdit/helper": "^0.21.0",
+    "@mdit/plugin-demo": "^0.21.0",
+    "@types/markdown-it": "^14.1.2",
+    "@vuepress/helper": "workspace:*",
+    "@vueuse/core": "catalog:",
+    "vue": "catalog:"
+  },
+  "peerDependencies": {
+    "vuepress": "catalog:"
+  },
+  "devDependencies": {
+    "markdown-it": "^14.1.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

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

@@ -0,0 +1,8 @@
+import { rollupBundle } from '../../../scripts/rollup.js'
+
+export default [
+  ...rollupBundle('node/index', {
+    external: ['@mdit/plugin-demo', '@mdit/helper'],
+  }),
+  ...rollupBundle({ base: 'client', files: ['index', 'config'] }),
+]