Markdown Renderer for GitHub

美しいGitHub Flavored Markdownレンダリング、シンタックスハイライト、インタラクティブな図表、サーバーサイドレンダリングでWordPressコンテンツを変革します。 [🖼️ レンダリングサンプル](/markdown-renderer-for-github/examples) · <a href="https://markdown-renderer.wakalab.dev/" target="_blank" rel="noopener">🔗 ライブデモを見る</a> ## 概要 Markdown Renderer for GitHubは、慣れ親しんだGitHubのマークダウン体験をWordPressサイトにもたらす強力なWordPressプラグインです。技術ブログ、ドキュメントサイト、プロフェッショナルなコード表示が必要なあらゆるコンテンツに最適です。SSRサポート、Chart.js統合、PlantUML/Ditaaダイアグラム、多言語対応など、v2.9.4まで進化し続けています。 ## 主な機能 ### 🎨 美しいシンタックスハイライト - **Shiki**搭載 - VS Codeで使用されているのと同じシンタックスハイライター - **100以上のプログラミング言語**をサポート - 複数の美しいテーマ（GitHub Light/Dark、VS Codeテーマなど） - 自動言語検出 - **Web Worker非同期ハイライト** - スムーズなUXのためのノンブロッキング構文ハイライト (v2.6.0) ### 📊 図表サポート - **Mermaid**: フローチャート、シーケンス図などを作成 - **Ditaa**: Ditaa ASCIIアートによる図表サポート (v2.7.5) - プロフェッショナルな図表レンダリング - インタラクティブなズーム機能 - **Lightbox表示**: クリックでパン＆ズーム可能な拡大表示 (v1.11.0) - ユーザーフレンドリーなエラーメッセージ ### ✨ GitHub Flavored Markdown - テーブル、タスクリスト、取り消し線 - 自動URLリンク - 脚注サポート - GitHub markdownと100%互換 ### 📋 コピーボタン機能 - ワンクリックでコードをコピー - GitHubスタイルのユーザー体験 - 完全なアクセシビリティサポート - モバイルフレンドリーなデザイン ### ⚡ パフォーマンス最適化 - 並列レンダリングとアセットの遅延読み込み (v2.7.0) - 最小限のパフォーマンス影響 - CDNフレンドリーなアーキテクチャ - WordPress用に最適化 - **Web Worker非同期ハイライト**: メインスレッドをブロックしない描画 (v2.6.0) - **サーバーサイドレンダリング**: 高速ページロードのための並列レンダリングパイプライン (v1.10.0) - SVGレンダリングの信頼性改善とキャッシュ最適化 ### ⚙️ タブ化設定画面 - 設定カテゴリの整理（テーマ、一般設定、構造化データ、多言語、ライセンス） - 論理的なグループ化でユーザー体験を向上 - 設定オプション間の簡単なナビゲーション ### 📝 YAMLフロントマター対応 - ドキュメントメタデータの動的表示（タイトル、日時、著者、タグ） - 柔軟なドキュメント管理 - 技術コンテンツのユーザー体験を向上 ### 📑 自動目次生成 (TOC) - Markdownのヘッダー構造（H1〜H6）から目次を自動抽出 - スクロール追従型StickyサイドバーUI - TOC設定のためのタブ付きナビゲーション (v1.12.0) ### 🖥️ SSR (サーバーサイドレンダリング) (v1.10.0) - コードブロックとMermaid図のサーバーサイドレンダリング - JavaScript無効環境でも正しく表示 - SEOと初期ページロードパフォーマンスを改善 ### 💡 Mermaid Lightbox (v1.11.0) - Mermaid図をクリックするとフルスクリーンのLightboxが開く - 複雑な図表をスムーズにズーム＆パン操作可能 - キーボード操作・アクセシビリティ対応 ### 📈 Chart.js統合 (v2.1.0) - 棒グラフ、円グラフ、折れ線グラフ、散布図を描画 - コードフェンスによるインライン定義 - レスポンシブ＆インタラクティブなチャートレンダリング ### 🌿 PlantUML/Ditaa図表サポート (v2.7.5) - PlantUML構文によるフルUML図表サポート - DitaaによるASCIIアート図表サポート (v2.7.5) - シーケンス図、クラス図、ユースケース図など - サーバーサイドレンダリング対応 ### ⚙️ Web Worker非同期ハイライト (v2.6.0) - バックグラウンドのWeb Workerでシンタックスハイライトを実行 - メインスレッドをブロックしない — 重いページでもスムーズなスクロール - 非対応環境へのシームレスなフォールバック ### 🌐 多言語対応 (v2.7.0) - パスベースのURL言語ルーティング（例: `/en/`、`/ja/`） - インライン表示オプション付きのグローバル言語スイッチャー (v2.7.0) - 言語表示順序のカスタマイズと国旗のみのラベル表示 (v2.7.1) - 管理画面UIとレンダリングコンテンツの完全なi18n対応 ## 使用例 - **技術ブログ**: プロフェッショナルなシンタックスハイライトでコードスニペットを共有 - **ドキュメントサイト**: 美しい技術ドキュメントを作成 - **開発者ポートフォリオ**: スタイリッシュにコードを紹介 - **教育コンテンツ**: 明確で読みやすいコード例でプログラミングを教える - **APIドキュメント**: インタラクティブな例でAPIをドキュメント化 ## 価格 ### 無料版 - 基本的なマークダウンレンダリング - 限定的なシンタックスハイライトテーマ - WordPress.org経由の標準サポート ### プレミアム版 - すべてのシンタックスハイライトテーマ - 高度なカスタマイズオプション - PlantUML図表サポート - 生涯アップデート - 商用利用ライセンス [プレミアムライセンスを取得 →](/markdown-renderer-for-github/pricing) --- **Pro ライセンス — 準備中（Coming soon）** コア機能は WordPress.org の無料版でご利用いただけます。Pro ライセンスのチェックアウトは現在準備中です。 - [📦 無料版を WordPress.org からダウンロード](https://wordpress.org/plugins/markdown-renderer-for-github/) - <a href="https://markdown-renderer.wakalab.dev/" target="_blank" rel="noopener">🔗 ライブデモを見る</a> ## 必要要件 - WordPress 6.0以上 - PHP 8.1以上 - JavaScriptが有効な最新ブラウザ ## インストール 1. WordPress.orgからプラグインをダウンロードするか、プレミアム版を購入 2. WordPressプラグインディレクトリにアップロード 3. プラグインを有効化 4. WordPress管理画面で設定を構成 [完全なドキュメントを見る →](/markdown-renderer-for-github/documentation/markdown-renderer) [技術仕様を見る →](/markdown-renderer-for-github/tech)