Skip to content
Copied!

VitePress覚書

VitePressでこのサイトを構築し運用する中で書き留めた独立した記事群。

7件の覚書最終更新:
  1. 私は如何にしてVitePressを愛するようになったか

    私がインターネットを利用し始めた1990年代は,Yahoo!やNetscape Navigatorが広く用いられていた時代でした。当時の個人サイトは,主としてHTMLの直書きによって構築され,カウンターや掲示板を備える形態が一般的でした。サイトの発見可能性は,人手による分類登録や各サイトに設置された「リンク集」に大きく…

  2. Dockerで開発サーバを動かす

    VitePressはViteを採用しています。Hot Module Replacementにより,VitePressドキュメントを執筆するにあたり,プレビューをリアルタイムで更新させることができます。このプロジェクトでは,VitePress開発サーバをDockerで起動し,Markdown本文はObsidianで編集す…

  3. 図(figure)プラグイン

    標準的なMarkdown記法では,画像を挿入する手段はaltしかなく,キャプションの付与や画像の横並べ,サイズ指定,テキスト回り込みといった,技術文書や学術文書で必要になる機能が欠けています。本稿では,これらを実現するカスタムmarkdown-itプラグインの実装を記録します。完成後は,以下のように書けます。単一画像に…

  4. Pikchrによる図の挿入

    Pikchr(ピクチャー)はSQLiteの作者D. Richard Hippが開発したテキストベースの作図言語です。Markdownのfenced code blockに記述したPikchrスクリプトをクライアントサイドのWebAssemblyでSVGに変換してページに埋め込む仕組みを記録します。以下のように書きます…

  5. VitePressプロジェクト構成

    このページでは,このリポジトリ固有のディレクトリ構成とルーティング方針を整理します。一般的なVitePressではdocs直下に記事を置きますが,本プロジェクトはdocs/sigbitをsrcDirにしています。理由は,docs/sigbitをObsidian Vaultとして同期するためです。主要な構成は次の通りです…

  6. Vueコンポーネント

    VitePressではMarkdownファイルに直接`や`タグを書いて実行できます。あらかじめHTML, CSS, JavaScriptを組み合わせた部品を定義しておき,Markdownから呼び出すこともできます。この仕組みのことをVue Single-File Componentと呼びます。Vueコンポーネントを一度…

  7. VitePressでWebAssemblyを使う

    VitePressのコンテンツ内でWebAssembly(WASM)を利用する際の,汎用的な設計をまとめます。ここではRay Tracingに依存しない共通論点(配置,読み込み,制約)を扱います。WASMの生成物は,通常,グルーコード(.js / .mjs)とバイナリ(.wasm)の2ファイルで構成されます。このプロジ…