feat(vitepress): add dom markup

packages/genji-theme-vitepress/__tests__/.vitepress/config.mjs

@@ -1,7 +1,9 @@
 import { defineConfig } from "vitepress";
+import { config } from "../../src/config";
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
+  extends: config,
   title: "Genji Theme VitePress",
   description: "A VitePress Site",
   cleanUrls: true,
@@ -11,7 +13,6 @@ export default defineConfig({
       { text: "Home", link: "/" },
       { text: "Examples", link: "/markdown-examples" },
     ],
-
     sidebar: [
       {
         text: "Examples",
@@ -21,7 +22,6 @@ export default defineConfig({
         ],
       },
     ],
-
     socialLinks: [
       { icon: "github", link: "https://github.com/vuejs/vitepress" },
     ],

packages/genji-theme-vitepress/__tests__/markdown-examples.md

@@ -2,9 +2,9 @@
 
 Test Genji' built-in Markdown Extensions.
 
-## Basic Block
+## Pure Block
 
-It should render a red block.
+It should not render without `| dom` mark with `js`.
 
 ```js
 display(() => {
@@ -15,3 +15,49 @@ display(() => {
   return div;
 });
 ```
+
+## Renderable Block
+
+It should render with `| dom` mark with `js`.
+
+```js | dom {0,4}
+display(() => {
+  const div = document.createElement("div");
+  div.style.width = "100px";
+  div.style.height = "100px";
+  div.style.background = "red";
+  return div;
+});
+```
+
+## JavaScript Block
+
+It should render with `| dom` mark with `javascript`.
+
+```javascript | dom
+display(() => {
+  const div = document.createElement("div");
+  div.style.width = "100px";
+  div.style.height = "100px";
+  div.style.background = "red";
+  return div;
+});
+```
+
+## Python Block
+
+It should not render python block.
+
+```python
+def add(x, y):
+  return x + y
+```
+
+## Python Block2
+
+It should not render python block with `| dom` mark.
+
+```python | dom
+def add(x, y):
+  return x + y
+```

packages/genji-theme-vitepress/src/Layout.vue

@@ -20,17 +20,35 @@ function injectGlobal() {
   Object.assign(window, global);
 }
 
+const parsers = {
+  js: (d) => d,
+  javascript: (d) => d,
+};
+
+function mount(block, node) {
+  const cell = document.createElement("div");
+  cell.classList.add("genji-cell");
+  cell.appendChild(node);
+  block.parentNode.insertBefore(cell, block);
+}
+
 function render() {
-  const blocks = document.getElementsByClassName("language-js");
+  const codes = document.querySelectorAll("[data-genji]");
+  const blocks = Array.from(codes).filter((code) => {
+    if (!code.dataset.genji) return false;
+    return true;
+  });
   if (!blocks.length) return;
   for (const block of blocks) {
-    const pre = block.getElementsByClassName("shiki")[0];
-    const code = pre.textContent.replace(/\n/g, "");
-    const node = new Function(`return ${code}`)();
-    const cell = document.createElement("div");
-    cell.classList.add("genji-cell");
-    cell.appendChild(node);
-    block.parentNode.insertBefore(cell, block);
+    const { dataset } = block;
+    const { lang } = dataset;
+    const parser = parsers[lang];
+    if (parser) {
+      const pre = block.getElementsByClassName("shiki")[0];
+      const code = pre.textContent.replace(/\n/g, "");
+      const node = new Function(`return ${parser(code)}`)();
+      mount(block, node);
+    }
   }
 }
 </script>

packages/genji-theme-vitepress/src/config.js

@@ -0,0 +1,10 @@
+import { defineConfig } from "vitepress";
+import { genjiPlugin } from "./genji";
+
+export const config = defineConfig({
+  markdown: {
+    config: (md) => {
+      md.use(genjiPlugin);
+    },
+  },
+});

packages/genji-theme-vitepress/src/genji.js

@@ -0,0 +1,22 @@
+const regexType = /\|\s*([^\s]+)/;
+const regexDIV = /(\<div class="[^"]*")/;
+
+export function genjiPlugin(md) {
+  const fence = md.renderer.rules.fence;
+  if (!fence) return;
+  md.renderer.rules.fence = (...args) => {
+    const [tokens, idx] = args;
+    const token = tokens[idx];
+    const { info } = token;
+    const match = info.match(regexType);
+    const result = match ? match[1] : null;
+    const lang = info.split(" ")[0];
+    if (!result) return fence(...args);
+    const html = fence(...args);
+    const newHTML = html.replace(
+      regexDIV,
+      `$1 data-genji="${result}" data-lang="${lang}"`
+    );
+    return newHTML;
+  };
+}

packages/genji-theme-vitepress/src/style.css

@@ -1,3 +1,7 @@
 .genji-cell {
-  margin: 16px 0px;
+  margin: 16px 0px 0px 0px;
+}
+
+.genji-cell + div {
+  margin-top: 0px !important;
 }