Mkdocsで利用するMarkdown記法¶

タブ付きコンテンツ¶

コンテンツを切り替え表示し、情報をコンパクトにまとめます。タブ内では文字やテーブル、リスト、コードブロック、アラート装飾などを表示できます。

タブ 1

タブ 1 の内容を書く。

カラム
aaa

public class HelloWorld{
    public static void main(String[] args){
        System.out.println("Hello World!!");
    }
}

タブ 2

タブ 2 の内容を書く。

リスト 1
リスト 2

Note

これはノートです。

表のソート導入方法¶

Syntax	Description	Test Text
Header	Title	Here's this
Paragraph	Text	And more
左寄せテキスト	真ん中寄せテキスト	右寄せテキスト

docs/javascripts/tables.jsに以下のJavascriptファイルを配置する。

docs/javascripts/tables.js

document$.subscribe(function() {
  var tables = document.querySelectorAll("article table")
  tables.forEach(function(table) {
    new Tablesort(table)
  })
})

mkdocs.yml

extra_javascript:
  - https://cdnjs.cloudflare.com/ajax/libs/tablesort/5.2.1/tablesort.min.js
  - javascripts/tables.js

この状態で、Markdownで記載したテーブルの内容を確認(リロード)すると、テーブルヘッダーのセル部分をクリックするとデータが並び替え表示されるようになります。

mkdocs内のドキュメントで利用する環境変数¶

mkdocs.yml内に以下のように記載する。

extra:
    version: 0.13.0
    mycopyright: Copyright 2022

mdファイルやhtmlファイル内で変数を指定する場合は以下のように記載する。

{{ config.extra.version }} : {{ config.extra.mycopyright }}

アンカーリンク¶

Markdown ファイル内では、HTML としてレンダリングされるときに、アンカー ID がすべての見出しに割り当てられます。
ID は見出しテキストであり、スペースはダッシュ (-) に置き換えられ、すべてが小文字になります。一般に、次の規則が適用されます。

ファイル名内の句読点と先頭の空白は無視されます
大文字は小文字に変換されます
文字間のスペースは、ダッシュ (-) に変換されます。

例:

###Link to a heading in the page

結果:

セクションに対するアンカーリンクの構文。

[Link to a heading in the page](#link-to-a-heading-in-the-page)

ID はすべて小文字で、リンクでは大文字と小文字が区別されるため、見出し自体で大文字が使用されている場合でも、必ず小文字を使用してください。別の Markdown ファイル内の見出しを参照することもできます。

[text to display](./target.md#heading-id)

wiki では、別のページで見出しを参照することもできます。

[text to display](/page-name#section-name)

Mkdocsハイライト¶

markdown_extensions:
  - pymdownx.critic:
      mode: view

本文

This was marked
^^This was inserted^^
~~This was deleted~~

ボタンを使いたい場合¶

Subscribe to our newsletter

カードグリッド表示¶

:fontawesome-brands-html5: HTML for content and structure
:fontawesome-brands-js: JavaScript for interactivity
:fontawesome-brands-css3: CSS for text running out of boxes
:fontawesome-brands-internet-explorer: Internet Explorer ... huh?

:fontawesome-brands-html5: HTML for content and structure

:fontawesome-brands-js: JavaScript for interactivity

:fontawesome-brands-css3: CSS for text running out of boxes

:fontawesome-brands-internet-explorer: Internet Explorer ... huh?