+ `;
+};
+
+export const codeDemoDefaultSetting = {
+ jsLib: [],
+ cssLib: [],
+ jsfiddle: true,
+ codepen: true,
+ codepenLayout: "left",
+ codepenJsProcessor: "babel",
+ codepenEditors: "101",
+ horizontal: false,
+ vue: "https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js",
+ react: "https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js",
+ reactDOM:
+ "https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js",
+};
diff --git a/packages/md-enhance/lib/pluginConfig.ts b/packages/md-enhance/lib/pluginConfig.ts
index c68b08a1d428..71664c794b07 100644
--- a/packages/md-enhance/lib/pluginConfig.ts
+++ b/packages/md-enhance/lib/pluginConfig.ts
@@ -1,3 +1,5 @@
+import { codeDemoRender } from "./markdown-it/code-demo";
+
import { PluginConfig, ThemeConfig } from "@mr-hope/vuepress-types";
import { MarkdownEnhanceOptions } from "../types";
import {
@@ -58,6 +60,9 @@ const pluginConfig = (
["container", { type: "justify", defaultTitle: "" }]
);
+ if (markdownOption.codeDemo || markdownOption.enableAll)
+ config.push(["container", { type: "demo", render: codeDemoRender }]);
+
return config;
};
diff --git a/packages/md-enhance/src/clientRootMixin.ts b/packages/md-enhance/src/clientRootMixin.ts
new file mode 100644
index 000000000000..f27db6bf2ed7
--- /dev/null
+++ b/packages/md-enhance/src/clientRootMixin.ts
@@ -0,0 +1,13 @@
+import "./styles/code-demo.styl";
+
+import { initDemo } from "./demo";
+
+export default {
+ mounted(): void {
+ initDemo();
+ },
+
+ updated(): void {
+ initDemo();
+ },
+};
diff --git a/packages/md-enhance/src/demo/button.ts b/packages/md-enhance/src/demo/button.ts
new file mode 100644
index 000000000000..97e454e86017
--- /dev/null
+++ b/packages/md-enhance/src/demo/button.ts
@@ -0,0 +1,85 @@
+import { CodepenCode, Code, h, option } from "./utils";
+
+export const getCodepenButton =
= Code>({
+ code: { css },
+ template: { html, js },
+ jsLib,
+ cssLib,
+ preprocessor,
+}: T): HTMLElement =>
+ h(
+ "form",
+ {
+ className: "code-demo-codepen",
+ target: "_blank",
+ action: "https://codepen.io/pen/define",
+ method: "post",
+ },
+ [
+ h("input", {
+ type: "hidden",
+ name: "data",
+ value: JSON.stringify({
+ css,
+ html,
+ js,
+ // eslint-disable-next-line @typescript-eslint/naming-convention
+ js_external: [...jsLib, ...option.jsLib].join(";"),
+ // eslint-disable-next-line @typescript-eslint/naming-convention
+ css_external: [...cssLib, ...option.cssLib].join(";"),
+ layout: option.codepenLayout,
+ // eslint-disable-next-line @typescript-eslint/naming-convention
+ html_pre_processor: preprocessor ? preprocessor.html : "none",
+ // eslint-disable-next-line @typescript-eslint/naming-convention
+ js_pre_processor: preprocessor ? preprocessor.js : "none",
+ // eslint-disable-next-line @typescript-eslint/naming-convention
+ css_pre_processor: preprocessor ? preprocessor.css : "none",
+ editors: option.editors,
+ }),
+ }),
+ h("button", {
+ type: "submit",
+ innerHTML:
+ '',
+ className: "button",
+ datatip: "Codepen",
+ }),
+ ]
+ );
+
+export const getJsfiddleBtn = ({
+ code: { css },
+ template: { html, js },
+ jsLib,
+ cssLib,
+}: Code): HTMLElement =>
+ h(
+ "form",
+ {
+ className: "code-demo-jsfiddle",
+ target: "_blank",
+ action: "https://jsfiddle.net/api/post/library/pure/",
+ method: "post",
+ },
+ [
+ h("input", { type: "hidden", name: "html", value: html }),
+ h("input", { type: "hidden", name: "js", value: js }),
+ h("input", { type: "hidden", name: "css", value: css }),
+ h("input", { type: "hidden", name: "wrap", value: "1" }),
+ h("input", { type: "hidden", name: "panel_js", value: "3" }),
+ h("input", {
+ type: "hidden",
+ name: "resources",
+ value: [...jsLib, ...cssLib, ...option.cssLib, ...option.jsLib].join(
+ ","
+ ),
+ }),
+ h("button", {
+ type: "submit",
+ className: "button",
+ innerHTML:
+ '',
+ datatip: "JSFiddle",
+ }),
+ ]
+ );
diff --git a/packages/md-enhance/src/demo/index.ts b/packages/md-enhance/src/demo/index.ts
new file mode 100644
index 000000000000..37cdd8d3e589
--- /dev/null
+++ b/packages/md-enhance/src/demo/index.ts
@@ -0,0 +1,142 @@
+import {
+ Code,
+ getCode,
+ getReactCode,
+ getVanillaCode,
+ getVueCode,
+ h,
+ injectCSS,
+ option,
+} from "./utils";
+import { getCodepenButton, getJsfiddleBtn } from "./button";
+import { CodeDemoOptions } from "packages/md-enhance/types";
+
+const select = (node: Element | Document, selector: string): HTMLElement[] =>
+ Array.from(node.querySelectorAll(`.${selector}`));
+
+const getExpandButton = (): HTMLElement => h("button", { className: "expand" });
+
+const expandHandler = (
+ expandNode: HTMLElement,
+ height: number,
+ codeNode: HTMLElement,
+ footerNode: HTMLElement
+): void => {
+ const toBeExpand = !expandNode.hasAttribute("expanded");
+
+ codeNode.style.height = toBeExpand ? `${height}px` : "0";
+
+ if (toBeExpand) footerNode.classList.add("show-link");
+ else footerNode.classList.remove("show-link");
+
+ if (toBeExpand) expandNode.setAttribute("expanded", "");
+ else expandNode.removeAttribute("expanded");
+};
+
+const actions = (detail: Code, id: string, footer: HTMLElement): void => {
+ if (detail.code.css) injectCSS(detail.code.css, id);
+
+ if (option.jsfiddle) footer.appendChild(getJsfiddleBtn(detail));
+ if (option.codepen) footer.appendChild(getCodepenButton(detail));
+};
+
+export const initDemo = (): void => {
+ const containers = select(document, "code-demo-wrapper");
+
+ if (containers.length)
+ containers.forEach((container) => {
+ if (!container.hasAttribute("data-inited")) {
+ container.style.display = "block";
+
+ const { id } = container;
+ const codeElement = select(container, "code-wrapper")[0];
+ const displayElement = select(container, "display-wrapper")[0];
+ const footerElement = select(container, "code-demo-footer")[0];
+ const appElement = select(displayElement, "code-demo-app")[0];
+
+ const code = decodeURIComponent(container.dataset.code || "");
+ const type = decodeURIComponent(container.dataset.type || "");
+ const config = JSON.parse(
+ decodeURIComponent(container.dataset.config || "{}")
+ ) as Partial;
+ const { html = "none", js = "none", css = "none" } = config;
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+ const height = codeElement.querySelector("div")!.clientHeight;
+
+ if (
+ html === "none" &&
+ (js === "none" || js === "babel") &&
+ css === "none"
+ ) {
+ const horizontalConfig =
+ typeof config.horizontal === "undefined"
+ ? option.horizontal
+ : config.horizontal;
+ const expandButton = getExpandButton();
+
+ expandButton.addEventListener(
+ "click",
+ expandHandler.bind(
+ null,
+ expandButton,
+ height,
+ codeElement,
+ footerElement
+ )
+ );
+
+ footerElement.appendChild(expandButton);
+
+ if (horizontalConfig) {
+ container.classList.add("horizontal");
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+ const hCodeNode = codeElement.firstChild!.cloneNode(
+ true
+ ) as HTMLElement;
+
+ hCodeNode.classList.add("code-demo-h-code");
+ displayElement.appendChild(hCodeNode);
+ }
+
+ if (type.includes("react")) {
+ const reactCode = getReactCode(code, config);
+
+ if (reactCode) {
+ window.ReactDOM.render(
+ window.React.createElement(reactCode.code.js),
+ appElement
+ );
+
+ actions(reactCode, id, footerElement);
+ }
+ } else if (type.includes("vue")) {
+ const vueCode = getVueCode(code, config);
+ const component = window.Vue.extend(vueCode.script);
+ const app = new component().$mount();
+
+ appElement.appendChild(app.$el);
+
+ actions(vueCode, id, footerElement);
+ } else {
+ const vanillaCode = getVanillaCode(code, config);
+
+ appElement.innerHTML = vanillaCode.code.html;
+ // eslint-disable-next-line @typescript-eslint/no-implied-eval
+ new Function(`return (function(){${vanillaCode.script}})()`)();
+
+ actions(vanillaCode, id, footerElement);
+ }
+ } else {
+ const codepenCode = getCode(code, config, type);
+
+ displayElement.style.display = "none";
+ codeElement.style.height = `${height}px`;
+ footerElement.appendChild(getCodepenButton(codepenCode));
+ footerElement.style.height = "40px";
+ }
+
+ container.setAttribute("data-inited", "");
+ }
+ });
+ else setTimeout(() => initDemo(), 300);
+};
diff --git a/packages/md-enhance/src/demo/utils.ts b/packages/md-enhance/src/demo/utils.ts
new file mode 100644
index 000000000000..f8e36b1b4893
--- /dev/null
+++ b/packages/md-enhance/src/demo/utils.ts
@@ -0,0 +1,261 @@
+import { CodeDemoOptions } from "packages/md-enhance/types";
+
+export const option = CODE_DEMO_OPTIONS;
+
+export const h = (
+ tag: string,
+ attrs: Record,
+ children?: HTMLElement[]
+): HTMLElement => {
+ const node = document.createElement(tag);
+ attrs &&
+ Object.keys(attrs).forEach((key) => {
+ if (!key.indexOf("data")) {
+ const k = key.replace("data", "");
+ node.dataset[k] = attrs[key];
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-ignore
+ } else node[key] = attrs[key];
+ });
+
+ if (children)
+ children.forEach((child) => {
+ node.appendChild(child);
+ });
+
+ return node;
+};
+
+const getHtmlTemplate = (html: string): string => `${html}
`;
+
+const getReactTemplate = (code: string): string =>
+ `${code
+ .replace("export default ", "")
+ .replace(
+ /App\.__style__(\s*)=(\s*)`([\s\S]*)?`/,
+ ""
+ )}ReactDOM.render(React.createElement(App), document.getElementById("app"))`;
+
+const getVueJsTemplate = (js: string): string =>
+ `new Vue({ el: '#app', ${js
+ .replace(/export\s+default\s*\{(\n*[\s\S]*)\n*\}\s*;?$/u, "$1")
+ .replace(
+ /export\s+default\s*Vue\.extend\s*\(\s*\{(\n*[\s\S]*)\n*\}\s*\)\s*;?$/u,
+ "$1"
+ )
+ .trim()} })`;
+
+interface VueScript {
+ (): unknown;
+ template: string;
+}
+
+const getVueScript = (html: string, js: string): VueScript => {
+ const scripts = js.split(/export\s+default/u);
+ const scriptStrOrg = `(function() {${scripts[0]} ; return ${scripts[1]}})()`;
+
+ const scriptStr = window.Babel
+ ? window.Babel.transform(scriptStrOrg, { presets: ["es2015"] }).code
+ : scriptStrOrg;
+
+ const scriptObj = [eval][0](scriptStr) as VueScript;
+ scriptObj.template = html;
+
+ return scriptObj;
+};
+
+const getVanillaScript = (js: string): string =>
+ window.Babel ? window.Babel.transform(js, { presets: ["es2015"] }).code : js;
+
+export interface Code {
+ code: {
+ html: string;
+ js: string;
+ css: string;
+ };
+ template: {
+ html: string;
+ js: string;
+ };
+
+ jsLib: string[];
+ cssLib: string[];
+}
+
+export interface VanillaCode extends Code {
+ script: string;
+}
+
+export const getVanillaCode = (
+ code: string,
+ config: Partial
+): VanillaCode => {
+ const htmlBlock = /([\s\S]+)<\/html>/u.exec(code);
+ const jsBlock = /
+
+```
+
+:::
+
+::: demo react
+
+```js
+export default class App extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = { message: "very handsome" };
+ }
+ render() {
+ return (
+
+ Mr.Hope is {this.state.message}
+
+ );
+ }
+}
+App.__style__ = `
+.box-react span {
+ color: red;
+}
+`;
+```
+
+:::
+
+::: demo vue
+
+```html
+
+ Mr.Hope is {{ message }}
+
+
+
+```
+
+:::
+
+::: demo
+
+```html
+
+ # Title is very handsome.
+
+
+
+```
+
+```json
+{
+ "html": "markdown",
+ "js": "typescript",
+ "css": "scss"
+}
+```
+
+:::
+
+::: demo react
+
+```js
+export default class App extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = { message: "very handsome" };
+ }
+ render() {
+ return (
+
+ Mr.Hope is {this.state.message}
+
+ );
+ }
+}
+App.__style__ = `
+.box-react span {
+ color: red;
+}
+`;
+```
+
+```json
+{
+ "js": "typescript"
+}
+```
+
+:::
+
+::: demo vue
+
+```html
+
+ Mr.Hope is {{ message }}
+
+
+
+```
+
+```json
+{
+ "js": "typescript",
+ "css": "scss"
+}
+```
+
+:::
+
### Presentation
@slidestart
diff --git a/tests/src/zh/guide/markdown.md b/tests/src/zh/guide/markdown.md
index 4e1485ccf1de..7c3556558071 100644
--- a/tests/src/zh/guide/markdown.md
+++ b/tests/src/zh/guide/markdown.md
@@ -78,6 +78,166 @@ $$
- [点击查看](https://vuepress-theme.mrhope.site/zh/guide/feature/markdown/tex/)
+### 代码案例
+
+::: demo
+
+```html
+
+ Mr.Hope
+ Is 十分 帅
+
+
+
+```
+
+:::
+
+::: demo react
+
+```js
+export default class App extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = { message: "十分帅" };
+ }
+ render() {
+ return (
+
+ Mr.Hope {this.state.message}
+
+ );
+ }
+}
+App.__style__ = `
+.box-react span {
+ color: red;
+}
+`;
+```
+
+:::
+
+::: demo vue
+
+```html
+
+ Mr.Hope {{ message }}
+
+
+
+```
+
+:::
+
+::: demo
+
+```html
+
+ # 标题 十分帅！
+
+
+
+```
+
+```json
+{
+ "html": "markdown",
+ "js": "typescript",
+ "css": "scss"
+}
+```
+
+:::
+
+::: demo react
+
+```js
+export default class App extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = { message: "十分帅" };
+ }
+ render() {
+ return (
+
+ Mr.Hope {this.state.message}
+
+ );
+ }
+}
+App.__style__ = `
+.box-react span {
+ color: red;
+}
+`;
+```
+
+```json
+{
+ "js": "typescript"
+}
+```
+
+:::
+
+::: demo vue
+
+```html
+
+ Mr.Hope {{ message }}
+
+
+
+```
+
+```json
+{
+ "js": "typescript",
+ "css": "scss"
+}
+```
+
+:::
+
### 幻灯片
@slidestart