expressive code

(2024-04-04)

ブログにコードを表示する場合に、コピー機能があると便利です。

expressive code のインストール

npx astro add astro-expressive-code

でインストールできるのですが、そのまま yarn start すると、

Incorrect integration order: To allow code blocks on MDX pages to use astro-expressive-code, please move astroExpressiveCode() before mdx() in the "integrations" array of your Astro config file.
  Stack trace:
    at astro:config:setup (file:///home/mituo/astroblog/node_modules/astro-expressive-code/dist/index.js:209:17)
    at async createContainer (file:///home/mituo/astroblog/node_modules/astro/dist/core/dev/container.js:20:14)
    at async dev (file:///home/mituo/astroblog/node_modules/astro/dist/core/dev/dev.js:14:19)
    at async runCommand (file:///home/mituo/astroblog/node_modules/astro/dist/cli/index.js:132:22)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

ちゃんと読んで、素直に実行すればよかった。

astro.config.mjs の設定が、

export default defineConfig({
  integrations: [tailwind(), mdx(), expressiveCode()]
});

となっているのが原因のようで、
エラーメッセージにあるように、

export default defineConfig({
  integrations: [tailwind(), expressiveCode(), mdx()]
});

としたら動きました。

こんなことでハマりました。

背景色の変更

デフォルトでは明るすぎるので、背景色を変更しました。

これも一筋縄では行きません。

astro.confi.mjs を以下のように変更しました。

import { defineConfig } from 'astro/config';
import tailwind from "@astrojs/tailwind";
import mdx from "@astrojs/mdx";


import expressiveCode from "astro-expressive-code";


// https://astro.build/config
export default defineConfig({
  integrations: [
    tailwind(),
    expressiveCode({
      themes: ['github-dark'],
    }),
    mdx()]
});

他のテーマも選べます。

https://expressive-code.com/guides/themes/

いくつかのオプション

認識できる言語は多数あるようですが、bash　や shell　とすると、左上に何だか丸いものが表示されます。
この環境では色はついていませんが。

Terminal window
sudo apt install php

タイトルを表示したい時は、

foo.js
const foo = () => {
    console.log("foo");
};

タイトルの下にボーダーがあった方が見やすいので、テーマを「‘one-dark-pro’」に変更しました。

フォントサイズの変更はどこに設定するのか今の段階ではわからないので、ちょっと小さめで 0.85 rem のようです。