【nuxt3】Contentモジュールのシンタックスハイライトを使う

この記事の環境

    "nuxt": "^3.8.0"

入れ方

Contentモジュールを使っていれば、シンタックスハイライトをとても簡単に利用できます。

こちらがドキュメントです。Configuration - Nuxt Content

nuxt.config.tsの記述

以下のようにnuxt.config.tsのcontentにhighlightを指定します。

themeはお好みで。

export default defineNuxtConfig({
  //別の設定...
content: {
    highlight: {
      theme: 'github-dark',
    }
  },
  //別の設定...

なんと、これだけです。

codeブロックで言語を指定する

次のように、```のあとに言語の拡張子名を入れます。（下はエディタの画像）

これで、実際にページを表示するとcodeブロックにシンタックスハイライトが効いているはずです。

おまけ

ちなみに、言語指定までしないと謎の半角に見舞われます。

「特に何の言語でもないんだけど」という場合はtxtやmdなど、ちょうどよいものを探しましょう。

txtにした場合のテスト
txtにした場合のテスト
txtにした場合のテスト

hogehogeにしてみると消えなかったので、なんでもいいというわけではないようです。

hogehogeにした場合のテスト
hogehogeにした場合のテスト
hogehogeにした場合のテスト

まったく、嫌な半角スペースですね！

参考になれば幸いです！