Windows 10 で Sphinx を使う¶

Sphinx とは¶

Python で作成されたオンラインドキュメント作成ツールです。
マニュアルなどの記述に向いています。
reStructuredText で記述したテキストファイルを HTML 形式に変換して公開します。
LaTeX と組み合わせることで PDF 形式に変換も可能です。

検証環境¶

Microsoft Windows 10 Pro Version 1909 (64-bit)
Miniconda
Sphinx 2.4.3 & Sphinx 3.0.1

Sphinx の動作環境を作る¶

Windows 上に Sphinx の実行環境を構築します。必要なアプリケーションです。

Miniconda
Sphinx
テキストエディター

テキストエディターは UTF-8 が扱えれば、好みのものをご使用ください。

【トピックス】
・ Miniconda をインストールする
・ Sphinx をインストールする
・ テキストエディターをインストールする

Miniconda をインストールする¶

ブラウザーで Miniconda のページを開く　→　Miniconda3 Windows 64-bit をクリック
ファイルを開く をクリック
Next をクリック
I Agree をクリック
Next をクリック
Next をクリック
Install をクリック
インストール中
Next をクリック
Learn more ・・・ と Learn how ・・・ のチェックを外す　→　Finish をクリック
Miniconda のインストールが終了するとメニューに "Anaconda Powershell Prompt(Miniconda3)" と "Anaconda Prompt(Miniconda3)" が登録されます

Sphinx をインストールする¶

"Anaconda Powershell Prompt(Miniconda3)" を起動
Sphinx をインストール

pip install -U Sphinx
Sphinx のバージョン確認

pip show sphinx

テキストエディターをインストールする¶

UTF-8 を扱えるテキストエディターであれば何でも良いです。ここでは Visual Studio Code を紹介します。

ブラウザーで Visual Studio Code – コードエディター | Microsoft Azure のページを開く　→　今すぐ無料でダウンロードする をクリック
Windows 用の 64 bit をクリック

※ この手順では System Installer を使用しています。
注釈
- インストールするパソコンを自分だけが使用しているのであれば User Installer / System Installer のどちらでも変わりはないです。
- インストールするパソコンを他の方と共同で使用しているのであれば使用環境（条件）によりますが User Installer が望ましいと思います。
User Installer
- インストールしたユーザーだけが使用できる
- Windows にログイン中のユーザーの領域 ( "%HOMEPATH%" フォルダー内 )にインストールする
System Installer
- 誰でも使用できる
- "C:¥Program Files" フォルダー内にインストールする
- インストール時に管理者権限が必要
ファイルを開く をクリック
同意する(A) を選択　→　次へ(N) をクリック
次へ(N) をクリック
次へ(N) をクリック
追加タスクは必要なものをチェック　→　次へ(N) をクリック
インストール(I) をクリック
インストール中
Visual Studio Code を実行する のチェックを外す　→　完了(F) をクリック
インストールが終了するとメニューに "Visual Studio Code" が登録されます

ドキュメントの作成手順¶

ドキュメントを作る工程の最初から最後までを実際に操作しながら説明します。

ドキュメントを保存するフォルダーを作る

Sphinx はフォルダー単位でドキュメントを管理します。フォルダー内にドキュメントを構成する複数のファイルやフォルダーが配置されます。まず、これらを保存するフォルダーを作ります。今回は "C:¥Sphinx¥test" フォルダーを作りました。中身は空です。
"Anaconda Powershell Prompt(Miniconda3)" を起動

注釈

"Anaconda Powershell Prompt(Miniconda3)" と "Anaconda Prompt（Miniconda3)" はどちらを起動しても良いです。実行するコマンドの指定の仕方に少し違いがあります。
「ドキュメントを保存するフォルダーを作」で作成したフォルダーへ移動

cd C:\Sphinx\test
sphinx-quickstart コマンドを実行

" sphinx-quickstart "コマンドを実行して Sphinx でドキュメントを作成するのに必要なファイルを作成します。

作成途中でいくつか質問されます。適当に回答しても、後で修正できます。
> Separate source and build directories (y/n) [n]:
- ソースファイル用フォルダー（ source ）と HTML 用フォルダー（ build ）を分けるかどうかを指定します。
- 分ける場合は y 、同じフォルダー内に作成する場合は n （デフォルト）を入力します。
> Project name:
- プロジェクト名を入力します。
- 入力した値はドキュメントのタイトル部分に表示されます。
> Author name(s):
- 作者名を入力します。
- 入力した値はドキュメントの (C) の後に表示されます。
> Project release []:
- ドキュメントのリリース（版）番号を入力します。
> Project language [en]:
- ドキュメントの言語を入力します。
- 日本語は ja を入力します。
sphinx-quickstart コマンドの実行後のフォルダーの状態です。
ドキュメントを作成

ドキュメントを作成／修正します。今回はこの作業は省略します。
HTML に変換

" ./make html " コマンドを実行して HTML 形式の文書を作成します。

注釈

"Anaconda Prompt（Miniconda3)" は" make html "です。
作成した文書を確認

ブラウザーでドキュメント用フォルダー内の "build¥html" フォルダー内の "index.html" ファイルを開きます。今回は "C:¥Sphinx¥test¥build¥html¥index.html" を開きます。

"index.html" ファイルをブラウザーで開いた結果です。 sphinx-quickstart コマンドを実行したときに入力した値が表示されています。

注釈

「ドキュメントを作成／更新」、「 HTML に変換（ make html ）」、「確認」の繰り返しで文書を作成します。

日本語対応にする（日本語拡張の導入）¶

日本語の文章を HTML に変換すると、文書の途中に不自然なタイミングで空白が挿入される場合があります。この事象の対応策として日本語拡張を導入します。

事象の詳細¶

Sphinxの日本ユーザ会の下記ページを参照ください。

不自然な空白が表示される — Python製ドキュメンテーションビルダー、Sphinxの日本ユーザ会

日本語拡張の導入手順¶

重要

この手順は文書ごとに必要です。

ブラウザーで https://github.com/sphinxjp/goodies を開く
Code をクリック　→　Download ZIP をクリック
ZIP ファイルのダウンロード終了　→　・・・をクリック　→　フォルダーに表示(S) をクリック
ダウンロードした ZIP ファイルを確認　→　展開
展開後のファイルを確認

ユーザー名が user の場合、次のフォルダーにファイルがあります。
```
C:¥Users¥user¥Downloads¥goodies-master¥goodies-master¥exts¥japanesesupport
```
展開後の "japanesesupport.py" ファイルを "conf.py" ファイルと同じフォルダーに保存

↓
テキストエディターで "conf.py" ファイルを開く
2 箇所修正　→　保存

注釈

Sphinx のバージョンにより行位置が異なります。
13 行目
- 修正前　# import os
- 修正後　import os
14 行目
- 修正前　# import sys
- 修正後　import sys
15 行目
- 修正前　# sys.path.insert(0, os.path.abspath('.'))
- 修正後　sys.path.insert(0, os.path.abspath('.'))
32 行目
- 修正前　extensions = [
- 修正後　extensions = ['japanesesupport'
導入終了

「テーマ」を変更する¶

【トピックス】
・ 「テーマ」とは
・ 「テーマ」の変更方法
・ Sphinx Themes

「テーマ」とは¶

Sphinx で作成した文書の「見た目」を決めるものが「テーマ」です。この「テーマ」を変更すると「見た目」も変更になります。 Sphinx で作成した文書の「見た目」は「テーマ」で決まります。

テーマごとに名前が付いており、上図のテーマ名は「 alabaster 」です。 Sphinx が用意しているテーマ（ビルトインテーマ）は次の 10 種類です。いくつかのテーマは「見た目」以外に、複数のオプションを設定できます。

注釈

ビルトインテーマの詳細は次のページを参照ください。

HTML — Sphinx 4.0.0+/4633ab906 documentation

alabaster　←　デフォルトのテーマ¶

classic¶

sphinxdoc¶

scrolls¶

agogo¶

traditional¶

nature¶

haiku¶

pyramid¶

bizstyle¶

「テーマ」の変更方法¶

"conf.py" ファイル内の html_theme で使用するテーマを指定します。

"alabaster" から "classic" にするには次のように変更・保存します。必要に応じて、テーマのオプション設定を行います。

その後、" make html "を実行して HTML を再作成します。

Sphinx Themes¶

Sphinx Themes に多くのテーマが掲載されています。

各テーマには 3 つのリンクが設定されています。

sample: サンプル表示を確認できます。
pypi: インストール方法などの説明が記載されています。
conf.py: "conf.py" ファイルの設定サンプルが記載されています。

導入手順¶

今回は "sphinx_rtd_theme" の導入を例に説明します。

pypi をクリックして導入方法を確認
"Anaconda Powershell Prompt(Miniconda3)" でインストールコマンドを実行

pip install sphinx-rtd-theme
"conf.py" ファイルの html_theme を変更
" make html "を実行して HTML を作り直し
"index.html" ファイルを開いて結果確認

文書の構造¶

【トピックス】
・ Sphinx の文書ファイル
・ 見出し
・ 目次と見出し
・ ".rst" ファイルの階層化 : toctree ディレクティブ
　　・ ドキュメントの分割
　　・ toctree ディレクティブ
　　・ 下位階層の "rst" ファイルを下位フォルダーに配置した場合
　　・ toctree ディレクティブのオプション
・ ドキュメントの分割 : include ディレクティブ

Sphinx の文書ファイル¶

Sphinx は reStructuredText と呼ばれるマークアップ言語を使用して文書を書きます。
reStructuredText で書いたファイル自体はテキストファイルですが、ファイル拡張子は .rst です。
HTML に変換したとき、1 つの rst ファイルが 1 つの HTML ファイルになります。
インデントは 3 文字単位です。タブ文字は使用できません。
"index.rst" ファイルがすべての文書の起点です。すべての .rst ファイルは "index.rst" を起点に tree 状に結合されます。

見出し¶

見出しの構成¶

文書のくくりは大きな方から「章」→「セクション」→「サブセクション」→「サブサブセクション」→「パラグラフ」になります。
それぞれのくくりの最初に記述する見出しは次のように記述します。 HTML に変換したときは、それぞれ異なるサイズの文字に変換されます。
見出しに使用する * や = など記号は見出しの文字列と同じまたはそれよりも長くなければなりません。

##########
部の見出し
##########

**********
章の見出し
**********

セクションの見出し
==================

サブセクションの見出し
----------------------

サブサブセクションの見出し
^^^^^^^^^^^^^^^^^^^^^^^^^^

パラグラフの見出し
""""""""""""""""""""

見出しの例¶

実際に "index.rst" ファイルを変更し、各見出しのサイズなどの見え方を確認します。 "sphinx-quickstart" コマンドで作成した "index.rst" ファイルの内容をすべて削除し、次のように変更しました。

##################################################
部の見出し
##################################################
部の紹介文。

**************************************************
章の見出し
**************************************************
章の紹介文。

セクションの見出し
==================================================
セクションの紹介文。

サブセクションの見出し
--------------------------------------------------
サブセクションの紹介文。

サブサブセクションの見出し
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
サブサブセクションの紹介文。

パラグラフの見出し
""""""""""""""""""""""""""""""""""""""""""""""""""
パラグラフの紹介文。

HTML に変換した結果です。それぞれの見出しの文字サイズが少しずつ異なっています。

目次と見出し¶

画面左側に表示されるドキュメントの目次は Sphinx が文書構造を元に自動的に作成します。例えば "index.rst" ファイルの内容が次のような場合の目次を確認します。

##################################################
第一部　〇〇〇
##################################################

**************************************************
はじめに
**************************************************
このドキュメントは〇〇〇の構築手順を説明したものです。

**************************************************
環境構築
**************************************************

ハードウェアスペック：最小
==================================================
CPU
--------------------------------------------------
Intel Core i9-9900K

MEMORY
--------------------------------------------------
8GB

HDD
--------------------------------------------------
80GB

ハードウェアスペック：推奨
==================================================
CPU
--------------------------------------------------
Intel Core i9-10980XE

MEMORY
--------------------------------------------------
64GB

M2.SSD
--------------------------------------------------
1TB

見出しを使用して自動的に目次を作成します。

".rst" ファイルの階層化 : toctree ディレクティブ¶

ドキュメントの分割¶

「目次と見出し」のように 1 つの rst ファイルに複数の「部」や「章」などを書いてもドキュメントは作成できます。しかし、この方法ではページのサイズが長くなり、視認性や検索性、メンテナンス性などに劣るドキュメントになります。

この問題の解決方法は文書を「章」などのある程度のまとまりで分割し、そのまとまりごとに rst ファイルを作成することです。

今回のファイルの配置場所です。すべて "index.rst" ファイルと同じフォルダーに配置しました。

各ファイルの内容と表示内容です。

■ index.rst

##################################################
〇〇〇構築手順書
##################################################
.. toctree::

   intro.rst
   ./spec
   process

■ intro.rst

**************************************************
はじめに
**************************************************

ご挨拶
==================================================

この度は弊社製品である 〇〇〇 をご購入くださりありがとうございます。
〇〇〇 は皆様の作業効率および生産性向上を目的に開発しました。不具合が
あれば、下記までご連絡ください。

お問い合わせ先
==================================================
電話　+81-12-3456-7890

■ spec.rst

**************************************************
構築対象機器の要件
**************************************************
〇〇〇 をインストールする機器の要件を説明します。

最小要件
==================================================
□□□ の要件を満たしていること。

推奨要件
==================================================
△△△ の要件を満たしていること。

■ process.rst

**************************************************
インストール手順
**************************************************
〇〇〇 のインストール手順を説明します。

機器の準備
==================================================
「最小要件」以上の危機を準備、電源を ON にしてください。

インストールメディアの準備
==================================================
インストールメディアは弊社サポートサイトからダウンロードできます。
サイトの URL はユーザー登録時に弊社から送信したメールに記載されて
います。

toctree ディレクティブ¶

rst ファイル間の階層構造は toctree ディレクティブで定義します。
toctree ディレクティブは上位階層の rst ファイルに指定します。
上位階層と下位階層の rst ファイルの設置場所は同じフォルダ－でも、異なるフォルダーでも問題ありません。
下位階層の rst ファイルの指定は上位階層の rst ファイルを起点とした相対指定で行います。

重要

"index.rst" ファイル以外の rst ファイルは、必ず toctree ディレクティブで指定されなければなりません。

ファイルの配置位置と rst ファイル間の関係です。

"index.rst" ファイルの内容です。

##################################################
〇〇〇構築手順書
##################################################
.. toctree::

   intro.rst
   ./spec
   process

HTML に変換すると、下位階層の rst ファイルの見出し部分を使用した目次が作成されます。目次にはすべての見出しが展開・表示されます。
下位階層の rst ファイルの指定方法は拡張子付き、相対パスであることを示す、ファイル名だけのいずれの形式でも問題ありません。

下位階層の "rst" ファイルを下位フォルダーに配置した場合¶

下図のように下位階層の rst ファイルを下位階層のディレクトリーに配置すると、階層構造とファイルの配置が一致し、ドキュメントの流れを追うのが楽になります。

PS C:\Sphinx\test\source> tree /A /F
フォルダー パスの一覧
ボリューム シリアル番号は AEB0-CDA6 です
C:.
|   conf.py
|   index.rst
|   japanesesupport.py
|
+---intro
|       intro.rst
|
+---process
|       process.rst
|
+---spec
|       spec.rst
|
+---_static
+---_templates
\---__pycache__
        japanesesupport.cpython-37.pyc

PS C:\Sphinx\test\source>

フォルダ構成を反映した "index.rst" ファイルの内容です。

**************************************************
〇〇〇構築手順書
**************************************************
.. toctree::

   intro/intro
   spec/spec
   process/process

toctree ディレクティブのオプション¶

hidden オプション¶

目次を表示しません。

##################################################
〇〇〇構築手順書
##################################################
.. toctree::
   :hidden:

   intro/intro
   spec/spec
   process/process

numbered オプション¶

下位階層の rst ファイルの見出しに自動で通し番号を付けます。

##################################################
〇〇〇構築手順書
##################################################
.. toctree::
   :numbered:

   intro/intro
   spec/spec
   process/process

maxdepth オプション¶

目次として展開する見出しのレベルを指定します。

##################################################
〇〇〇構築手順書
##################################################
.. toctree::
   :maxdepth: 1

   intro/intro
   spec/spec
   process/process

numbered オプションと併用した場合です。

##################################################
〇〇〇構築手順書
##################################################
.. toctree::
   :maxdepth: 1
   :numbered:

   intro/intro
   spec/spec
   process/process

ドキュメントの分割 : include ディレクティブ¶

include ディレクティブは指定したファイルの内容を展開します。この機能を使用して「章」単位に分割した rst ファイルを「セクション」単位に分割します。

分割前の "process.rst" の内容です。

**************************************************
インストール手順
**************************************************
〇〇〇 のインストール手順を説明します。

機器の準備
==================================================
「最小要件」以上の危機を準備、電源を ON にしてください。

インストールメディアの準備
==================================================
インストールメディアは弊社サポートサイトからダウンロードできます。
サイトの URL はユーザー登録時に弊社から送信したメールに記載されて
います。

"process.rst" の分割後の process フォルダーの状態です。 rst ファイル以外に txt ファイルが 2 つ増えています。"process.rst" ファイルを分割した（切り出した）内容が、この txt ファイルに記録されています。

分割後の "process.rst" ファイルの内容です。

**************************************************
インストール手順
**************************************************
〇〇〇 のインストール手順を説明します。

.. include:: process-junbi.txt
.. include:: process-media.txt

"process-junbi.txt" ファイルの内容です。

機器の準備
==================================================
「最小要件」以上の危機を準備、電源を ON にしてください。

"process-media.txt" ファイルの内容です。

インストールメディアの準備
==================================================
インストールメディアは弊社サポートサイトからダウンロードできます。
サイトの URL はユーザー登録時に弊社から送信したメールに記載されて
います。

いろいろな表現¶

文字の表現¶

Sphinx で使用できる文字の表現のサンプルです。「説明　→　コードのサンプル　→　コードの実行結果」の順に説明します。

【トピックス】
・ 強調（イタリック）
・ 強い強調（太字）
・ コードサンプル
・ フィールドリスト
・ "\" の表記
・ ラインブロック
・ リスト（箇条書き）
・ リテラルコードブロック

強調（イタリック）¶

文字列を "*" ではさむと強調（イタリック）表示になります。
Mozilla Firefox は強調表示になりますが、 Google Chrome や Microsoft Edge は通常表示と変わらない表示です。

このように *強調したい文字列* を "*" ではさみます。

このように 強調したい文字列 を "*" ではさみます。

強い強調（太字）¶

文字列を "**" ではさむと強い強調（太字）表示になります。

このように **強く強調したい文字列** を "**" ではさみます。

このように 強く強調したい文字列 を "**" ではさみます。

コードサンプル¶

文字列を "``" ではさむとコードサンプル表示になります。

``コードサンプル表示したい文字列`` を "``"ではさみます。

コードサンプル表示したい文字列 を "``"ではさみます。

フィールドリスト¶

文字列を ":" ではさむとフィールドリストになります。

:1 つめのフィールドリスト: 説明文　その1
:2 つめのフィールドリスト: 説明文　その2
:3 つめのフィールドリスト: 説明文　その3

1 つめのフィールドリスト: 説明文　その1
2 つめのフィールドリスト: 説明文　その2
3 つめのフィールドリスト: 説明文　その3

フィールドリスト表示をしたい行の次の行にインデントを付けると同様の効果が得られます。

1 つめのフィールドリスト
   説明文　その1
2 つめのフィールドリスト
   説明文　その2
3 つめのフィールドリスト
   説明文　その3

1 つめのフィールドリスト: 説明文　その1
2 つめのフィールドリスト: 説明文　その2
3 つめのフィールドリスト: 説明文　その3

"\" の表記¶

"\" を書くときは "\\" と書きます。

"c:\\windows" ディレクトリーです。

"c:\windows" ディレクトリーです。

ラインブロック¶

行の先頭に "|" を書くと、その行はラインブロックになります。
ラインブロックはソースコードの改行がそのまま反映されます。

| このように先頭に "|" を書くと
| 書いたとおりに
| 改行します。

このように先頭に "|" を書くと
書いたとおりに
改行します。

ラインブロックの指定をしないときは
改行位置は Sphinx まかせに
なります。

ラインブロックの指定をしないときは改行位置は Sphinx まかせになります。

リスト（箇条書き）¶

一般的な箇条書き¶

行の先頭に "-" を書くと、その行は箇条書きになります。

- 箇条書きの 1 つ目です。
- 箇条書きは先頭に "・" がつきます。
- 箇条書きでも
  改行は Sphinx 任せです。

箇条書きの 1 つ目です。
箇条書きは先頭に "・" がつきます。
箇条書きでも改行は Sphinx 任せです。

番号付きの箇条書き¶

行の先頭に "#." を書くと、その行は番号付きの箇条書きになります。

#. 箇条書きの 1 つ目です。
#. 箇条書きは先頭に開始値が 1 の番号が付きます。
#. 番号付き箇条書きでも、やっぱり
   改行は Sphinx 任せです。

箇条書きの 1 つ目です。
箇条書きは先頭に開始値が 1 の番号が付きます。
番号付き箇条書きでも、やっぱり改行は Sphinx 任せです。

初期値あり番号付きの箇条書き¶

番号付きの箇条書きは初期値を指定できます。

8. 箇条書きの 1 つ目です。
#. 箇条書きは先頭に開始値が 1 の番号が付きます。
#. 初期値ありの番号付き箇条書きでも、やっぱり
   改行は Sphinx 任せです。

箇条書きの 1 つ目です。
箇条書きは先頭に開始値が 1 の番号が付きます。
初期値ありの番号付き箇条書きでも、やっぱり改行は Sphinx 任せです。

リストのネスト¶

リストはネストできます。
親リストと子リストの間に 1 行の空行が必要です。

- 親リストの 1 つめ

   - 子リストの 1 つめ
   - 子リストの 2 つめ
   - 子リストの 3 つめ

- 親リストの 2 つめ

#. 番号付き親リストの 1 つめ

   #. 番号付き子リストの 1 つめ
   #. 番号付き子リストの 2 つめ
   #. 番号付き子リストの 3 つめ

#. 番号付き親リストの 2 つめ

親リストの 1 つめ
- 子リストの 1 つめ
- 子リストの 2 つめ
- 子リストの 3 つめ
親リストの 2 つめ

番号付き親リストの 1 つめ
1. 番号付き子リストの 1 つめ
2. 番号付き子リストの 2 つめ
3. 番号付き子リストの 3 つめ
番号付き親リストの 2 つめ

その他の箇条書き¶

a. 番号の代わりに英小文字を使用した箇条書きの 1 つ目です。
#. 箇条書きは番号は a. b. c. ・・・ になります。
#. 改行は
   やっぱり Sphinx 任せです。

A. 番号の代わりに英大文字を使用した箇条書きの 1 つ目です。
#. 箇条書きは番号は A. B. C. ・・・ になります。
#. 改行は
   やっぱり Sphinx 任せです。

番号の代わりに英小文字を使用した箇条書きの 1 つ目です。
箇条書きは番号は a. b. c. ・・・になります。
改行はやっぱり Sphinx 任せです。

番号の代わりに英大文字を使用した箇条書きの 1 つ目です。
箇条書きは番号は A. B. C. ・・・になります。
改行はやっぱり Sphinx 任せです。

リテラルコードブロック¶

行の最後に " ::" = 半角空白 1 桁 + "::" を付けると、次の行からはリテラルコードブロックと解釈されます。
リテラルコードブロック部分の前後に 1 行の空行が必要です。
リテラルコードブロック部分はインデントして記入します。
リテラルコードブロック部分に記述した内容は、そのまま表示されます。

ここは通常の文章です。次の行はリテラルコードブロックです。 ::

   ここからリテラルコードブロックです。
   リテラルコードブロック部分の改行は、
   ソースコードの内容がそのまま反映されます。
   入力した文字はそのまま表示されます。箇条書きをしようとしても

   - あああ
   - いいい

   のようにそのまま表示されます。
   ここでリテラルコードブロックは終了です。

ここから通常の文章です。

ここは通常の文章です。次の行はリテラルコードブロックです。

ここからリテラルコードブロックです。
リテラルコードブロック部分の改行は、
ソースコードの内容がそのまま反映されます。
入力した文字はそのまま表示されます。箇条書きをしようとしても

- あああ
- いいい

のようにそのまま表示されます。
ここでリテラルコードブロックは終了です。

ここから通常の文章です。

ロール¶

ロールを使用し、特定の意味を持たせた文字列を強調して表示します。

【トピックス】
・ ボタンなど : guilabel
・ コマンド : command
・ 言葉の短縮形 : abbr
・ ファイルやディレクトリ : file
・ ファイルのダウロード : download
・ メニューの遷移 : menuselection
・ キーボード : kbd
・ 数式 : math

ボタンなど : guilabel¶

一般にボタンやウィンドウのタイトル、フィールド名、メニュー、メニューの項目名、リスト中の選択された値などのインタフェース上に表示されるラベルに使用します。

〇〇〇 を入力後 :guilabel:`OK` をクリックします。

- :guilabel:`list` ボタン ：登録されている内容を一覧表示します。
- :guilabel:`search` ボタン ：入力した文字列をキーワードにしてドキュメント内を検索します。

〇〇〇を入力後 OK をクリックします。

list ボタン：登録されている内容を一覧表示します。
search ボタン：入力した文字列をキーワードにしてドキュメント内を検索します。

コマンド : command¶

OS のコマンドなどに使用します。

ディレクトリ内のファイルやフォルダーの一覧を確認するときは :command:`ls` コマンドを使用します。

ディレクトリ内のファイルやフォルダーの一覧を確認するときは ls コマンドを使用します。

言葉の短縮形 : abbr¶

言葉の短縮形の表記に使用します。

スタックは :abbr:`LIFO (last-in, first-out)` 構造です。

スタックは LIFO 構造です。

ファイルやディレクトリ : file¶

ファイルやディレクトリの名前に使用します。

nginx のメインの設定ファイルは :file:`/etc/nginx/nginx.conf` です。

nginx のメインの設定ファイルは /etc/nginx/nginx.conf です。

ファイルのダウロード : download¶

ファイルへのリンクを張って、ファイルをダウンロードできるようにするときに使用します。

サンプルのテキストファイルをダウンロードするには :download:`ここをクリック <./sample.txt>` します。

サンプルのテキストファイルをダウンロードするには ここをクリック します。

メニューの遷移 : menuselection¶

メニューの操作手順を示すときに使用します。

新しくテキストファイルを作成するには" :menuselection:`ファイル(F) --> 新規作成(N)` "の順に操作します。

新しくテキストファイルを作成するには" ファイル(F) ‣ 新規作成(N) "の順に操作します。

キーボード : kbd¶

キーボード操作のキーに使用します。

処理を中断するには :kbd:`Esc` を押します。

処理を中断するには Esc を押します。

数式 : math¶

数式を表現できます。

二次方程式の一般形は 「 :math:`ax^2 + bx + c = 0` 」 です。

二次方程式の一般形は「 \(ax^2 + bx + c = 0\) 」です。

イメージ : image ディレクティブ¶

image ディレクティブを使用し、ドキュメントに画像を埋め込みます。
scale オプションで倍率を指定します。
取り込む画像の横幅が表示域の横幅より大きいときは縮小表示になります。

.. image:: img/food_konbini_onigiri.png

scale オプションを指定して拡大・縮小表示できます。
拡大・縮小は元画像に対する割合で表示します。
縮小・拡大表示した画像をクリックすると別ウインドウで原寸の画像を表示します。

.. image:: img/food_konbini_onigiri.png
   :scale: 50%

リンク¶

【トピックス】
・ URL
・ rst ファイル
・ ラベル

URL¶

ドキュメント内に URL を記述すると、そのままリンクになります。

Sphinx 日本ユーザー会のサイトは https://sphinx-users.jp/index.html です。

Sphinx 日本ユーザー会のサイトは https://sphinx-users.jp/index.html です。

URL 部分をリンクテキストに変更できます。

Sphinx 日本ユーザー会のサイトは `ここをクリック <https://sphinx-users.jp/index.html>`_ します。

Sphinx 日本ユーザー会のサイトはここをクリックします。

rst ファイル¶

doc を使用して rst ファイルにリンクを設定します。

Sphinx の文書構造の説明は「 :doc:`../struct/struct` 」で確認してください。

Sphinx の文書構造の説明は「文書の構造」で確認してください。

リンク先の rst ファイルを < と > でくくって指定すると、表示する文字列を任意のものに置き換えられます。

Sphinx の文書構造の説明は :doc:`こちらを確認 <../struct/struct>` してください。

Sphinx の文書構造の説明はこちらを確認してください。

ラベル¶

文書内にラベルを埋め込み、そのラベルに対してリンクを設定します。
ラベルは Sphinx の文書内でユニークでなければなりません。
ラベルは見出しとセットで設定します。

リンク先のドキュメントです。見出しの前にラベルを設定します。

.. _struct-toctree-split:

ドキュメントの分割
----------------------------------------------------------------------------------------------------
「 :ref:`struct-contents` 」のように 1 つの ``rst`` ファイルに複数の「部」や「章」などを書いてもドキュメントは作成できます。しかし、この方法ではページのサイズが長くなり、視認性や検索性、メンテナンス性などに劣るドキュメントになります。

ref を使用してラベルにリンクを設定します。

ドキュメントを分割するときの考え方は「 :ref:`struct-toctree-split` 」を参照してください。

ドキュメントを分割するときの考え方は「ドキュメントの分割」を参照してください。

リンク先のラベルを < と > でくくって指定すると、表示する文字列を任意のものに置き換えられます。

ドキュメントを分割するときの考え方は :ref:`こちらを参照<struct-toctree-split>` してください。

ドキュメントを分割するときの考え方はこちらを参照してください。

サンプルコードの表示¶

【トピックス】
・ コードブロック : code-block ディレクティブ
・ ファイルから表示するコードの読み込み : literalinclude ディレクティブ
・ コード表示のオプション

コードブロック : code-block ディレクティブ¶

code-block を使用してコードを表示します。
コードの言語を指定すると、その言語に適したハイライト表示をします。
単なるテキスト表示するときは言語に none を指定します。
言語を省略すると Sphinx が適切な言語を選択してコードをハイライト表示します。

表示例¶

言語指定あり：java

.. code-block:: java

   public class HelloWorld{
      public static void main(String[] args){
        System.out.println("hello, world");
      }
   }

public class HelloWorld{
   public static void main(String[] args){
     System.out.println("hello, world");
   }
}

言語指定あり：none （ハイライト表示なし）

.. code-block:: none

   public class HelloWorld{
      public static void main(String[] args){
        System.out.println("hello, world");
      }
   }

public class HelloWorld{
   public static void main(String[] args){
     System.out.println("hello, world");
   }
}

言語指定なし：Sphinx が言語を自動判断

.. code-block::

   public class HelloWorld{
      public static void main(String[] args){
        System.out.println("hello, world");
      }
   }

public class HelloWorld{
   public static void main(String[] args){
     System.out.println("hello, world");
   }
}

ファイルから表示するコードの読み込み : literalinclude ディレクティブ¶

literalinclude を使用してコードをファイルから読み込み、表示します。
language オプションでコードの言語を指定すると、その言語に適したハイライト表示をします。
単なるテキスト表示するときは言語に none を指定します。
言語を省略すると Sphinx が適切な言語を選択してコードをハイライト表示します。

表示例¶

言語指定あり：java

.. literalinclude:: ./helloworld.java
   :language: java

public class HelloWorld{
   public static void main(String[] args){
     System.out.println("hello, world");
   }
}

言語指定あり：none （ハイライト表示なし）

.. literalinclude:: ./helloworld.java
   :language: none

public class HelloWorld{
   public static void main(String[] args){
     System.out.println("hello, world");
   }
}

言語指定なし：Sphinx が言語を自動判断

.. literalinclude:: ./helloworld.java

public class HelloWorld{
   public static void main(String[] args){
     System.out.println("hello, world");
   }
}

コード表示のオプション¶

行番号表示¶

linenos オプションで行番号を表示します。

.. code-block:: java
   :linenos:

   public class HelloWorld{
      public static void main(String[] args){
        System.out.println("hello, world");
      }
   }

public class HelloWorld{
   public static void main(String[] args){
     System.out.println("hello, world");
   }
}

.. literalinclude:: ./helloworld.java
   :language: java
   :linenos:

public class HelloWorld{
   public static void main(String[] args){
     System.out.println("hello, world");
   }
}

特定の行を網掛け表示¶

emphasize-lines オプションで指定した行をハイライト表示します。
"," で区切って複数の行を指定します。　例：1 行目と 10 行目を網掛け表示　→　1, 10
"-" で連続する行を指定します。　例：1 行目から 10 行目を網掛け表示　→　1-10

.. code-block:: java
   :emphasize-lines: 2, 4

   public class HelloWorld{
      public static void main(String[] args){
        System.out.println("hello, world");
      }
   }

public class HelloWorld{
   public static void main(String[] args){
     System.out.println("hello, world");
   }
}

.. literalinclude:: ./helloworld.java
   :language: java
   :emphasize-lines: 2, 4

public class HelloWorld{
   public static void main(String[] args){
     System.out.println("hello, world");
   }
}

テーブル（表） : table ディレクティブ¶

【トピックス】
・ グリッドテーブル
・ シンプルテーブル
・ CSV テーブル
・ リストテーブル
・ 複雑なテーブル
・ 列幅の変更
・ ヘッダーの指定
・ テーブル名の追加

グリッドテーブル¶

+-------+-------+---------+
| A     | B     | A and B |
+-------+-------+---------+
| False | False | False   |
+-------+-------+---------+
| True  | False | Flase   |
+-------+-------+---------+
| False | True  | False   |
+-------+-------+---------+
| True  | True  | True    |
+-------+-------+---------+

A	B	A and B
False	False	False
True	False	Flase
False	True	False
True	True	True

シンプルテーブル¶

====== ====== =======
A      B      A and B
False  False  False
True   False  False
False  True   False
True   True   True
====== ====== =======

A	B	A and B
False	False	False
True	False	False
False	True	False
True	True	True

CSV テーブル¶

.. csv-table::

   "A", "B", "A and B"
   "False", "False", "False"
   "True", "False", "False"
   "False", "True", "False"
   "True", "True", "True"

A	B	A and B
False	False	False
True	False	False
False	True	False
True	True	True

リストテーブル¶

.. list-table::

   * - A
     - B
     - A and B
   * - False
     - False
     - False
   * - True
     - False
     - False
   * - False
     - True
     - False
   * - True
     - True
     - True

A	B	A and B
False	False	False
True	False	False
False	True	False
True	True	True

複雑なテーブル¶

グリッドテーブルを使用すると複雑なテーブルを作成できます。

+-----+-------+-------+--------+
|     | A     | B     | Result |
+-----+-------+-------+--------+
| and | False | False | False  |
+     +-------+-------+        +
|     | True  | False |        |
+     +-------+-------+        +
|     | False | True  |        |
+     +-------+-------+--------+
|     | True  | True  | True   |
+-----+-------+-------+--------+
| or  | False | False | False  |
+     +-------+-------+--------+
|     | True  | False | True   |
+     +-------+-------+        +
|     | False | True  |        |
+     +-------+-------+        +
|     | True  | True  |        |
+-----+-------+-------+--------+

	A	B	Result
and	False	False	False
	True	False
	False	True
	True	True	True
or	False	False	False
	True	False	True
	False	True
	True	True

列幅の変更¶

CSV テーブルとリストテーブルの列幅のデフォルトは等幅です。
widths オプションを指定し、列幅を割合で指定できます。

.. csv-table::
   :widths: 1, 1, 2

   "A", "B", "A and B"
   "False", "False", "False"
   "True", "False", "False"
   "False", "True", "False"
   "True", "True", "True"

.. list-table::
   :widths: 1,2,3

   * - A
     - B
     - A and B
   * - False
     - False
     - False
   * - True
     - False
     - False
   * - False
     - True
     - False
   * - True
     - True
     - True

A	B	A and B
False	False	False
True	False	False
False	True	False
True	True	True

A	B	A and B
False	False	False
True	False	False
False	True	False
True	True	True

ヘッダーの指定¶

グリッドテーブル¶

ヘッダーになる行の下に = で線を書きます。

+-------+-------+---------+
| A     | B     | A and B |
+=======+=======+=========+
| False | False | False   |
+-------+-------+---------+
| True  | False | Flase   |
+-------+-------+---------+
| False | True  | False   |
+-------+-------+---------+
| True  | True  | True    |
+-------+-------+---------+

A	B	A and B
False	False	False
True	False	Flase
False	True	False
True	True	True

グリッドテーブル¶

ヘッダーになる行の下に = で線を書きます。

====== ====== =======
A      B      A and B
====== ====== =======
False  False  False
True   False  False
False  True   False
True   True   True
====== ====== =======

A	B	A and B
False	False	False
True	False	False
False	True	False
True	True	True

CSV テーブル¶

header-rows オプションでヘッダーになる行を指定します。

.. csv-table::
   :header-rows: 1

   "A", "B", "A and B"
   "False", "False", "False"
   "True", "False", "False"
   "False", "True", "False"
   "True", "True", "True"

A	B	A and B
False	False	False
True	False	False
False	True	False
True	True	True

リストテーブル¶

header-rows オプションでヘッダーになる行を指定します。

.. list-table::
   :header-rows: 1

   * - A
     - B
     - A and B
   * - False
     - False
     - False
   * - True
     - False
     - False
   * - False
     - True
     - False
   * - True
     - True
     - True

A	B	A and B
False	False	False
True	False	False
False	True	False
True	True	True

テーブル名の追加¶

.. csv-table:: 論理積の結果

   "A", "B", "A and B"
   "False", "False", "False"
   "True", "False", "False"
   "False", "True", "False"
   "True", "True", "True"

.. list-table:: 論理和の結果

   * - A
     - B
     - A or B
   * - False
     - False
     - False
   * - True
     - False
     - True
   * - False
     - True
     - True
   * - True
     - True
     - True

論理積の結果¶
A	B	A and B
False	False	False
True	False	False
False	True	False
True	True	True

論理和の結果¶
A	B	A or B
False	False	False
True	False	True
False	True	True
True	True	True

警告ディレクティブ¶

文章内に警告文を表示します。
表示スタイルは使用している「テーマ」で決まります。

attention¶

.. attention:: ここにタイトルを書きます（省略可能）

   ここに警告の説明文を書きます。表示スタイルはテーマごとに異なります。
   改行位置は Sphinx 任せです。

   ``コードサンプル`` や **強調文字** なども使用できます。

   - 箇条書きもできます。

注意

ここにタイトルを書きます（省略可能）

ここに警告の説明文を書きます。表示スタイルはテーマごとに異なります。改行位置は Sphinx 任せです。

コードサンプル や 強調文字 なども使用できます。

箇条書きもできます。

caution¶

.. caution:: ここにタイトルを書きます（省略可能）

   ここに警告の説明文を書きます。表示スタイルはテーマごとに異なります。
   改行位置は Sphinx 任せです。

   ``コードサンプル`` や **強調文字** なども使用できます。

   - 箇条書きもできます。

注意

ここにタイトルを書きます（省略可能）

ここに警告の説明文を書きます。表示スタイルはテーマごとに異なります。改行位置は Sphinx 任せです。

コードサンプル や 強調文字 なども使用できます。

箇条書きもできます。

danger¶

.. danger:: ここにタイトルを書きます（省略可能）

   ここに警告の説明文を書きます。表示スタイルはテーマごとに異なります。
   改行位置は Sphinx 任せです。

   ``コードサンプル`` や **強調文字** なども使用できます。

   - 箇条書きもできます。

危険

ここにタイトルを書きます（省略可能）

ここに警告の説明文を書きます。表示スタイルはテーマごとに異なります。改行位置は Sphinx 任せです。

コードサンプル や 強調文字 なども使用できます。

箇条書きもできます。

error¶

.. error:: ここにタイトルを書きます（省略可能）

   ここに警告の説明文を書きます。表示スタイルはテーマごとに異なります。
   改行位置は Sphinx 任せです。

   ``コードサンプル`` や **強調文字** なども使用できます。

   - 箇条書きもできます。

エラー

ここにタイトルを書きます（省略可能）

ここに警告の説明文を書きます。表示スタイルはテーマごとに異なります。改行位置は Sphinx 任せです。

コードサンプル や 強調文字 なども使用できます。

箇条書きもできます。

hint¶

.. hint:: ここにタイトルを書きます（省略可能）

   ここに警告の説明文を書きます。表示スタイルはテーマごとに異なります。
   改行位置は Sphinx 任せです。

   ``コードサンプル`` や **強調文字** なども使用できます。

   - 箇条書きもできます。

ヒント

ここにタイトルを書きます（省略可能）

ここに警告の説明文を書きます。表示スタイルはテーマごとに異なります。改行位置は Sphinx 任せです。

コードサンプル や 強調文字 なども使用できます。

箇条書きもできます。

important¶

.. important:: ここにタイトルを書きます（省略可能）

   ここに警告の説明文を書きます。表示スタイルはテーマごとに異なります。
   改行位置は Sphinx 任せです。

   ``コードサンプル`` や **強調文字** なども使用できます。

   - 箇条書きもできます。

重要

ここにタイトルを書きます（省略可能）

ここに警告の説明文を書きます。表示スタイルはテーマごとに異なります。改行位置は Sphinx 任せです。

コードサンプル や 強調文字 なども使用できます。

箇条書きもできます。

note¶

.. note:: ここにタイトルを書きます（省略可能）

   ここに警告の説明文を書きます。表示スタイルはテーマごとに異なります。
   改行位置は Sphinx 任せです。

   ``コードサンプル`` や **強調文字** なども使用できます。

   - 箇条書きもできます。

注釈

ここにタイトルを書きます（省略可能）

ここに警告の説明文を書きます。表示スタイルはテーマごとに異なります。改行位置は Sphinx 任せです。

コードサンプル や 強調文字 なども使用できます。

箇条書きもできます。

tip¶

.. tip:: ここにタイトルを書きます（省略可能）

   ここに警告の説明文を書きます。表示スタイルはテーマごとに異なります。
   改行位置は Sphinx 任せです。

   ``コードサンプル`` や **強調文字** なども使用できます。

   - 箇条書きもできます。

ちなみに

ここにタイトルを書きます（省略可能）

ここに警告の説明文を書きます。表示スタイルはテーマごとに異なります。改行位置は Sphinx 任せです。

コードサンプル や 強調文字 なども使用できます。

箇条書きもできます。

warning¶

.. warning:: ここにタイトルを書きます（省略可能）

   ここに警告の説明文を書きます。表示スタイルはテーマごとに異なります。
   改行位置は Sphinx 任せです。

   ``コードサンプル`` や **強調文字** なども使用できます。

   - 箇条書きもできます。

警告

ここにタイトルを書きます（省略可能）

ここに警告の説明文を書きます。表示スタイルはテーマごとに異なります。改行位置は Sphinx 任せです。

コードサンプル や 強調文字 なども使用できます。

箇条書きもできます。

admonition¶

.. admonition:: ここにタイトルを書きます（省略可能）

   ここに警告の説明文を書きます。表示スタイルはテーマごとに異なります。
   改行位置は Sphinx 任せです。

   ``コードサンプル`` や **強調文字** なども使用できます。

   - 箇条書きもできます。

ここにタイトルを書きます（省略可能）

ここに警告の説明文を書きます。表示スタイルはテーマごとに異なります。改行位置は Sphinx 任せです。

コードサンプル や 強調文字 なども使用できます。

箇条書きもできます。

その他の表現¶

【トピックス】

・横線

横線¶

"----" でドキュメント内に横線を引きます。

じゅげむじゅげむ ごこうのすりきれ

----

かいじゃりすいぎょのすいぎょうまつうんらいまつふうらいまつ

じゅげむじゅげむごこうのすりきれ

かいじゃりすいぎょのすいぎょうまつうんらいまつふうらいまつ

CSS (Cascading Style Sheets)¶

一般的な HTML 文書と同様に Sphinx でも CSS を使用して文書内の見出しなどを装飾できます。

【トピックス】
・ 定義
・ 実行結果
・ その他の表現

定義¶

準備¶

CSS を使用するときの準備です。

_static フォルダー内に CSS を定義したファイル（ CSS ファイル）を配置する
conf.py ファイル内で CSS ファイルのパスを指定する

ファイルの配置¶

_static フォルダーは CSS などの定義ファイルの置き場所です。他の定義ファイルと分けるため今回は _static フォルダー内に css フォルダーを作成し、その中に CSS を定義した custom.css ファイルを置きます。

custom.css の内容です。

h1 {
  padding: 0.2em;
  border-top: solid 2px;
  border-bottom: solid 2px;
}

conf.py ファイル¶

conf.py ファイル内に html_css_files を使用して CSS ファイルのパスを指定します。パスは _static フォルダーを起点とした相対パスで指定します。

実行結果¶

rst ファイル

##################################################
部の見出し
##################################################
部の紹介文。

**************************************************
章の見出し
**************************************************
章の紹介文。

セクションの見出し
==================================================
セクションの紹介文。

サブセクションの見出し
--------------------------------------------------
サブセクションの紹介文。

サブサブセクションの見出し
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
サブサブセクションの紹介文。

パラグラフの見出し
""""""""""""""""""""""""""""""""""""""""""""""""""
パラグラフの紹介文。

CSS ファイル

h1 {
  padding: 0.2em;
  border-top: solid 2px;
  border-bottom: solid 2px;
}

CSS ファイルの指定なし
CSS ファイルの指定あり

CSS ファイルで h1 タグを変更しており、その内容が反映されます。

その他の表現¶

テーブルのセル内の折り返し¶

rst ファイル

##################################################
サンプル
##################################################

.. list-table::
   :header-rows: 1

   * - 項目
     - 値
   * - なまえ
     - じゅげむ、寿限無じゅげむ、五劫ごこうの擦すり切きれ、海砂利かいじゃり水魚すいぎょの、水行末すいぎょうまつ・雲来末うんらいまつ・風来末ふうらいまつ、喰う寝る処ところに住む処ところ、藪やぶら柑子こうじの藪柑子ぶらこうじ、パイポ・パイポ・パイポのシューリンガン、シューリンガンのグーリンダイ、グーリンダイのポンポコピーのポンポコナの、長久命ちょうきゅうめいの長助

CSS ファイル

.wy-table-responsive table td, .wy-table-responsive table th {
    white-space: normal;
}

CSS ファイルの設定なし

セル内の値が長いときはスクロールバーを表示します。
CSS ファイルの設定あり

セル内の値が長いときは折り返してすべて表示します。

付録¶

● Visual Studio Code の日本語化

Visual Studio Code の日本語化¶

Extensions をクリック
テキストボックスに "japanese" と入力
"Japanese Language Pack for Visual Studio Code" をクリック
Install をクリック
Restart Now をクリック
VS Code が再起動　→　日本語化終了

改版履歴¶

日付	内容
2020/04/12	初版公開
2020/06/27	rst ファイル , ラベル , テーブル名の追加 , その他の箇条書き
2020/10/10	Visual Studio Code の日本語化の項番を変更
2020/10/17	"japanesesupport.py" のダウンロードサイトが Sphinx の日本ユーザ会から GitHub へ移行されたことにともない「日本語対応にする（日本語拡張の導入）」内の手順を変更
2020/10/24	CSS (Cascading Style Sheets) , ヘッダーの指定

Windows 10 で Sphinx を使う¶

Sphinx とは¶

検証環境¶

Sphinx の動作環境を作る¶

Miniconda をインストールする¶

Sphinx をインストールする¶

テキストエディターをインストールする¶

ドキュメントの作成手順¶

日本語対応にする（日本語拡張の導入）¶

事象の詳細¶

日本語拡張の導入手順¶

「テーマ」を変更する¶

「テーマ」とは¶

alabaster ← デフォルトのテーマ¶

classic¶

sphinxdoc¶

scrolls¶

agogo¶

traditional¶

nature¶

haiku¶

pyramid¶

bizstyle¶

「テーマ」の変更方法¶

Sphinx Themes¶

導入手順¶

文書の構造¶

Sphinx の文書ファイル¶

見出し¶

見出しの構成¶

見出しの例¶

目次と見出し¶

".rst" ファイルの階層化 : toctree ディレクティブ¶

ドキュメントの分割¶

toctree ディレクティブ¶

下位階層の "rst" ファイルを下位フォルダーに配置した場合¶

toctree ディレクティブのオプション¶

hidden オプション¶

numbered オプション¶

maxdepth オプション¶

ドキュメントの分割 : include ディレクティブ¶

いろいろな表現¶

文字の表現¶

強調（イタリック）¶

強い強調（太字）¶

コードサンプル¶

フィールドリスト¶

"\" の表記¶

ラインブロック¶

リスト（箇条書き）¶

一般的な箇条書き¶

番号付きの箇条書き¶

初期値あり番号付きの箇条書き¶

リストのネスト¶

その他の箇条書き¶

リテラルコードブロック¶

ロール¶

ボタンなど : guilabel¶

コマンド : command¶

言葉の短縮形 : abbr¶

ファイルやディレクトリ : file¶

ファイルのダウロード : download¶

メニューの遷移 : menuselection¶

キーボード : kbd¶

数式 : math¶

イメージ : image ディレクティブ¶

リンク¶

URL¶

rst ファイル¶

ラベル¶

サンプルコードの表示¶

コードブロック : code-block ディレクティブ¶

表示例¶

ファイルから表示するコードの読み込み : literalinclude ディレクティブ¶

表示例¶

コード表示のオプション¶

行番号表示¶

特定の行を網掛け表示¶

テーブル（表） : table ディレクティブ¶

グリッドテーブル¶

alabaster　←　デフォルトのテーマ¶