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

この記事で学べること

• Codeコンポーネントの基本的な使い方
• 利用可能なテーマとその設定方法
• 行番号表示、コード折り返し、特定行のハイライト
• インラインコードや動的コードの表示
• CSSによるカスタムスタイリング
• パフォーマンスを考慮した実装方法

Codeコンポーネントとは

Codeコンポーネントは、Astroに組み込まれているシンタックスハイライト機能です。内部ではShikiというライブラリを使用しており、VSCodeと同じ品質のハイライトを実現しています。

主な特徴は以下の通りです：

特徴	説明
ビルド時レンダリング	JavaScriptなしで表示可能
豊富なテーマ	20種類以上のテーマから選択可能
多言語対応	100以上のプログラミング言語をサポート
柔軟なカスタマイズ	行ハイライト、行番号など多彩なオプション

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

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

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

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

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

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

実際の表示例

function greet(name) {
console.log(`Hello, ${name}!`);
}
greet('Astro');

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

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

必須プロパティ

プロパティ	型	説明
code	string	表示したいコードを文字列で指定
lang	string	コードの言語を指定（例: "js"、"python"、"html"）

オプションプロパティ

プロパティ	型	デフォルト	説明
theme	string	"github-dark"	シンタックスハイライトのテーマ
wrap	boolean	false	コードの折り返しを有効にする
inline	boolean	false	インラインコードとして表示

使用例：複数のプロパティを組み合わせる

<Code
  code={`const message = "Hello, World!";
console.log(message);`}
  lang="js"
  theme="one-dark-pro"
  wrap
/>

表示できるテーマ一覧

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

ダークテーマ

'github-dark'（デフォルト）

function greet(name) {
console.log(`Hello, ${name}!`);
}
greet('Astro');

'dark-plus'

function greet(name) {
console.log(`Hello, ${name}!`);
}
greet('Astro');

'material-theme-darker'

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');

'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-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');

'solarized-dark'

function greet(name) {
console.log(`Hello, ${name}!`);
}
greet('Astro');

ライトテーマ

'github-light'

function greet(name) {
console.log(`Hello, ${name}!`);
}
greet('Astro');

'material-theme-lighter'

function greet(name) {
console.log(`Hello, ${name}!`);
}
greet('Astro');

'min-light'

function greet(name) {
console.log(`Hello, ${name}!`);
}
greet('Astro');

'rose-pine-dawn'

function greet(name) {
console.log(`Hello, ${name}!`);
}
greet('Astro');

'slack-ochin'

function greet(name) {
console.log(`Hello, ${name}!`);
}
greet('Astro');

'solarized-light'

function greet(name) {
console.log(`Hello, ${name}!`);
}
greet('Astro');

テーマの設定例

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

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

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

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

折り返しを有効にする

wrapプロパティを追加すると、長い行が自動的に折り返されます。

<Code
  code={`const longText = "This is a very long line of code that demonstrates how the wrap property works when enabled";`}
  lang="js"
  theme="github-dark"
  wrap
/>

表示例（折り返しあり）

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>
  変数を宣言するには <Code code="const name = 'Astro';" lang="js" inline /> と書きます。
</p>

表示例

変数を宣言するには const name = 'Astro'; と書きます。

配列のメソッドである array.map() を使うと、各要素を変換できます。

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

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

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

// 動的にコードを生成
const functionName = 'calculateSum';
const generatedCode = `
function ${functionName}(a, b) {
  return a + b;
}

// 使用例
const result = ${functionName}(10, 20);
console.log(result); // 30
`;
---

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

実践例：APIレスポンスをコードとして表示

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

// APIからデータを取得（例）
const userData = {
  id: 1,
  name: "John Doe",
  email: "john@example.com"
};

// JSONとして整形
const jsonCode = JSON.stringify(userData, null, 2);
---

<Code code={jsonCode} lang="json" theme="github-dark" />

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

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

基本的な使い方

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

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

ハイライトの指定方法

markプロパティでは、さまざまな指定方法が使えます：

指定方法	例	説明
単一行	"2"	2行目のみハイライト
複数行	"1,3,5"	1行目、3行目、5行目をハイライト
範囲指定	"2-5"	2行目から5行目までハイライト
複合指定	"1-3,5,8-10"	1〜3行目、5行目、8〜10行目をハイライト

実践例：変更箇所をハイライト

<Code
  code={`function calculateTotal(items) {
  // 変更: reduceを使用してシンプルに
  return items.reduce((sum, item) => sum + item.price, 0);
}

const cart = [
  { name: 'Apple', price: 100 },
  { name: 'Banana', price: 80 }
];

console.log(calculateTotal(cart)); // 180`}
  lang="js"
  theme="github-dark"
  mark="2-3"
/>

複数言語でのコード表示例

Codeコンポーネントは100以上の言語をサポートしています。いくつかの例を紹介します。

Python

def greet(name: str) -> str:
  """名前を受け取って挨拶を返す"""
  return f"Hello, {name}!"

# 使用例
message = greet("Python")
print(message)  # Hello, Python!

TypeScript

interface User {
id: number;
name: string;
email: string;
}

function getUserById(id: number): User | undefined {
const users: User[] = [
  { id: 1, name: "Alice", email: "alice@example.com" }
];
return users.find(user => user.id === id);
}

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Astro Code Component</title>
</head>
<body>
<h1>Hello, Astro!</h1>
</body>
</html>

CSS

.code-block {
padding: 1rem;
border-radius: 8px;
background-color: #1e1e1e;
font-family: 'Fira Code', monospace;
overflow-x: auto;
}

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

Codeコンポーネントはサーバーサイドでレンダリングされます。そのため、いくつかのパフォーマンス面での考慮が必要です。

メリット

• JavaScriptなしで動作: クライアントに送信されるのはHTMLとCSSのみ
• 初期表示が高速: ブラウザでのレンダリング処理が不要
• SEOに有利: 検索エンジンがコードを正しく認識

注意点

• ビルド時間への影響: 大量のコードブロックがある場合、ビルドに時間がかかる可能性
• バンドルサイズ: テーマごとにCSSが生成される

対策

多くのコードブロックがある場合は、以下の対策を検討してください：

1. テーマを統一する: 使用するテーマを1〜2種類に絞る
2. コードの分割: 長いコードは複数のブロックに分割
3. クライアントサイドハイライトの検討: Prism.jsやhighlight.jsの使用も選択肢

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

Codeコンポーネントは、CSSを使って簡単にカスタマイズできます。

基本的なスタイリング

<style>
  .astro-code {
    padding: 1.5em;
    border-radius: 8px;
    font-size: 0.9em;
    line-height: 1.6;
  }
</style>

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

実践例：モダンなコードブロックスタイル

<style>
  .astro-code {
    padding: 1.5rem;
    border-radius: 12px;
    font-size: 0.875rem;
    line-height: 1.7;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* スクロールバーのカスタマイズ */
  .astro-code::-webkit-scrollbar {
    height: 8px;
  }

  .astro-code::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
  }
</style>

まとめ

AstroのCodeコンポーネントを使えば、シンタックスハイライト付きの美しいコードブロックを簡単に追加できます。

ポイントの振り返り

• 基本: codeとlangプロパティでシンプルに表示
• テーマ: 20種類以上から選択可能（ダーク/ライト両方）
• カスタマイズ: 折り返し、インライン、行ハイライトなど多彩な機能
• パフォーマンス: サーバーサイドレンダリングでJavaScriptなし
• スタイリング: CSSで自由にカスタマイズ

技術ブログやドキュメントサイトを作成する際に、ぜひ活用してみてください。

参考文献

• Astro公式ドキュメント - Code Component
• Astro公式ドキュメント - Syntax Highlighting
• Shiki - A beautiful syntax highlighter
• Shiki - Themes
• Shiki - Languages