コンテンツにスキップ

Materialの便利機能を使おう

Material テーマには、いろいろな便利機能が用意されています。公式ページにたくさん紹介されていますが、いくつか使い方を見ていきましょう。なお、markdown_extensions の設定は、mkdocs.yml ファイルで行います。

メモや注意書き

メモや注意書きボックスを簡単に追加することができます。次のように設定します。

markdown_extensions:
    - admonition
    - pymdownx.details
    - pymdownx.superfences

1つ目は、メモや注意書きボックスを追加するための設定です。2つ目はそのボックスを開閉できるようにするための設定。3つ目は、メモなどの中に、コードなどを入れ子にするための設定です。必要なものを設定します。

設定してから、次のように書いてみます。

!!! note
    note のサンプル表示

こうすると、以下のように表示されます。

Note

note のサンプル表示

例えば、!!! のあとを warning にすれば、次のようになります。

Warning

warning のサンプル表示

他にも、いろいろな項目があります。

タイトルを変えたい場合は、次のようにします。

!!! note "メモ"
    note のサンプル表示

↓表示例

メモ

note のサンプル表示

タイトルを消したい場合は、次のようにします。

!!! note ""
    note のサンプル表示

↓表示例

note のサンプル表示

pymdownx.details が使えるように設定した後、 !!! の部分を ??? に変えれば、開閉できるようになります。

??? note "メモ"
    note のサンプル表示

↓表示例

メモ

note のサンプル表示

??? を ???+ に変えれば、はじめから開いた状態にできます。

コードブロック

コードをハイライトして表示したい場合は、まず、次のように設定します。

markdown_extensions:
    - pymdownx.highlight

extra_javascript:
    - https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/highlight.min.js
    - javascripts/config.js
extra_css:
    - https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/styles/default.min.css

pymdownx.highlight の設定だけではダメで、外部の highlight.js の JavaScript ファイルと CSS ファイルを読みこみます。また、docs/javascripts/config.js を作って、次のように書いて保存します。

hljs.initHighlighting()

これで、書いたコードがハイライトされるようになります。

コードを表示するには、次のように書きます。

``` python
import tensorflow as tf
```

このように書くと、Python のコードだと解釈され、次のように表示されます。

import tensorflow as tf

次のようにすれば、行番号をつけることができます。

``` python linenums="10"
def bubble_sort(items):
    for i in range(len(items)):
        for j in range(len(items) - 1 - i):
            if items[j] > items[j + 1]:
                items[j], items[j + 1] = items[j + 1], items[j]
```

linenums="10" と設定したので、行番号は10から始まります。

10
11
12
13
14
def bubble_sort(items):
    for i in range(len(items)):
        for j in range(len(items) - 1 - i):
            if items[j] > items[j + 1]:
                items[j], items[j + 1] = items[j + 1], items[j]

行のハイライトもできます。次のように書きます。

``` python hl_lines="2 3"
def bubble_sort(items):
    for i in range(len(items)):
        for j in range(len(items) - 1 - i):
            if items[j] > items[j + 1]:
                items[j], items[j + 1] = items[j + 1], items[j]
```

こう書くと、2行目と3行目がハイライトされます。

def bubble_sort(items):
    for i in range(len(items)):
        for j in range(len(items) - 1 - i):
            if items[j] > items[j + 1]:
                items[j], items[j + 1] = items[j + 1], items[j]

また、コードの説明のときに、「このキーを押す」といいたいことがあるでしょう。その場合は、まず、Keys を使うために次のように設定します。

markdown_extensions:
    - pymdownx.keys

こうしてから ++ctrl+alt+del++ と書くと、 Ctrl+Alt+Del と表示されます。

タブ

次のように設定すると、タブを使えるようになります。

markdown_extensions:
    - pymdownx.tabbed

こうしてから、次のように書いてみます。

=== "C"
    C のサンプルコード
    ``` c
    #include <stdio.h>

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

=== "C++"
    C++ のサンプルコード

    ``` c++
    #include <iostream>

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

=== が各タブを表し、そのあとの文字がタイトルになります。

C のサンプルコード 

#include <stdio.h>

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

C++ のサンプルコード

#include <iostream>

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

おわりに

ここまで、Material テーマのいろんな便利機能を見てきました。他にもたくさんあるので、全部を覚えて使いこなすのは難しいです。このページで解説したことに加え、公式ページ も参考にして使って見ましょう。