mdsvexでもディレクティブを使いたい

---
layout: guide
title: PCCSとは？
---
 
<script lang="ts">
  import ToneImageDiagram from "$lib/components/index/ToneImageDiagram.svelte"
</script>
 
## PCCSとは？
 
PCCSは、色のイメージや配色を考えるときに便利な色の表し方です。
PCCSでは、1つの色を色相とトーンによって表します。
 
- 色相：赤・黄・緑・青・紫など、どの色みをもたせるか
- トーン：どんなイメージをもたせるか
 
<ToneImageDiagram />
 
たとえば、dトーンは明度が低めなのでやや暗く、彩度も中間くらいであまり鮮やかとはいえず、「くすんだ」といったイメージになります。
 
PCCSでは、トーンを調整することで、色のイメージを調整することができます。

// svelte.config.js
import { mdsvex } from "mdsvex"
import { fileURLToPath } from "url"
 
/** @type {import('@sveltejs/kit').Config} */
const config = {
  // ...
  preprocess: [
    mdsvex({
      layout: {
        guide: fileURLToPath(new URL("./src/lib/layouts/guide.svelte", import.meta.url))
      },
      remarkPlugins: []
    })
  ],
  extensions: [".svelte", ".svx"]
}
 
export default config

<main id="readme">
  Lorem ipsum.
  <hr class="red" />
  A
  <i>lovely</i>
  language know as
  <abbr title="HyperText Markup Language">HTML</abbr>
  .
</main>

:::main{#readme}
 
Lorem:br
ipsum.
 
::hr{.red}
 
A :i[lovely] language know as :abbr[HTML]{title="HyperText Markup Language"}.
 
:::

{
  // ...
  "overrides": {
    "mdsvex": {
      "remark-parse": "^11.0.0"
    }
  }
}

import { fromMarkdown } from "mdast-util-from-markdown"
import { directive } from "micromark-extension-directive"
import { directiveFromMarkdown } from "mdast-util-directive"
import { frontmatter } from "micromark-extension-frontmatter"
import { frontmatterFromMarkdown } from "mdast-util-frontmatter"
import type { Processor } from "unified"
import type { Node } from "unist"
 
export default function remarkDirective(this: Processor) {
  // mdsvex bundles an old unified that only reads `this.Parser` (uppercase).
  // Using `this.parser` (the non-deprecated form) breaks directive parsing
  // because mdsvex never picks it up. Suppress the deprecation warning here.
  this.Parser = function (doc: string) {
    // fromMarkdown (CommonMark) cannot parse Svelte component attributes that
    // use {expr} syntax — it fails to recognize the tag as HTML and wraps it
    // in a <p>, causing a Svelte compile error on the " inside {[...]}.
    //
    // Fix: stash every self-closing component line before parsing, replace it
    // with a plain <div> HTML block that fromMarkdown preserves as-is, then
    // restore the originals after the AST is built.
    const stash: string[] = []
 
    const prepared = doc.replace(/^(<[A-Z][^\n]*\{[^\n]*\/>)\s*$/gm, (_, tag) => {
      const i = stash.length
      stash.push(tag)
      return `<div data-svx="${i}"></div>`
    })
 
    const tree = fromMarkdown(prepared, "utf-8", {
      extensions: [frontmatter(["yaml"]), directive()],
      mdastExtensions: [frontmatterFromMarkdown(["yaml"]), directiveFromMarkdown()]
    })
 
    if (stash.length > 0) restore(tree, stash)
 
    return tree
  }
}
 
function restore(node: Node, stash: string[]): void {
  const n = node as unknown as Record<string, unknown>
  if (n["type"] === "html" && typeof n["value"] === "string") {
    n["value"] = (n["value"] as string).replace(/<div data-svx="(\d+)"><\/div>/g, (_, i: string) => stash[+i])
  }
  if (Array.isArray(n["children"])) {
    for (const child of n["children"] as Node[]) restore(child, stash)
  }
}

// svelte.config.js
import { mdsvex } from "mdsvex"
import { fileURLToPath } from "url"
import remarkDirective from "./src/lib/remark/directive.ts"
import remarkGuideDirectives from "./src/lib/remark/custom-directives.ts"
 
/** @type {import('./src/lib/remark/custom-directives.ts').DirectiveConfigMap} */
const guideDirectives = {
  container: [
    { name: "tips", tag: "div", classes: ["tips"] },
    { name: "example", tag: "div", classes: ["example"] },
    { name: "term-card", tag: "div", classes: ["term-card"] }
  ],
  leaf: [],
  text: [{ name: "mark", tag: "span", classes: ["mark", "-brackets"] }]
}
 
/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: [
    mdsvex({
      layout: {
        guide: fileURLToPath(new URL("./src/lib/layouts/guide.svelte", import.meta.url))
      },
      remarkPlugins: [remarkDirective, [remarkGuideDirectives, guideDirectives]]
    })
  ],
  extensions: [".svelte", ".svx"]
}
 
export default config