Quarto Projectへのpseudocode extensions導入

pseudocode
quarto
Author

Ryo Nakagami

Published

2025-07-31

Modified

2025-08-01

🎯 ゴール

  • Quarto PropjectのHTMLレンダリングでPseudocodeを利用可能にする

💻 Requirements

  • Quarto がインストール済み
  • Quarto プロジェクト（blogやbook）を作成済み

✅ 拡張機能のインストール

Quarto Pseudocode ExtensionをQuarto Projectにquartoコマンドでインストールします:

quarto add leovan/quarto-pseudocode
/_extensions
└── leovan
    └── pseudocode
        ├── _extension.yml
        ├── pseudocode.lua
        ├── pseudocode.min.css
        └── pseudocode.min.js
REMARKS
  • Project単位でのインストールとなります

🔨 拡張機能利用のための設定

_quarto.yml に対して filters項目を以下のように追加します:

_quarto.yml
project:
  type: website
  output-dir: _site

filters:
  - pseudocode

Math Setup

_quarto.yml
format:
  html:
    include-in-header:
      - include/mathjax.html

上記のinclude/mathjax.htmlに対して以下のようなLinesを設定します

include/mathjax.html
<script>
    MathJax = {
        tex: {
            inlineMath: [['$','$'], ['\\(','\\)']],
            displayMath: [['$$','$$'], ['\\[','\\]']],
            processEscapes: true,
            processEnvironments: true,
            tags: 'all',
        }
    }
</script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-chtml-full.js"
        integrity="sha256-kbAFUDxdHwlYv01zraGjvjNZayxKtdoiJ38bDTFJtaQ="
        crossorigin="anonymous">
</script>

MathJax Options

Keys 内容
inlineMath インライン数式 のマーカー指定．
例：$a^2 + b^2 = c^2$ または \(...\)
displayMath ディスプレイ数式（中央寄せで大きく表示） のマーカー指定．
例：$$E = mc^2$$ または \[...\]
processEscapes バックスラッシュを エスケープとして解釈するか．true にすると \\( を \( として扱えるようになる
processEnvironments \begin{...} ... \end{...} 形式の LaTeX 環境 を使えるようにする
tags: 'all' 式番号を付ける場所の指定．
'all' は display 数式すべて に番号を振る（\begin{equation} でなくても）

MathJax本体の読み込み設定

属性 説明
src CDN 上の MathJax v3 スクリプト．tex-chtml-full.js は LaTeX入力 + HTML/CSS出力 対応の完全版
integrity Subresource Integrity（SRI） チェック用ハッシュ（改ざん防止）
crossorigin="anonymous" SRI を有効にするための指定

Algorithm表記設定

Pseudocodeの参照または参照時の表示を設定する場合，_quarto.ymlに以下のように記載します

_quarto.yml
format:
  html:
    pseudocode:
      caption-prefix: "アルゴリズム"    # DefaultはAlgorithm
      reference-prefix: "アルゴリズム"  # DefaultはAlgorithm
オプション名 意味 デフォルト 解説
caption-prefix キャプションの前に付ける語句 "Algorithm" 例：Algorithm 1: Euclidean のような見出しに使われる
reference-prefix @ref(fig:xxx) のような参照時の接頭辞 "Algorithm" 参照時に Algorithm 1 のように表示されます
caption-number 番号付けの有無 true false にすると Algorithm: xxx のように番号なしになる

📘 Pseudocode Blockの記述方法

pseudocodeコードブロックの中にPseudocodeを以下のように記述すると，Algorithm 1 のような出力になります．

```pseudocode
#| html-indent-size: "1.2em"
#| html-comment-delimiter: "//"
#| html-line-number: true
#| html-line-number-punc: ":"
#| html-no-end: false
#| pdf-placement: "htb!"
#| pdf-line-number: true

\begin{algorithm}
\caption{Quicksort}
\begin{algorithmic}
\Procedure{Quicksort}{$A, p, r$}
  \If{$p < r$}
    \State $q = $ \Call{Partition}{$A, p, r$}
    \State \Call{Quicksort}{$A, p, q - 1$}
    \State \Call{Quicksort}{$A, q + 1, r$}
  \EndIf
\EndProcedure
\Procedure{Partition}{$A, p, r$}
  \State $x = A[r]$
  \State $i = p - 1$
  \For{$j = p$ \To $r - 1$}
    \If{$A[j] < x$}
      \State $i = i + 1$
      \State exchange
      $A[i]$ with     $A[j]$
    \EndIf
    \State exchange $A[i]$ with $A[r]$
  \EndFor
\EndProcedure
\end{algorithmic}
\end{algorithm}
```
\begin{algorithm} \caption{Quicksort} \begin{algorithmic} \Procedure{Quicksort}{$A, p, r$} \If{$p < r$} \State $q = $ \Call{Partition}{$A, p, r$} \State \Call{Quicksort}{$A, p, q - 1$} \State \Call{Quicksort}{$A, q + 1, r$} \EndIf \EndProcedure \Procedure{Partition}{$A, p, r$} \State $x = A[r]$ \State $i = p - 1$ \For{$j = p$ \To $r - 1$} \If{$A[j] < x$} \State $i = i + 1$ \State exchange $A[i]$ with $A[j]$ \EndIf \State exchange $A[i]$ with $A[r]$ \EndFor \EndProcedure \end{algorithmic} \end{algorithm}

quarto-pseudocode の仕様

Syntax

  • キーワードには大文字と小文字の形式(UpperCamelCase) (例: \Procedure, \If, \EndIf) を使用
  • 数式は標準の LaTeX 数式構文をサポート

Block Parameters

コメント形式のパラメーターを以下のように記載することができます．

#| label: alg-my-algorithm
#| html-indent-size: "1.2em"
#| html-comment-delimiter: "//"
#| html-line-number: true
#| html-line-number-punc: ":"
#| html-no-end: false
#| pdf-placement: "htb!"
#| pdf-line-number: true

\begin{algorithm}
\caption{My Algorithm}
\begin{algorithmic}
...
\end{algorithmic}
\end{algorithm}
パラメーター デフォルト 形式 説明
label all クロス参照用のラベル (alg- で始まる必要があります)
html-indent-size “1.2em” HTML ネストされたブロックのインデント サイズ
html-comment-delimiter “//” HTML コメント デリミタ文字
html-line-number true HTML 行番号を表示
html-line-number-punc “:” HTML 行番号の句読点
html-no-end false HTML 末尾のキーワードを非表示
pdf-placement “H” PDF フロート配置 (htbp!)
pdf-line-number true PDF 行番号を表示

CSS styleの設定

設定用CSSファイルに以下のような記述をすることでfontやcontainerの設定ができます

.pseudocode-container {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  margin: 20px 0;
}

.ps-algorithm {
  font-family: 'Courier New', monospace;
}

Appendix: UpperCamelCase

名称 例 説明
ALL UPPERCASE PROJECT, TYPE, EXTENSIONS 全部大文字
UpperCamelCase Project, Type, Extensions 各単語の先頭が大文字（キャメルケース）
lowerCamelCase project, projectType, extensionList 1語目は小文字で始め，2語目以降の先頭を大文字
snake_case project_type, extension_list 単語をアンダースコア _ でつなぐ

References