MkDocsに「mkdocs-material」を使用してMaterialデザインを適応する

MkDocsに「mkdocs-material」を使用してMaterialデザインを適応する

Markdownで記述した内容を静的サイトとして生成してくれるMkDocsにMaterialデザインを適応するまでの手順を記述してます。

環境

  • OS windows10 pro 64bit
  • python 3.6.8
  • pip 20.1.1

※MkDocsの導入手順はこちら

mkdocs-materialインストール

pipを使ってインストールします。

mkdocs-material適応

プロジェクト配下にある「mkdocs.yml」に以下を追加します。

起動して確認してみます。

ブラウザから http://localhost:8000 にアクセスするとMaterialデザインが適応されていることが確認できます。

font変更

fontの変更は「mkdocs.yml」に以下を追加すれば指定することが可能です。

使用できるフォントはgoogle fontで確認できます。

カラー変更

カラーの変更は「mkdocs.yml」に以下を追加すれば指定することが可能です。

指定できるカラーは以下のものがあります。

アラート追加

アラートは、「mkdocs.yml」に以下を追加すれば指定することが可能です。

適当なmdファイルに以下を追加します。

アラートが表示されていることが確認できます。

fontawesome追加

fontawesomeも使用することが可能です。

まずはpipでインストールを行います。

「mkdocs.yml」に以下を追加します。

適当なmdファイルに以下を追加します。

fontawesomeが利用できていることが確認できます。