コンテンツにスキップ
2025年03月09日 | 2025年03月14日

note風 MkDocsテンプレート：強化版

このサイトはMkDocsを使って、noteのような読みやすい記事体験を提供するテンプレートです。 技術記事やブログ、ドキュメントをシンプルかつ美しく公開することができます。 さらに、noteにはない高度な機能を多数搭載しています。

MkDocsテンプレートイメージ

主な特徴

  • クリーンなデザイン: noteのように読みやすいシンプルなレイアウト
  • マークダウン記法: 簡単な記法で豊かな表現が可能
  • コードハイライト: プログラムコードを見やすく表示
  • ダークモード: 目に優しい表示モードを搭載
  • モバイルフレンドリー: スマホやタブレットでも快適に閲覧可能

noteにはない強力な機能

  • 数式表示: LaTeX形式で数式を表示 (\(E=mc^2\))
  • 図表作成: Mermaidで簡単にフローチャートやシーケンス図を作成
  • タブ表示: 複数のコード例や内容を切り替え表示
  • インタラクティブ要素: SVG/JavaScript/WebAssemblyによる動的コンテンツ
  • PDFエクスポート: 記事をPDF形式でダウンロード可能
  • ブログ機能: 最新記事一覧やアーカイブ表示

使い方

  1. リポジトリをクローンする
  2. mkdocs.ymlの設定を自分用にカスタマイズする
  3. docsフォルダにマークダウンファイルを追加する
  4. mkdocs serveでローカルプレビュー
  5. mkdocs buildでサイトを生成
  6. mkdocs gh-deployでGitHub Pagesにデプロイ

サンプルコンテンツ

以下は、このテンプレートで表示できるさまざまな要素のサンプルです。

aaaaaaaaaaaaaaaaaaaaaaa 強調表示 bbbbbbbbbbbbbbbbbbb

コードブロック

def hello_world():
    """noteのようなコードブロック表示"""
    print("Hello, Note-style MkDocs!")
    return True

引用

noteのような引用ブロックです。 引用部分は左側にアクセントカラーのボーダーが表示されます。

リスト

  • 項目1
  • 項目2
    • ネストされた項目
    • もう一つのネスト項目
  • 項目3

テーブル

項目 説明
MkDocs Pythonベースの静的サイトジェネレーター
Material for MkDocs 美しいマテリアルデザインのテーマ
Markdown 簡単に書けるマークアップ言語

カスタマイズ

このテンプレートは簡単にカスタマイズできます。mkdocs.ymlの設定とdocs/stylesheets/extra.cssのスタイルを変更することで、独自のデザインに調整できます。

数式表示

インライン数式: \(E=mc^2\)

ブロック数式: $$ \frac{n!}{k!(n-k)!} = \binom{n}{k} $$

Mermaid図表

graph TD
    A[開始] --> B{条件分岐}
    B -->|Yes| C[処理1]
    B -->|No| D[処理2]
    C --> E[終了]
    D --> E

タブ表示

def hello_world():
    print("Hello World!")

function helloWorld() {
    console.log("Hello World!");
}

フレームボックス

情報ボックス

これは情報を表示するボックスです。

警告

これは警告を表示するボックスです。

ヒント

これはヒントを表示するボックスです。

SVG直接埋め込み

MkDocs x

Twitter統合機能

新たにTwitter統合機能を追加しました。記事とTwitterを連携させることで、コンテンツの価値循環システムを構築できます。

  • 記事内にTwitter投稿を埋め込み
  • 著者のTwitterアカウントをフォロー
  • 埋め込み投稿へのいいね・リツイート・返信が可能
  • Twitterによる簡易コメントシステムとブックマーク機能

詳しくはTwitter統合のデモページをご覧ください。

高度な機能の例

テンプレートには様々な高度な機能が含まれています。詳細な例は以下の各ページでご覧いただけます：

カスタマイズ

このテンプレートは簡単にカスタマイズできます。mkdocs.ymlの設定とdocs/stylesheets/extra.cssのスタイルを変更することで、独自のデザインに調整できます。

設定ガイドを見る →

Your Name

Your Name

技術とデザインが好きなエンジニア。WebとAIについて発信しています。

次の記事
ブログ