作成日: 2019.03.04

MkDocsの見た目を良くする

1. Material for MkDocsの導入

Material for MkDocs(https://squidfunk.github.io/mkdocs-material/)

1-1. インストール

$ pip install mkdocs-material

1-2. 設定

$ vi mkdocs.yml

theme:
    name: 'material'

2. Hタグを上書き

CSSファイルでH1、H2、H3タグを上書きし、見やすくする。

2-1. CSSファイルの作成

$ mkdir docs/css
$ vi docs/css/custom.css

.md-typeset h1 {
  font-weight: bold;
  color: #000;
  border-bottom: solid 2px purple;
  padding-bottom: 5px;
}
.md-typeset h2 {
  border-bottom: solid 1px #000000;
}
.md-typeset h3 {
  border-bottom: 1px dotted #888;
}

2-2. CSSファイルの取り込み

cssファイルは以下のようにして取り込む。

$ vi mkdocs.yml

extra_css:
    - 'css/custom.css'

3. codehilitetableの上書き

```で囲まれたコードブロックを見やすくする。

$ vi docs/css/custom.css

.md-typeset pre {
  color: #f8f8f2;
}
.md-typeset .codehilitetable {
  margin-left:-20px;
  margin-right: -20px;
  border-radius: 0;
}
.md-typeset .codehilitetable .linenodiv {
  background-color: #222 !important;
}
.md-typeset .codehilitetable .linenodiv pre {
  background-color: #222 !important;
  color: #aaa;
  margin: 0;
}
.md-typeset .codehilitetable .md-clipboard:before {
  color: rgba(240,240,240,.8);
}
.md-typeset .codehilitetable .md-clipboard:hover:before {
  color: rgba(102,217,224,1);
}

---

---

---

---