DynamicSyntaxHighlighter

動的読み込み対応のシンタックスハイライターコンポーネント

基本的な使用例

DynamicSyntaxHighlighterの基本的な使用方法。動的読み込みによりパフォーマンスが最適化されています。

JavaScript コード例

TSX

import { DynamicSyntaxHighlighter } from './DynamicSyntaxHighlighter';

export default function JavaScriptExample() {
  return (
    <DynamicSyntaxHighlighter
      language="javascript"
      className="bg-gray-100 dark:bg-gray-800 rounded-lg p-4"
    >
{`function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

// 使用例
console.log(fibonacci(10)); // 55`}
    </DynamicSyntaxHighlighter>
  );
}

プレビュー

function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

// 使用例
console.log(fibonacci(10)); // 55

TypeScript コード例

TSX

import { DynamicSyntaxHighlighter } from './DynamicSyntaxHighlighter';

export default function TypeScriptExample() {
  return (
    <DynamicSyntaxHighlighter
      language="typescript"
      className="bg-gray-100 dark:bg-gray-800 rounded-lg p-4"
    >
{`interface User {
  id: number;
  name: string;
  email: string;
}

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

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

  findUser(id: number): User | undefined {
    return this.users.find(user => user.id === id);
  }
}`}
    </DynamicSyntaxHighlighter>
  );
}

プレビュー

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

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

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

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

レスポンシブパディング

バーティカルリズムを考慮したレスポンシブパディングの例。画面サイズに応じて適切な余白が適用されます。

レスポンシブパディング設定

TSX

import { DynamicSyntaxHighlighter } from './DynamicSyntaxHighlighter';

export default function ResponsiveExample() {
  return (
    <DynamicSyntaxHighlighter
      language="jsx"
      className="bg-gray-100 dark:bg-gray-800 rounded-lg p-3 sm:p-4 md:p-5 lg:p-6"
    >
{`export default function ResponsiveComponent() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      <div className="p-4 bg-white dark:bg-gray-800 rounded-lg shadow">
        <h3 className="text-lg font-semibold mb-2">カード 1</h3>
        <p className="text-gray-600 dark:text-gray-300">
          レスポンシブなカードレイアウトの例
        </p>
      </div>
    </div>
  );
}`}
    </DynamicSyntaxHighlighter>
  );
}

プレビュー - モバイル: p-3, SM: p-4, MD: p-5, LG: p-6

export default function ResponsiveComponent() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      <div className="p-4 bg-white dark:bg-gray-800 rounded-lg shadow">
        <h3 className="text-lg font-semibold mb-2">カード 1</h3>
        <p className="text-gray-600 dark:text-gray-300">
          レスポンシブなカードレイアウトの例
        </p>
      </div>
    </div>
  );
}

対応言語

様々なプログラミング言語とマークアップ言語に対応しています。言語ラベル表示のON/OFFも可能です。

言語ラベル表示なし

// JavaScript
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

言語ラベル表示あり

JavaScript

// JavaScript
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

コピー機能

右上のコピーボタンをクリックしてコードをクリップボードにコピーできます。

コピー機能付きコードブロック

TSX

import { DynamicSyntaxHighlighter } from './DynamicSyntaxHighlighter';

export default function CopyEnabledExample() {
  return (
    <DynamicSyntaxHighlighter
      language="jsx"
      className="bg-gray-100 dark:bg-gray-800 rounded-lg p-4"
      showCopyButton={true}
    >
{`import { DynamicSyntaxHighlighter } from './DynamicSyntaxHighlighter';

export default function MyComponent() {
  const code = \`console.log('Hello, World!');\`;
  
  return (
    <DynamicSyntaxHighlighter
      language="javascript"
      className="bg-gray-100 dark:bg-gray-800 rounded-lg p-4"
    >
      {code}
    </DynamicSyntaxHighlighter>
  );
}`}
    </DynamicSyntaxHighlighter>
  );
}

プレビュー - コピーボタン有効

import { DynamicSyntaxHighlighter } from './DynamicSyntaxHighlighter';

export default function MyComponent() {
  const code = `console.log('Hello, World!');`;
  
  return (
    <DynamicSyntaxHighlighter
      language="javascript"
      className="bg-gray-100 dark:bg-gray-800 rounded-lg p-4"
    >
      {code}
    </DynamicSyntaxHighlighter>
  );
}

コピー機能無効

TSX

import { DynamicSyntaxHighlighter } from './DynamicSyntaxHighlighter';

export default function CopyDisabledExample() {
  return (
    <DynamicSyntaxHighlighter
      language="jsx"
      className="bg-gray-100 dark:bg-gray-800 rounded-lg p-4"
      showCopyButton={false}
    >
{`// コピーボタンが表示されません
const example = "copy button disabled";`}
    </DynamicSyntaxHighlighter>
  );
}

プレビュー - コピーボタン無効

// コピーボタンが表示されません
const example = "copy button disabled";

レイアウトシフト対策

動的読み込み前後でレイアウトシフトが発生しないよう最適化されています。

上のボタンで表示/非表示を切り替えて、レイアウトシフトが発生しないことを確認できます。

カスタマイズ例

classNameやcustomStyleプロパティを使用してスタイルをカスタマイズできます。

カスタム背景色とボーダー

TSX

import { DynamicSyntaxHighlighter } from './DynamicSyntaxHighlighter';

export default function CustomStyledExample() {
  return (
    <DynamicSyntaxHighlighter
      language="css"
      className="bg-blue-50 dark:bg-blue-900/20 border-2 border-blue-200 dark:border-blue-700 rounded-xl p-6"
      customStyle={{ fontSize: "16px" }}
    >
{`.custom-component {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.custom-component:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}`}
    </DynamicSyntaxHighlighter>
  );
}

プレビュー - カスタムスタイル

.custom-component {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.custom-component:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

コンパクトスタイル

TSX

import { DynamicSyntaxHighlighter } from './DynamicSyntaxHighlighter';

export default function CompactExample() {
  return (
    <DynamicSyntaxHighlighter
      language="python"
      className="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded p-2"
      customStyle={{ fontSize: "12px" }}
    >
{`def quicksort(arr):
    if len(arr) <= 1:
        return arr
    pivot = arr[len(arr) // 2]
    left = [x for x in arr if x < pivot]
    middle = [x for x in arr if x == pivot]
    right = [x for x in arr if x > pivot]
    return quicksort(left) + middle + quicksort(right)`}
    </DynamicSyntaxHighlighter>
  );
}

プレビュー - コンパクトスタイル

def quicksort(arr):
    if len(arr) <= 1:
        return arr
    pivot = arr[len(arr) // 2]
    left = [x for x in arr if x < pivot]
    middle = [x for x in arr if x == pivot]
    right = [x for x in arr if x > pivot]
    return quicksort(left) + middle + quicksort(right)