Expressive Code デモ - 高機能コードブロック

2024/1/15

技術 astro expressive-code demo

Expressive Code の機能デモ

このページでは、Astroに導入したExpressive Codeの様々な機能をデモンストレーションします。

基本的なシンタックスハイライト

// 基本的なJavaScriptコード
const message = 'Hello, Expressive Code!';
console.log(message);

function greet(name) {
  return `Hello, ${name}!`;
}

const result = greet('World');
console.log(result);

ファイル名とタイトル表示

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

class UserService {
  private users: User[] = [];

  addUser(user: User): void {
    this.users.push(user);
  }

  getUser(id: number): User | undefined {
    return this.users.find((user) => user.id === id);
  }
}

行のハイライト

def fibonacci(n):
    if n <= 1:  # この行がハイライトされます
        return n
    else:       # これらの行も
        return fibonacci(n-1) + fibonacci(n-2)  # ハイライト
# この関数は再帰的にフィボナッチ数列を計算します

# 使用例
for i in range(10):
    print(f"fib({i}) = {fibonacci(i)}")

差分表示（ins/del）

{
  "name": "my-project",
 "version": "1.0.0",
 "version": "1.1.0",
  "dependencies": {
   "astro": "^3.0.0"
   "astro": "^4.0.0",
   "astro-expressive-code": "^0.27.0"
  }
}

複数言語の混在

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
    <style>
      body {
        margin: 0;
        padding: 20px;
      }
      .container {
        max-width: 800px;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Welcome!</h1>
      <script>
        document.addEventListener('DOMContentLoaded', () => {
          console.log('Page loaded!');
        });
      </script>
    </div>
  </body>
</html>

ターミナルフレーム

# プロジェクトのセットアップ
npm create astro@latest my-blog
cd my-blog

# Expressive Codeをインストール
npm install astro-expressive-code

# 開発サーバーを起動
npm run dev

長いコード（スクロール対応）

/* レスポンシブデザインのためのCSS */
:root {
  --color-primary: #3b82f6;
  --color-secondary: #64748b;
  --color-accent: #f59e0b;
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f8fafc;
  --color-text-primary: #1e293b;
  --color-text-secondary: #475569;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.header {
  background-color: var(--color-bg-primary);
  border-bottom: 1px solid var(--color-secondary);
  padding: 1rem 0;
}

.navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-link {
  color: var(--color-text-primary);
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.nav-link:hover {
  background-color: var(--color-bg-secondary);
}

@media (max-width: 768px) {
  .navigation {
    flex-direction: column;
    gap: 1rem;
  }

  .container {
    padding: 0 0.5rem;
  }
}

React/Astroコンポーネント

---
export interface Props {
  title: string;
  date: Date;
  content: string;
  tags?: string[];
}

const { title, date, content, tags = [] } = Astro.props;

const formattedDate = date.toLocaleDateString('ja-JP', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
});
---

<article class="blog-post">
  <header>
    <h1>{title}</h1>
    <time datetime={date.toISOString()}>
      {formattedDate}
    </time>
    {
      tags.length > 0 && (
        <div class="tags">
          {tags.map((tag) => (
            <span class="tag">#{tag}</span>
          ))}
        </div>
      )
    }
  </header>

  <div class="content">
    <Fragment set:html={content} />
  </div>
</article>

<style>
  .blog-post {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
  }

  .tags {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
  }

  .tag {
    background: var(--color-accent);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
  }
</style>

特殊な注釈とマーカー

const API_URL = 'https://api.example.com'; // 重要な設定

async function fetchUser(id) {
  // この関数に注目
  try {
    const response = await fetch(`${API_URL}/users/${id}`);
    const user = await response.json();
    return user;
  } catch (error) {
    console.error('ユーザー取得エラー:', error);
    throw error;
  }
}

Expressive Codeの主な特徴

✅ 自動コピーボタン - 右上の📋ボタンでワンクリックコピー
✅ VS Codeテーマ対応 - 馴染みのあるシンタックスハイライト
✅ 行番号表示 - オプションで表示/非表示切り替え可能
✅ 行ハイライト - 重要な部分を強調表示
✅ ファイル名表示 - コードの文脈が分かりやすい
✅ 差分表示 - Git diffのような表示が可能
✅ ダーク/ライトモード - テーマに応じて自動切り替え
✅ モバイル対応 - レスポンシブデザイン
✅ アクセシビリティ - スクリーンリーダー対応

これらすべてが 設定ファイル1つ で動作します！