SphinxをCSSとJavaScript(jQuery)で拡張する

概要:reSTをHTML変換時、id、class 属性からJavaScript(jQuery)で拡張する

イントロダクション

警告

JavaScript(jQuery)で拡張するため、html以外では無効

拡張設定

概要:独自のCSS/JSファイルを読み込ませて拡張するため、任意のテーマで使用できる。

配置:

Sphinxプロジェクトルート
│  conf.py
│  index.rst
│  make.bat
│  Makefile
│
└─_static
        custom.css
        custom.js

conf.py

def setup(app):
    app.add_stylesheet('custom.css')
    app.add_javascript('custom.js')

CSSのみで全体に設定する

テーブルのセルの背景色

概要:大きいテーブルは、画面からはみ出してしまう場合があるので、<tbody />の背景を設定する。
table > tbody { background-color: #fff; }

警告

グリッドテーブル、list-table、csv-table、以外もテーブル(<table />タグ)で作成される可能性が有る為
.. note::, .. warning:: ディレクティブ内などで、注意が必要

テーブルに罫線を表示

概要:
デフォルトで罫線があるテーマでは不要
個別に、設定したい場合、 テーブルに罫線を表示 (JavaScript 不使用) を参照
th, td { border: 1px solid black; }

警告

グリッドテーブル、list-table、csv-table、以外もテーブル(<table />タグ)で作成される可能性有り

テーブルの偶数行と奇数行の色分け

概要:
偶数行(even)と奇数行(odd)の色分け
個別に、設定したい場合、 テーブルの偶数行と奇数行の色分け を参照
table > tbody > tr.row-even { background-color: #fff; }
table > tbody > tr.row-odd { background-color: #f9ffeb; }