Zenn
📌

Sphinx bizstyle html の気になるところを調整

2022/04/21に公開
Sphinx
tech

CSS を追加して調整します。
_static フォルダに CSS ファイルを作成して conf.py で読み込み。

conf.py へ追記
def setup(app):
    app.add_css_file('add_style.css')

例 hokorobi/sphinx-improve-bizstyle

フォントに Meiryo を使う

code-block に使うのはやめた方がいいと思うけど、とりあえず気にしない。

add_style.css
body {
  font-family: 'Meiryo', 'メイリオ', 'Lucida Grande', 'Lucida Sans Unicode', 'Geneva',
               'Verdana', sans-serif;
}

cite, code, tt {
  font-family: 'Meiryo', 'メイリオ', 'Consolas', 'Deja Vu Sans Mono',
               'Bitstream Vera Sans Mono', monospace;
}

pre {
  font-family: 'Meiryo', 'メイリオ', 'Consolas', 'Deja Vu Sans Mono',
               'Bitstream Vera Sans Mono', monospace;
}

注釈内テーブルの余白を広げる

注釈内のテーブルの左側にもう少し余白が欲しいので調整。

CSS

add_style.css
div.admonition table {
  margin: 0.5em 1em 0.5em 1em;
}

rst

.. note::
  .. list-table::

    * - abc
      - def
      - efg
    * - abc
      - def
      - efg

before

before

after

after

list-table 内のリストの余白を狭める

list-table 内の左の余白が広すぎるので狭める。

CSS

add_style.css
td ul.simple {
  padding-left: 20px;
}

rst

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

  * - hoge
    - fuga
  * - hoge
    - + fuga
      + fuga2

before

before

after

after

注釈内の line block の余白を広げる

注釈内の line block の左側が狭いので広げる。

CSS

注釈内のリストの中の line block は除外したいので div.admotion div.line-block でなく div.admonition > div.line-block 。

add_style.css
div.admonition > div.line-block {
  margin: 0.5em 1em 0.5em 1em;
}

rst

.. note::
  | test
  | test

before

before

after

after

GitHubで編集を提案

Discussion