Next.js で Markdown ブログを作ってみた

import remarkGfm from 'remark-gfm';
import remarkParse from 'remark-parse';
import remarkRehype from 'remark-rehype';
import { unified } from 'unified';
// import remarkMdx from 'remark-mdx'
import rehypeReact from "rehype-react";
import remarkFrontmatter from "remark-frontmatter";
import CodeBlock from '../components/code-block';
import remarkBreaks from "remark-breaks";
// import { inspect } from "unist-util-inspect";
import * as prod from "react/jsx-runtime";
import { visit } from "unist-util-visit";
import rehypeSlug from "rehype-slug";
import rehypeAutolinkHeadings from "rehype-autolink-headings";
import rehypeToc from "rehype-toc";
import remarkExtractFrontmatter from "remark-extract-frontmatter";
import yaml from "yaml";
import { parseSelector } from "hast-util-parse-selector";
import LinkCard from '../components/link-card';

//
// extensions
//
function extractCodeBlock() {
  return (tree: any) => {
    visit(tree, 'element', (node, index, parent) => {
      if (node.tagName === 'code' && parent.tagName === 'pre') {
        // parent.tagName = node.tagName;
        parent.children = node.children;
        parent.properties.className = node.properties.className;
      }
      else if (node.tagName === "code") {
        node.properties.className = "inline-code-block"
      }
    });
  };
}

function chanegeFootnoteName() {
  return (tree: any) => {
    visit(tree, 'element', (node, index, parent) => {
      if (node.tagName === "h2" && node.properties.id === "footnote-label") {
        node.children[0].value = "参考文献";
      }
    });
  };
}

function tableWrapper() {
  return (tree: any) => {
    visit(tree, 'element', (node, index, parent) => {
      if (node.tagName === "table") {
        const wrapper = parseSelector("div") as any;
        wrapper.children = [node];
        wrapper.properties.className = "table-wrapper";
        parent.children[index as number] = wrapper;
      }
    });
  };
}

//
// processor
//
const processor = unified()
  .use(remarkParse)
  .use(remarkFrontmatter)
  .use(remarkExtractFrontmatter, {
    yaml: yaml.parse,
    name: 'frontMatter'
  })
  .use(remarkBreaks)
  .use(remarkGfm)
  // .use(remarkMdx)
  .use(remarkRehype)
  .use(extractCodeBlock)
  .use(rehypeReact, {
    ...prod,
    components: {
      pre: (props: any) => {
        var lang: string | undefined;
        var fileName: string | undefined;
        const className = props.className?.replace("language-", "").split(":");
        if (className && className.length === 1) {
          lang = className[0];
        }
        else if (className && className.length === 2) {
          lang = className[0];
          fileName = className[1];
        }
        return (
          <CodeBlock
            lang={lang}
            fileName={fileName}
          >
            {props.children}
          </CodeBlock>
        )
      },
    },
  } as any)
  .use(chanegeFootnoteName)
  .use(tableWrapper)
  .use(rehypeSlug)
  .use(rehypeAutolinkHeadings)
  .use(rehypeToc, { headings: ["h2", "h3"] });

export default processor;

import styles from "./code-block.module.scss";
import shiki from "shiki";

export default async function CodeBlock({
  children,
  lang,
  fileName,
}: {
  children: string,
  lang?: string,
  fileName?: string,
}) {

  console.log("CodeBlock", lang, fileName);

  const highlighter = await shiki.getHighlighter({ theme: "dark-plus" });
  const tokens = highlighter.codeToThemedTokens(children, lang);
  const htmlString = shiki.renderToHtml(tokens, {
    bg: highlighter.getBackgroundColor("dark-plus"),
    fg: highlighter.getForegroundColor("dark-plus"),
    elements: {
      pre({ className, style, children }) {
        return `<pre class="${className} ${styles.pre}" style="${style}" tabindex="0">${children}</pre>`;
      },
      code({ children }) {
        return `<code class="${styles.code}">${children}</code>`
      }
    }
  })

  return (
    <div className={styles.container}>
      {fileName &&
        <div className={styles.filenameSpace}>{fileName}</div>
      }
      <div
        className={`${styles.codeFrame} ${fileName ? styles.withFilename : ""}`}
        dangerouslySetInnerHTML={{ __html: htmlString }}
      >
      </div>
    </div>
  );
};

見た目が結構気に入っている。

export function Header() {

  ...


  // dark mode
  const [isDarkMode, setIsDarkMode] = useState(false);
  const toggleDarkMode = () => {
    setIsDarkMode(!isDarkMode);
  };

  useEffect(() => {
    document.body.setAttribute("data-theme", isDarkMode ? "dark" : "light");
    console.log("dark mode: " + isDarkMode);
  }, [isDarkMode]);


  // initialize dark mode
  useEffect(() => {
    setIsDarkMode(window.matchMedia('(prefers-color-scheme: dark)').matches);
  }, []);


  ...

}