このテンプレートの MDX 拡張記法

このテンプレートでは、MDX 標準の記法に加えて、本文を書きやすくするための拡張をいくつか用意しています。

• :::type[ラベル] で <Callout> / <Alert> を呼び出す
• URL 文字列だけの段落を外部リンクカードに展開する
• [[slug]] で内部記事へのリンク／カードを生成する
• astro-expressive-code によるコードハイライト

この記事は、それぞれの記法と実際の見た目を確認するためのサンプルです。

Callout（:::type[ラベル]）

:::type[タイトル] のようにラベルを付けると <Callout> に変換されます。対応 type は point / check / help / warning / alert の 5 種類。

:::point[ポイント]
記事の要点を強調したい場面に使う。
:::

Alert（:::type）

ラベルを省略すると、タイトル領域のない <Alert> に変換されます。

:::warning
ラベルを省略するとタイトル領域のない Alert になります。
:::

内部に複数要素を含むケース

::: の中でも基本的な Markdown はそのまま使えます。リストやリンク、強調などが破綻なく並ぶかを確認します。

外部リンクカード（URL 自動展開）

URL文字列だけの段落は、ビルド時に対象サイトのOGPを取得して<LinkCard type="external">に展開されます。fetch結果は.cache/ogp/にMD5ハッシュ付きJSONでキャッシュされ、TTL 7日以内は再fetchしません。

https://lism-css.com/

実際の表示：

Lism CSS Lism CSS の公式ドキュメントサイトです。

Lism CSS

GitHub - lism-css/lism-css Contribute to lism-css/lism-css development by creating an account on GitHub.

GitHub

上書き

fetchに失敗するサイトや、表示するタイトル・説明を自分で指定したい場合は、MDX上で<LinkCard type="external">を直書きできます。

<LinkCard type="external" href="https://example.com" title="独自タイトル" description="独自の説明文をここに書く。" />

独自タイトル 独自の説明文をここに書く。

example.com

内部リンクカード（[[slug]]）

Obsidian風の[[slug]]記法で、同じブログ内の記事を参照できます。slugはsrc/posts/{category}/配下のファイル名（拡張子なし）です。

段落単独でカード化

[[slug]]を段落単独で書くと、Content Collectionsから記事情報を引いて<LinkCard type="internal">を出力します。

[[lism-css-intro]]

Lism CSS の概要 Lism CSS は @layer によるレイヤ管理・デザイントークン・Property Class・レイアウトプリミティブ・React/Astro コンポーネントをひとつにまとめた軽量な CSS 設計フレームワーク。主要な構成要素を整理する。

2026.04.20 TECH

blog-astro-techlog の構成 Lism CSS リポジトリに同梱されている技術ブログ向け Astro テンプレートの仕様。コードハイライト・カテゴリ・タグ・記事内 TOC・年月アーカイブ・Pagefind 検索を装備した構成を順に解説する。

2026.04.25 TECH

文中リンク

段落の途中で[[slug]]を書くと、記事タイトルをテキストにしたインラインリンクになります。

詳しくは [[lism-css-intro]] を参照してください。

詳しくは Lism CSS の概要 を参照してください。

表示テキストの上書き

[[slug|表示テキスト]]で表示テキストを上書きできます。段落単独でもエイリアスがある場合はリンクとして扱われます（カード化したいときはエイリアス無しで書く）。

[[lism-css-intro|前回の記事]] を参照。

前回の記事 を参照。

コードハイライト（astro-expressive-code）

コードブロックのシンタックスハイライトは astro-expressive-code を使用しています。astro.config.mjs で themes: 'github-dark' を指定しているため、ライト/ダーク両モードで同じ配色（GitHub Dark）が適用されます。複数テーマを切り替えたい場合は themes: ['github-dark', 'github-light'] のように配列で指定し、themeCssSelector でサイト側のテーマ切り替えと連動させます。

通常のコードブロックに加えて、ファイル名タイトル付き表示や、特定の行のハイライト、差分表示なども書けます。

```ts title="src/lib/archive.ts" {3}
export function getArchiveKey(date: string) {
  const [year, month] = date.split(/[-./]/);
  return { year, month };
}
```

export function getArchiveKey(date: string) {
  const [year, month] = date.split(/[-./]/);
  return { year, month };
}

```bash title="Terminal"
pnpm install
pnpm dev
```

pnpm install
pnpm dev

仕様の所在

各記法を実装している remark プラグインは src/lib/ 配下にまとまっています。

詳細は blog-astro-techlog の構成 のテンプレート解説を参照。