ブログ記事のコードを見やすくする

はじめに

ページでのコードの表示を見やすくするために、Rehype Pretty Codeを導入しました。Rehype Pretty Codeは、Shikiをベースにしたシンタックスハイライトを提供してくれます。

ブログへの導入

公式ドキュメントを参考に、MDXを読み込むファイルでimportします。オプションについても公式ドキュメントに詳細があります。

import rehypePrettyCode from 'rehype-pretty-code'
 
// オプション
const rehypeCodeOptions = {
  theme: 'catppuccin-latte', // テーマ
  keepBackground: false,
}
 
export function MDXContent({ source }: Props) {
  return (
    <MDXRemote
      source={source}
      options={{
        mdxOptions: {
          rehypePlugins: [rehypePrettyCode, rehypeCodeOptions],
        },
      }}
    />
  )
}

Rehype Pretty Codeは、コードを表示するだけではなく、表示を見やすくするための機能があります。また、スタイリング部分はCSSでカスタマイズできます。MDXファイルでコードブロックを使用した例と、CSSでのカスタマイズ方法を紹介します。

通常のコードブロック

コードブロックは、バッククォート3つで囲むと記述できます。

```javascript
const evenOrOdd = (num) => {
  if (num % 2 == 0) {
    return '偶数'
  } else {
    return '奇数'
  }
}
evenOrOdd(10) // '偶数'
```

上のマークダウンは、次のように表示されます。いい感じにシンタックスハイライトが機能しています。

const evenOrOdd = (num) => {
  if (num % 2 == 0) {
    return '偶数'
  } else {
    return '奇数'
  }
}
evenOrOdd(10) // '偶数'

Rehype Pretty Codeは、コードブロック全体のfigure要素にdata-rehype-pretty-code-figure属性を適用します。 CSSで次のように書けばコードブロックのスタイリングができます。

figure[data-rehype-pretty-code-figure] {
  /* コードブロック全体のスタイリング */
}
pre [data-line] {
  /* 行のスタイリング */
}

行ハイライト

{}内に行番号を指定するとその行を強調できます。,で複数指定、-で範囲指定できます。

```javascript {2-6,8}
const evenOrOdd = (num) => {
  if (num % 2 == 0) {
    return '偶数'
  } else {
    return '奇数'
  }
}
evenOrOdd(10) // '偶数'
```

const evenOrOdd = (num) => {
  if (num % 2 == 0) {
    return '偶数'
  } else {
    return '奇数'
  }
}
evenOrOdd(10) // '偶数'

CSSで次のように書けば行ハイライトのスタイリングができます。

pre [data-highlighted-line] {
  /*行ハイライトのスタイリング*/
}

文字ハイライト

/または"で囲んだ文字を強調できます。半角スペースで区切ると複数指定できます。

```javascript /evenOrOdd/
const evenOrOdd = (num) => {
  if (num % 2 == 0) {
    return '偶数'
  } else {
    return '奇数'
  }
}
evenOrOdd(10) // '偶数'
```

const evenOrOdd = (num) => {
  if (num % 2 == 0) {
    return '偶数'
  } else {
    return '奇数'
  }
}
evenOrOdd(10) // '偶数'

markタグが使われています。

また、グループ分けでのハイライトも可能で、公式ドキュメントにスタイリングの設定例も記載されています。

タイトル

title=""でタイトルがつけられます。ファイル名や言語などを"で囲って追加すると良さそうです。

```javascript title="test.js"
const evenOrOdd = (num) => {
  if (num % 2 == 0) {
    return '偶数'
  } else {
    return '奇数'
  }
}
evenOrOdd(10) // '偶数'
```

上部にタイトルがつきました。

test.js

const evenOrOdd = (num) => {
  if (num % 2 == 0) {
    return '偶数'
  } else {
    return '奇数'
  }
}
evenOrOdd(10) // '偶数'

CSSで次のように書けばタイトル部分のスタイリングができます。

figcaption[data-rehype-pretty-code-title] {
  /*タイトル部分のスタイリング*/
}

キャプション

caption=""でキャプションがつけられます。

```javascript caption="キャプションだよ"
const evenOrOdd = (num) => {
  if (num % 2 == 0) {
    return '偶数'
  } else {
    return '奇数'
  }
}
evenOrOdd(10) // '偶数'
```

下部にキャプションがつきました。

const evenOrOdd = (num) => {
  if (num % 2 == 0) {
    return '偶数'
  } else {
    return '奇数'
  }
}
evenOrOdd(10) // '偶数'

キャプションだよ

CSSで次のように書けばキャプション部分のスタイリングができます。

figcaption[data-rehype-pretty-code-caption] {
  /*キャプション部分のスタイリング*/
}

行番号

showLineNumbersで行番号を表示できます。

```javascript showLineNumbers
const evenOrOdd = (num) => {
  if (num % 2 == 0) {
    return '偶数'
  } else {
    return '奇数'
  }
}
evenOrOdd(10) // '偶数'
```

左側に行番号がつきました。

const evenOrOdd = (num) => {
  if (num % 2 == 0) {
    return '偶数'
  } else {
    return '奇数'
  }
}
evenOrOdd(10) // '偶数'

{}で始める行番号を指定できます。

```javascript showLineNumbers{5}
const evenOrOdd = (num) => {
  if (num % 2 == 0) {
    return '偶数'
  } else {
    return '奇数'
  }
}
evenOrOdd(10) // '偶数'
```

const evenOrOdd = (num) => {
  if (num % 2 == 0) {
    return '偶数'
  } else {
    return '奇数'
  }
}
evenOrOdd(10) // '偶数'

スタイリングは公式ドキュメントを参考にしました。

機能を組み合わせる

もちろん機能を組み合わせて使用できます。

```js showLineNumbers title="test.js" {3,8}
const evenOrOdd = (num) => {
  if (num % 2 == 0) {
    return '偶数'
  } else {
    return '奇数'
  }
}
evenOrOdd(10) // '偶数'
```

test.js

const evenOrOdd = (num) => {
  if (num % 2 == 0) {
    return '偶数'
  } else {
    return '奇数'
  }
}
evenOrOdd(10) // '偶数'

おわりに

Rehype Pretty Codeはコードブロックに少し追加するだけで見やすくするための機能が多くてすごく便利です。

テーマがたくさんあって悩みました。それに、コードブロックをCSSで好き勝手にスタイリングできるのは自由でいいですね。

お役に立てれば幸いです💕