Ryota Kondo

Ryota Kondo

2023/05/10

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

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

Astroはシンタックスハイライターとして、ShikiPrismをビルトインでサポートしています。ですが、これらはMarkdownまたはMDXファイルを対象としているようですので、今回はmicroCMS公式ブログの「サーバサイドでシンタックスハイライトを行う」を参考としたcheeriohighlight.jsを使う方法となっています。

やり方

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

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

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|プログラミング言語を指定してシンタックスハイライトを行う方法」をご参照ください。

参考

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

関連タグの記事

Ryota Kondo
Ryota Kondo

システムエンジニア・プログラマー|このブログサイトの運営もしており、思いついたことをまとめて記事を書いています💡