microCMS + Astroでシンタックスハイライトを行う

やり方

ライブラリのインストール

まずは必要なライブラリをインストールします。

npm install cheerio highlight.js

astroファイルの実装

microCMS公式ブログ「AstroとmicroCMSでつくるブログサイト」の通りにAstroブログが作成されているとして、修正するポイントの説明をします。

ブログ記事詳細ページ（src/pages/[blogId].astro）に対して、次の処理を追加してください。

• シンタックスハイライト用ライブラリのimportを追加
• 記事の詳細情報の取得処理後に、シンタックスハイライトの適用処理を追加

// src/pages/[blogId].astro
---
import Layout from "../layouts/Layout.astro";
import { getBlogs, getBlogDetail } from "../library/microcms";

// ====== 追加する処理 ここから ======
import { load } from "cheerio";
import hljs from "highlight.js";
// ====== 追加する処理 ここまで ======


// 詳細記事ページの全パスを取得
export async function getStaticPaths() {
  const response = await getBlogs({ fields: ["id"] });
  return response.contents.map((content: any) => ({
    params: {
      blogId: content.id,
    },
  }));
}

//記事の詳細情報を取得
const { blogId } = Astro.params;
const blog = await getBlogDetail(blogId as string);

// ====== 追加する処理 ここから ======
// cheerioでコードブロックを抜き出し、シンタックスハイライトを適用
const $ = load(blog.content);
$("pre code").each((_, elm) => {
  const result = hljs.highlightAuto($(elm).text());
  $(elm).html(result.value);
  $(elm).addClass("hljs");
});
blog.content = $.html();
// ====== 追加する処理 ここまで ======

---

<Layout title="My first blog with Astro">
  <main>
    <h1 class="title">{blog.title}</h1>
    <p class="publishedAt">公開日時：{blog.publishedAt}</p>
    <div class="post" set:html={blog.content}></div>
  </main>
</Layout>

<style>
  {/* 省略 */}
</style>

テーマの設定

highlight.jsのデモサイトから好きなテーマを選び、importしてください。

// 例 Vs 2015の場合
import "highlight.js/styles/vs2015.css";

以上でソースコードがハイライトされていれば終了です。

終わりに

microCMSで入力したコードブロックを、 Astroでシンタックスハイライトする方法について説明しました。

この方法は「どのプログラミング言語のシンタックスハイライトをするか」はhighlight.jsが自動判定していますが、手動で言語を指定したい場合はこちらの記事「microCMS｜プログラミング言語を指定してシンタックスハイライトを行う方法」をご参照ください。

参考

この記事は以下の情報を参考にしました。

• MarkdownとMDX 🚀 Astroドキュメント
• API Reference 🚀 Astroドキュメント
• サーバサイドでシンタックスハイライトを行う | microCMSブログ
• AstroとmicroCMSでつくるブログサイト | microCMSブログ