ブログにView as Markdownを実装した

DRANK

先日からこのブログに “View as Markdown” 機能を実装した。（タイトル右側のMarkdownアイコンが目印）記事をMarkdownテキストとしてブラウズできるようにしており、記事のURLに .md をつけるとMarkdown版にアクセスできる。最近いろんな開発者向けドキュメントサイトなどで見るアレだ。Astroで実装する場合、シンプルにページとして[slug].md.tsというエントリポイントを作成すればいい。また、記事の本文についてはAstro Content LayerでMarkdownファイルを管理しているのであれば、コンテンツオブジェクトの.body プロパティにMarkdown形式の本文がそのまま残っているのでこれを読み取ればよい。Frontmatterも出したければコンテンツオブジェクトのプロパティから復元することができる。import type { CollectionEntry } from 'astro:content'; import yaml from 'yaml'; /** * Content Collectionのentryからraw Markdownを取得 * entry.dataから必要なフィールドのみを選択してFrontmatterを構築し、entry.bodyと結合する */ export function readRawMarkdown(entry: CollectionEntry<'posts'>): string { if (!entry.body) { throw new Error(`Entry ${entr…