コードブロックの高度な機能

blog-hishaku のコードブロックは Shiki によるシンタックスハイライトに加えて、メタ文字列による拡張機能を持っています。この記事では各機能を実例付きで紹介します。

タイトル表示

コードフェンスの info 文字列に title="ファイル名" を指定すると、コード枠のヘッダにファイル名が表示されます。

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

hello('blog-hishaku');

url と linkText を併用すると、ソースリンクも表示できます。

export const config = {
  site: 'https://example.com',
};

mark:行番号 で特定の行をハイライトできます。範囲指定も可能です。

const first = '1行目はハイライト';
const second = '2行目は通常';
const third = '3行目はハイライト';
const fourth = '4行目もハイライト';

command:("$":行番号範囲) でシェルのプロンプト風表示を付けられます。$ はユーザー、# は root を表します。

pnpm install
pnpm dev

rm -rf node_modules

コードが8行を超えると自動で折りたたまれ、ヘッダに展開ボタンとコピーボタンが付きます。

1行目
2行目
3行目
4行目
5行目
6行目
7行目
8行目
9行目
10行目

8行以下のコードは展開されたまま表示され、コピーボタンのみ付きます。

console.log('8行以内は折りたたまれません');