Astroを使っている開発者なら、シンタックスハイライト付きの美しいコードブロックを簡単に追加できることは重要なポイントです。 Astroには、シンタックスハイライトを提供する便利なコンポーネント「Code」があります。このガイドでは、Codeコンポーネントの使い方や設定方法、カスタマイズのポイントまで解説します。

Codeコンポーネントの基本的な使い方

まずは基本から。AstroのCodeコンポーネントは、シンプルにコードを表示したいときにとても役立ちます。使い方も簡単です。まず、.astroファイルの先頭にCodeコンポーネントをインポートしましょう。

---
import { Code } from 'astro/components';
---

インポートしたら、次のように使います。

<Code code={`
function greet(name) {
  console.log(\`Hello, \${name}!\`);
}
greet('Astro');
`} lang="js" />

これだけで、JavaScriptのシンタックスハイライト付きのコードブロックが表示されます。

Codeコンポーネントのプロパティ

Codeコンポーネントには、いくつかの設定プロパティがあります。主なものは次の通りです。

  • code: 表示したいコードを文字列で指定します。
  • lang: コードの言語を指定します（例: "js"、"python"、"html"）。
  • theme: シンタックスハイライトのテーマを選択できます。

表示できるテーマ一覧

Astroは、Shikiという強力なハイライトライブラリを使用しており、いくつかのテーマから選択可能です。具体的には以下のようなテーマがあります。

  • 'github-dark'（デフォルト） 
    function greet(name) {
console.log(`Hello, ${name}!`);
}
greet('Astro');
  • 'dark-plus' 
    function greet(name) {
console.log(`Hello, ${name}!`);
}
greet('Astro');
  • 'github-light' 
    function greet(name) {
console.log(`Hello, ${name}!`);
}
greet('Astro');
  • 'material-theme-darker' 
    function greet(name) {
console.log(`Hello, ${name}!`);
}
greet('Astro');
  • 'material-theme-lighter' 
    function greet(name) {
console.log(`Hello, ${name}!`);
}
greet('Astro');
  • 'material-theme-ocean' 
    function greet(name) {
console.log(`Hello, ${name}!`);
}
greet('Astro');
  • 'material-theme-palenight' 
    function greet(name) {
console.log(`Hello, ${name}!`);
}
greet('Astro');
  • 'material-theme' 
    function greet(name) {
console.log(`Hello, ${name}!`);
}
greet('Astro');
  • 'min-dark' 
    function greet(name) {
console.log(`Hello, ${name}!`);
}
greet('Astro');
  • 'min-light' 
    function greet(name) {
console.log(`Hello, ${name}!`);
}
greet('Astro');
  • 'monokai' 
    function greet(name) {
console.log(`Hello, ${name}!`);
}
greet('Astro');
  • 'nord' 
    function greet(name) {
console.log(`Hello, ${name}!`);
}
greet('Astro');
  • 'one-dark-pro' 
    function greet(name) {
console.log(`Hello, ${name}!`);
}
greet('Astro');
  • 'poimandres' 
    function greet(name) {
console.log(`Hello, ${name}!`);
}
greet('Astro');
  • 'rose-pine-dawn' 
    function greet(name) {
console.log(`Hello, ${name}!`);
}
greet('Astro');
  • 'rose-pine-moon' 
    function greet(name) {
console.log(`Hello, ${name}!`);
}
greet('Astro');
  • 'rose-pine' 
    function greet(name) {
console.log(`Hello, ${name}!`);
}
greet('Astro');
  • 'slack-dark' 
    function greet(name) {
console.log(`Hello, ${name}!`);
}
greet('Astro');
  • 'slack-ochin' 
    function greet(name) {
console.log(`Hello, ${name}!`);
}
greet('Astro');
  • 'solarized-dark' 
    function greet(name) {
console.log(`Hello, ${name}!`);
}
greet('Astro');
  • 'solarized-light' 
    function greet(name) {
console.log(`Hello, ${name}!`);
}
greet('Astro');

例えば、dark-plusテーマを使いたい場合は次のように書きます。

<Code 
  code={`console.log('Hello, Astro!');`} 
  lang="js" 
  theme="dark-plus" 
/>

コードの折り返しと行番号表示

長いコードを表示する際、コードの折り返しや行番号を表示したい場合があります。Codeコンポーネントはそれも簡単に対応できます。

<Code 
  code={`
for (let i = 0; i < 10; i++) {
  console.log(i);
}
  `} 
  lang="js" 
  theme="github-dark" 
  wrap 
  showLineNumbers 
/>

上記の例では、コードを折り返し、行番号も表示しています。

表示例) showLineNumbersを設定に入れてみましたが表示されず、、 折り返しはうまくいってそうです。

for (let i = 0; i < 10; i++) {
console.log(i);
// This is a very long comment to demonstrate line wrapping. It should wrap to the next line when it reaches the edge of the container.
}

インラインコードの使用

通常のコードブロックに加えて、Codeコンポーネントはインラインコードとしても使用できます。ブログ記事や説明文の中でコードを強調したいときに便利です。

<p>
  Here's an inline code example: <Code code="console.log('Inline!')" lang="js" inline />
</p>

表示例）

Here’s an inline code example: console.log('Inline!')

動的に生成されたコードも対応可能

動的に生成されたコードもCodeコンポーネントで扱うことができます。例えば、ランダムな値を生成するコードを動的に表示する場合、次のように書きます。

---
const generatedCode = `
function generateRandomNumber() {
  return Math.floor(Math.random() * 100);
}
console.log(generateRandomNumber());
`;
---

<Code code={generatedCode} lang="js" />

特定の行をハイライトする方法

Codeコンポーネントでは、特定の行をハイライトすることもできます。特に重要な部分を強調したいときに便利です。

<Code 
  code={`
function highlight() {
  console.log('This line is highlighted');
  return true;
}
  `} 
  lang="js" 
  theme="one-dark-pro" 
  highlight="2" 
/>

この例では、2行目がハイライトされます。

highlightプロパティでは、単一行、複数行、範囲指定、さらには複数の範囲を組み合わせてハイライトすることができます。

  • 単一行: "2"
  • 複数行: "1,3,5"
  • 範囲指定: "2-5"
  • 複合: "1-3,5,8-10"

パフォーマンスの考慮事項

Codeコンポーネントはサーバーサイドでレンダリングされます。そのため、特に大量のコードブロックがある場合、ビルド時間に影響が出る可能性があります。もしパフォーマンスが問題になる場合は、Prism.jsなどのクライアントサイドハイライトライブラリを使用することも検討しましょう。

カスタムスタイリングで自分好みに

Codeコンポーネントは、CSSを使って簡単にカスタマイズできます。例えば、次のようにスタイルを設定してみましょう。

<style>
  .astro-code {
    padding: 1em;
    border-radius: 4px;
    font-size: 0.9em;
  }
</style>

<Code code={`console.log('Styled!')`} lang="js" />

これにより、コードブロックにパディングや角丸、フォントサイズの調整を加えることができます。Astroの強力なCSSサポートを活用して、自分好みのデザインに仕上げましょう。

まとめ

AstroのCodeコンポーネントを使えば、シンタックスハイライト付きの美しいコードブロックを簡単に追加できます。テーマ設定や行番号の表示、特定の行のハイライト、インラインでの使用など、柔軟な機能を駆使して、技術コンテンツをより見やすく、魅力的にすることができます。