ブログにソースコードを表示したい

本文中

このブログの本文の大部分は、microCMS の「リッチエディタ」を使い、リッチテキストという形式で書いている（リッチエディタの操作方法）。

リッチエディタでは、見出しや太字、箇条書き、リンクなどが使えるが、その中の「インラインコード」を使うと、その部分が<code>タグで囲まれて、int i = 0;のようになる。

リッチエディタで作成したコンテンツは、APIを叩くとHTMLとして取得できるので、それをそのままフロントエンド側で表示させ（たとえば Svelte の場合は{@html str}とするとstrがHTMLのコードとしてそのまま埋め込まれる）、グローバルなcssでサイト全体のpタグやcodeタグのスタイルを指定すれば、それなりに思い通りに表示できる。

別行立てのコードブロック

「コードブロック」を使うと<pre><code> </code></pre>の中に入れてくれるのでそれでもよいが、<pre>を更に<div>などで囲ってスタイルを調整したり、中身に応じてシンタックスハイライトなどをつけたりしたい場合、あとからでは大変なので、他の方法を試す。

当ブログの本文は、リッチテキスト1個ぽっきりではなく、

• リッチテキスト
• 画像
• プレーンテキスト（+分類用のid）

のどれか、としてコンテンツ管理をしている。

つまり、リッチテキストで表現するのに限界があった場合、一旦そこでリッチテキストを切り上げ、該当箇所はプレーンテキストとして書いておけば、一気に表現の幅が広がる。

（microCMSブログのこの記事を参考にしました→リッチエディタを使いつつ一部はHTMLで入稿する）

今回は、

• 分類用のidのところに「codeBlock」と書いてあったら、フロント側で、後続の内容をコードブロックとして挿入する

というルールにしておく。（idのところで何でも区別できるので、無限の拡張の可能性がある。楽譜の挿入や数式の挿入もこれで実現したい。）

この方法で実現した：

fn dfs(g: &Vec<Vec<usize>>, footprints: &mut Vec<usize>, i: usize, p: usize) {
    footprints.push(i);
    for &j in &g[i] {
        if j != p {
            dfs(&g, footprints, j, i);
            footprints.push(i);
        }
    }
}