Claude Code के साथ Markdown Implementation

Markdownprocessingको Claude Code से Efficient बनाएं

ブlogやドキュメントサイトでは、Markdownの解析・変換・拡張がज़रूरीになり है।Claude Code का उपयोग करके、remarkやrehypeのplugindevelopment सेカスタムcomponentのimplementation तककम समय मेंbuild किया जा सकता है。

unified/remarkによるMarkdown解析

> remarkでMarkdownを解析してHTML変換するpipelineを作って。
> codeハイlight、GFMsupport、目अगलाgenerateも含めて。

import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkGfm from "remark-gfm";
import remarkRehype from "remark-rehype";
import rehypeHighlight from "rehype-highlight";
import rehypeStringify from "rehype-stringify";
import rehypeSlug from "rehype-slug";

export async function markdownToHtml(markdown: string): Promise<string> {
  const result = await unified()
    .use(remarkParse)
    .use(remarkGfm) // table、checklist、取り消し線
    .use(remarkRehype, { allowDangerousHtml: true })
    .use(rehypeSlug) // 見出しにIDを付与
    .use(rehypeHighlight) // codeハイlight
    .use(rehypeStringify, { allowDangerousHtml: true })
    .process(markdown);

  return String(result);
}

// Usage example
const html = await markdownToHtml(`
# はじめに

これは**test** है।

## code例

\`\`\`typescript
const greeting = "Hello, World!";
console.log(greeting);
\`\`\`

| 項目 | 値 |
|------|-----|
| A    | 100 |
| B    | 200 |
`);

目अगलाの自動generate

Markdownの見出し से目अगला（TOC）を自動generateするfeatures है।

interface TocItem {
  id: string;
  text: string;
  level: number;
  children: TocItem[];
}

export function extractToc(markdown: string): TocItem[] {
  const headingRegex = /^(#{1,6})\s+(.+)$/gm;
  const items: TocItem[] = [];
  let match: RegExpExecArray | null;

  while ((match = headingRegex.exec(markdown)) !== null) {
    const level = match[1].length;
    const text = match[2].trim();
    const id = text
      .toLowerCase()
      .replace(/[^\w\s\u3000-\u9fff]/g, "")
      .replace(/\s+/g, "-");

    items.push({ id, text, level, children: [] });
  }

  // ネスト構造に変換
  const toc: TocItem[] = [];
  const stack: TocItem[] = [];

  items.forEach((item) => {
    while (stack.length > 0 && stack[stack.length - 1].level >= item.level) {
      stack.pop();
    }

    if (stack.length === 0) {
      toc.push(item);
    } else {
      stack[stack.length - 1].children.push(item);
    }

    stack.push(item);
  });

  return toc;
}

カスタムremarkplugin

Markdownに独自の構文をaddするplugin createし है।

import { visit } from "unist-util-visit";
import type { Plugin } from "unified";
import type { Root, Paragraph, Text } from "mdast";

// :::note や :::warning で囲むとアラートブロックに変換するplugin
export const remarkAlert: Plugin<[], Root> = () => {
  return (tree) => {
    visit(tree, "paragraph", (node: Paragraph, index, parent) => {
      const firstChild = node.children[0];
      if (firstChild?.type !== "text") return;

      const text = (firstChild as Text).value;
      const match = text.match(/^:::(note|warning|tip|danger)\s*\n/);

      if (!match) return;

      const type = match[1];
      const content = text.slice(match[0].length).replace(/\n:::$/, "");

      // カスタムHTMLに変換
      (node as any).type = "html";
      (node as any).value = `<div class="alert alert-${type}"><p>${content}</p></div>`;
      (node as any).children = undefined;
    });
  };
};

Markdown सेReactcomponentへの変換

MDXを使わずにMarkdownをReactcomponentに変換する方法 है।

import { useMemo } from "react";
import { markdownToHtml } from "./markdown";
import DOMPurify from "isomorphic-dompurify";

interface MarkdownRendererProps {
  content: string;
  className?: string;
}

export function MarkdownRenderer({ content, className }: MarkdownRendererProps) {
  const [html, setHtml] = useState("");

  useEffect(() => {
    markdownToHtml(content).then((result) => {
      setHtml(DOMPurify.sanitize(result));
    });
  }, [content]);

  return (
    <div
      className={`prose prose-lg max-w-none ${className || ""}`}
      dangerouslySetInnerHTML={{ __html: html }}
    />
  );
}

Markdownfileのフロントマター解析

ブlog記事 आदिのフロントマターを含むMarkdownを解析し है।

import matter from "gray-matter";

interface BlogPost {
  title: string;
  description: string;
  pubDate: string;
  category: string;
  tags: string[];
  content: string;
}

export function parseBlogPost(fileContent: string): BlogPost {
  const { data, content } = matter(fileContent);

  return {
    title: data.title || "",
    description: data.description || "",
    pubDate: data.pubDate || "",
    category: data.category || "",
    tags: data.tags || [],
    content,
  };
}

// 複数fileの一括読み込み
import fs from "fs/promises";
import path from "path";

export async function getAllPosts(dir: string): Promise<BlogPost[]> {
  const files = await fs.readdir(dir);
  const mdFiles = files.filter((f) => f.endsWith(".md") || f.endsWith(".mdx"));

  const posts = await Promise.all(
    mdFiles.map(async (file) => {
      const content = await fs.readFile(path.join(dir, file), "utf-8");
      return { ...parseBlogPost(content), slug: file.replace(/\.mdx?$/, "") };
    })
  );

  return posts.sort(
    (a, b) => new Date(b.pubDate).getTime() - new Date(a.pubDate).getTime()
  );
}

CLAUDE.mdfileのलिखने का तरीकाके बारे मेंはCLAUDE.mdsettingsのベストプラクティスを、Webスクレイピングでfetchしたdataの加工はWebスクレイピングदेखें。

Summary

Claude Code का उपयोग करके、Markdownの解析pipelinebuild、カスタムplugindevelopment、フロントマター解析、目अगलाgenerate तक、Markdownprocessingに関するimplementationをकम समय में完了でき है।「こんなMarkdown拡張を作りたい」と伝える से हीappropriateなimplementationが得られ है।

विस्तार से जानने के लिएClaude Codeofficial documentationをदेखें。