更新ログ

2025/02/20

• remark-breaksを追加して改行を有効化
• rehype-github-alertsを追加してalertブロックと引用ブロックを追加

2025/03/08

• remark-youtubeで YouTube 埋め込みを追加
• remark-collapseで折りたたみを追加

テンプレート

このブログは、sub-tさんの個人ブログテンプレートをフォークしてデプロイしています。

GitHub - sub-t/blog-template: Next.js + markdown Blog Template

Next.js + markdown Blog Template. Contribute to sub-t/blog-template development by creating an account on GitHub.

https://github.com/sub-t/blog-template

追加した機能

デプロイして使う上で、いくつか追加したい機能があったのでいろいろと実装しました。

リンクカードを実装

• remark-link-cardでリンクカードを実装
  • remarkParseでパースした後、rlcでリンクカードを追加
  • remarkRehypeとrehypeStringifyで変換時にallowDangerousHtmlを true に
  • rlc.cssにリンクカードの CSS を配置

Google

世界中のあらゆる情報を検索するためのツールを提供しています。さまざまな検索機能を活用して、お探しの情報を見つけてください。

https://google.com

Github Flavored Markdown を有効化

• remark-Gfmで Github Flavored Markdown を有効化

タスクリスト

• やること
• やり終わったこと

打消し線

チルダで囲むと打消し線

注釈

注釈とか¹

URL, mailto の自動リンカー

www.example.com, https://example.com, [email protected].

コードブロックの拡張

• rehype-code-titlesとrehype-prism-plusでコードブロックにタイトルとシンタックスハイライト・行番号を追加

import rehypeAutolinkHeadings from 'rehype-autolink-headings';
import rehypeCodeTitles from 'rehype-code-titles';
import { rehypeGithubAlerts } from 'rehype-github-alerts';
import rehypePrism from 'rehype-prism-plus';
import rehypeSlug from 'rehype-slug';
import rehypeStringify from 'rehype-stringify';
import remarkBreaks from 'remark-breaks';
import remarkGfm from 'remark-gfm';
import rlc from 'remark-link-card';
import remarkParse from 'remark-parse';
import remarkRehype from 'remark-rehype';
import remarkYoutube from 'remark-youtube';
import { unified } from 'unified';

export default async function markdownToHtml(markdown: string) {
  const result = await unified()
    .use(remarkParse)
    .use(remarkBreaks)
    .use(remarkGfm)
    .use(rlc)
    .use(remarkYoutube)
    .use(remarkRehype, { allowDangerousHtml: true })
    .use(rehypeCodeTitles)
    .use(rehypePrism, { ignoreMissing: true })
    .use(rehypeAutolinkHeadings)
    .use(rehypeStringify, { allowDangerousHtml: true })
    .use(rehypeSlug)
    .use(rehypeGithubAlerts, true)
    .process(markdown);

  return result.toString();
}

改行

remark-breaksを追加して改行を有効化しました。
これまでは markdown 通りの改行が出来ていませんでしたが、これで改行が出来るようになりました。

ここを
改行

アラートブロック

rehype-github-alertsを追加してalertブロックと引用ブロックを追加しました。

> [!NOTE]
> ユーザーが流し読みしているときでも考慮すべき情報を強調します。

> [!TIP]
> コードをよりよくするための手法を強調します。

> [!IMPORTANT]
> 重要な部分を強調表示します。

> [!WARNING]
> 潜在的なリスクを含み、ユーザーの注意を必要とする重要な内容です。

> [!CAUTION]
> リスクを含み、するべきではないことを強調表示します。

> 引用です。
> > 二重引用もできます。

引用です。

二重引用もできます。

YouTube 埋め込み

[](https://www.youtube.com/watch?v=yrwoBOHiR2E)

埋め込みたいリンクをインラインリンク形式で書き、remark-link-cardの処理を回避

折りたたみ

その他

• Google Analyticsでトラフィック解析を実装