Termコンポーネントを書くための[[用語]]記法を導入

Author: chvmvd

docs/1-trial-session/04-javascript/index.mdx

@@ -4,16 +4,16 @@ title: JavaScriptことはじめ
 
 import helloWorldByJavascriptVideo from "./hello-world-by-javascript.mp4";
 
-## <Term>JavaScript</Term>
+## [[JavaScript]]
 
 {/* prettier-ignore */}
-<Term>HTML</Term>がウェブサイトの構造を表す言語だとすれば、<Term>**JavaScript**</Term>はウェブサイトに振る舞いを与える言語といえます。ブラウザさえあれば環境に関係なく同じように実行可能な、強力なプログラミング言語です。
+[[HTML]]がウェブサイトの構造を表す言語だとすれば、[[**JavaScript**]]はウェブサイトに振る舞いを与える言語といえます。ブラウザさえあれば環境に関係なく同じように実行可能な、強力なプログラミング言語です。
 
 ![Web開発で用いられる言語](../02-html/web-development-languages.drawio.svg)
 
-## <Term>JavaScript</Term>でHello World!
+## [[JavaScript]]でHello World!
 
-プログラミングの世界では、まず画面に`Hello World!`と表示させることが慣例になっています。<Term>JavaScript</Term>を用いて画面に`Hello World!`を表示してみましょう。
+プログラミングの世界では、まず画面に`Hello World!`と表示させることが慣例になっています。[[JavaScript]]を用いて画面に`Hello World!`を表示してみましょう。
 
 まずは、`index.html`を次のように書き換えます。
 
@@ -40,26 +40,26 @@ document.write("Hello World!");
 
 <video src={helloWorldByJavascriptVideo} controls />
 
-## <Term>JavaScript</Term>が動く仕組み
+## [[JavaScript]]が動く仕組み
 
-<Term>HTML</Term>ファイルの中に、以下のような記述があります。
+[[HTML]]ファイルの中に、以下のような記述があります。
 
 ```html title="index.html"
 <script src="./script.js"></script>
 ```
 
-まず、この記述によって、`script.js`ファイルがブラウザによって読み込まれます。この`script.js`に記述されているのが<Term>JavaScript</Term>です。
+まず、この記述によって、`script.js`ファイルがブラウザによって読み込まれます。この`script.js`に記述されているのが[[JavaScript]]です。
 
 :::info
 
-この講座の中では、`script`<Term>要素</Term>を常に **`body`<Term>要素</Term>の末尾** に記述するようにします。これは、<Term>JavaScript</Term>が読み込まれるタイミングで他のすべての<Term>HTML要素</Term>がすでに表示されていることを保証するためです。
+この講座の中では、`script`[[要素]]を常に **`body`[[要素]]の末尾** に記述するようにします。これは、[[JavaScript]]が読み込まれるタイミングで他のすべての[[HTML要素]]がすでに表示されていることを保証するためです。
 
 :::
 
-## <Term>JavaScript</Term> の基本文法
+## [[JavaScript]] の基本文法
 
 {/* prettier-ignore */}
-<Term>JavaScript</Term>のプログラムで、セミコロンで区切られた部分を<Term>文</Term>と呼びます。<Term>JavaScript</Term>の実行環境は、プログラム中に含まれる<Term>文</Term>を上から下に向けて順番に実行していきます。
+[[JavaScript]]のプログラムで、セミコロンで区切られた部分を[[文]]と呼びます。[[JavaScript]]の実行環境は、プログラム中に含まれる[[文]]を上から下に向けて順番に実行していきます。
 `document.write`はブラウザの画面に出力するための命令です。
 
 ```javascript title="script.js"

docusaurus.config.ts

@@ -4,6 +4,7 @@ import type * as Preset from "@docusaurus/preset-classic";
 import { execSync } from "node:child_process";
 import math from "remark-math";
 import katex from "rehype-katex";
+import remarkTerm from "./src/remark/remark-term";
 
 const config: Config = {
   title: "ut.code(); Learn",
@@ -46,7 +47,7 @@ const config: Config = {
           showLastUpdateTime: true,
           sidebarPath: "./sidebars.ts",
           editUrl: "https://github.com/ut-code/utcode-learn/blob/master/",
-          remarkPlugins: [math],
+          remarkPlugins: [math, remarkTerm],
           rehypePlugins: [katex],
         },
         theme: {

package-lock.json

@@ -22,6 +22,8 @@
     "@tippyjs/react": "^4.2.6",
     "clsx": "^2.1.1",
     "hast-util-is-element": "^3.0.0",
+    "mdast-util-mdx-jsx": "^3.2.0",
+    "mdast-util-phrasing": "^4.1.0",
     "outdent": "^0.8.0",
     "prism-react-renderer": "^2.4.1",
     "react": "^19.1.1",
@@ -31,7 +33,8 @@
     "react-slick": "^0.31.0",
     "rehype-katex": "^7.0.1",
     "remark-math": "^6.0.0",
-    "slick-carousel": "^1.8.1"
+    "slick-carousel": "^1.8.1",
+    "unified": "^11.0.5"
   },
   "browserslist": {
     "production": [
@@ -52,6 +55,7 @@
     "@docusaurus/module-type-aliases": "^3.9.1",
     "@docusaurus/tsconfig": "^3.9.1",
     "@docusaurus/types": "^3.9.1",
+    "@types/mdast": "^4.0.4",
     "@types/react-slick": "^0.23.13",
     "prettier": "^3.6.2",
     "typescript": "^5.9.3"

package.json

@@ -0,0 +1,116 @@
+import type { Plugin } from "unified";
+import type { Nodes, Root, RootContent } from "mdast";
+import "mdast-util-mdx-jsx";
+import { phrasing } from "mdast-util-phrasing";
+
+const remarkTerm: Plugin<[], Root> = () => (tree) => transform(tree);
+
+export default remarkTerm;
+
+function isParent(node: Nodes) {
+  return "children" in node;
+}
+
+function transform(node: Nodes) {
+  if (!isParent(node)) return;
+
+  for (const child of node.children) {
+    transform(child);
+  }
+
+  node.children = transformChildren(
+    node.children.flatMap((child) => transformChild(child)),
+  );
+}
+
+function transformChild(node: RootContent): RootContent[] {
+  if (node.type !== "text") return [node];
+
+  const transformedChildren: RootContent[] = [];
+  let text = node.value;
+
+  if (text.startsWith("]]")) {
+    transformedChildren.push({ type: "text", value: "]]" });
+    text = text.slice(2);
+  }
+
+  if (text.endsWith("[[")) {
+    text = text.slice(0, -2);
+  }
+
+  for (const segmentedText of text.split(/(\[\[.*?\]\])/)) {
+    if (segmentedText === "") {
+      continue;
+    }
+    if (segmentedText.startsWith("[[")) {
+      transformedChildren.push({
+        type: "mdxJsxTextElement",
+        name: "Term",
+        attributes: [],
+        children: [
+          {
+            type: "text",
+            value: segmentedText.slice(2, -2),
+          },
+        ],
+      });
+    } else {
+      transformedChildren.push({
+        type: "text",
+        value: segmentedText,
+      });
+    }
+  }
+
+  if (node.value.endsWith("[[")) {
+    transformedChildren.push({ type: "text", value: "[[" });
+  }
+
+  return transformedChildren;
+}
+
+function transformChildren(children: RootContent[]): RootContent[] {
+  const transformedChildren: RootContent[] = [];
+
+  let i = 0;
+  while (i < children.length) {
+    const openingBracket = children[i];
+    const innerElement = children[i + 1];
+    const closingBracket = children[i + 2];
+    if (
+      openingBracket.type !== "text" ||
+      openingBracket.value !== "[[" ||
+      !innerElement
+    ) {
+      transformedChildren.push(openingBracket);
+      i++;
+      continue;
+    }
+
+    if (
+      !closingBracket ||
+      closingBracket.type !== "text" ||
+      closingBracket.value !== "]]"
+    ) {
+      transformedChildren.push(openingBracket, innerElement);
+      i += 2;
+      continue;
+    }
+
+    if (!phrasing(innerElement)) {
+      transformedChildren.push(openingBracket, innerElement, closingBracket);
+      i += 3;
+      continue;
+    }
+
+    transformedChildren.push({
+      type: "mdxJsxTextElement",
+      name: "Term",
+      attributes: [],
+      children: [innerElement],
+    });
+    i += 3;
+  }
+
+  return transformedChildren;
+}