Display Config Tips¶

文章内にメモ、ヒント、警告をハイライト表示する¶

mkdocs.yml
markdown_extensions:
  - admonition # (1)!
  - pymdownx.details # (2)!
  - pymdownx.superfences # (3)!

文章内にメモ、ヒント、警告をハイライト表示する
詳細ブロック(!!!を???にする)
コードフェンス

Tip

markdownフォーマッタ(例: mdformat)を使用している場合は、pre-commit-hooksでmdformat-mkdocsのプラグインを設定するのを推奨します。理由はこちらのページでも記載しています。

コードブロックを表示する¶

参考: Code blocks

コードブロックをタブ表示する¶

mkdocs.yml
markdown_extensions:
  - pymdownx.superfences
  - pymdownx.tabbed:
      alternate_style: true

CC++

#include <stdio.h>

int main(void) {
  printf("Hello world!\n");
  return 0;
}

#include <iostream>

int main(void) {
  std::cout << "Hello world!" << std::endl;
  return 0;
}

コードブロックにコピー、コード選択、注釈を追加する¶

mkdocs.yml
thema:
  features:
    - content.code.copy
    - content.code.select
    - content.code.annotate

コード表示¶

pygmentsを使ってハイライト表示する場合は以下のコメントアウトを有効にする。
linenums: trueはコード行数表示。
```python linenum="1"```を指定しなくとも行数が表示されます。

mkdocs.yml
markdown_extensions:
  - pymdownx.highlight:
      #use_pygments: true
      #noclasses: true
      #pygments_style: monokai
      linenums: true

admonitionでコードを表示する¶

「文章内にメモヒント警告をハイライト表示する」を参照してください。

emojiを表示する¶

mkdocs.yml
markdown_extensions:
  - pymdownx.emoji:
      emoji_index: !!python/name:materialx.emoji.twemoji
      emoji_generator: !!python/name:materialx.emoji.to_svg

画像をポップアップ表示する¶

glightboxプラグインを使用します。

1	`poetry add mkdocs-glightbox`

1	`pip install mkdocs-glightbox`

mkdocs.yml
plugins:
  - glightbox