👋

Expressive Codeを導入してみる

2024年07月02日

ブログ

Expressive Code というのがコードハイライトに便利らしいので、試してみます。

Astroへの導入方法

公式の手順 によると、以下のコマンドを実行するだけ。すごい。

Terminal window
npx astro add astro-expressive-code

astro.config.mjs の変更内容も確認してくれるのが親切心溢れる感じ。

Expressive Codeを試す

ChatGPTにいろんな言語のコードブロックを生成してもらいました。

Plain Text

This is a plain text example.
It does not have any syntax highlighting.

JavaScript

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


greet('World');

TypeScript

interface Person {
  name: string;
  age: number;
}


function greet(person: Person) {
  console.log(`Hello, ${person.name}! You are ${person.age} years old.`);
}


const user: Person = { name: 'Alice', age: 25 };
greet(user);

JSON

{
  "name": "Alice",
  "age": 25,
  "isStudent": true,
  "courses": ["Math", "Science", "History"]
}

Java

public class Main {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

Python

def greet(name):
    print(f"Hello, {name}!")


greet('World')

C#

using System;


class Program
{
    static void Main()
    {
        Console.WriteLine("Hello, World!");
    }
}

いい感じ。