前の記事では、.mdファイルからHTMLを動的にレンダリングするサポートを追加しました。
しかし、ご覧のとおり、docs/hello.mdのPythonコードブロックはレンダリングされましたが、プレーンで色付けされておらず、読みにくかったです。
この記事では、この問題を解決します。Pygmentsとpython-markdown拡張機能を使用して、Markdownコードブロックに構文ハイライトを追加します。
ステップ1：ハイライト依存関係のインストール
python-markdownライブラリは、「拡張機能」を通じて追加の機能をサポートしています。コードハイライトを実装するには、codehilite拡張機能が必要ですが、これは別のライブラリであるPygmentsに依存しています。
Pygmentsをインストールするには、次のコマンドを実行します。
ステップ2：静的ファイルディレクトリとCSSの設定
構文ハイライトの仕組みは、次の2段階のプロセスです。
python-markdownのcodehilite拡張機能は、コードブロック（例：@@CODE_BLOCK1@@）を特定のCSSクラス（キーワードの.k、文字列の.sなど）を持つHTMLタグに変換します。- CSSファイルを使用して、ブラウザにこれらのCSSクラスが表示すべき色を指示します。
Pygmentsライブラリは、このCSSを生成するための便利なコマンドラインツールを提供しています。
まず、プロジェクトのルートディレクトリにstatic/cssフォルダを作成して、このCSSファイルを保存しましょう。
ステップ3：ハイライトCSSファイルの生成
ターミナルを開き、次のコマンドを実行します。
pygmentizeパラメータの説明：
-S monokai: ハイライトテーマとしてmonokaiを指定します（default、github-dark、solarized-lightなども試せます）。-f html:-fは、HTML用のCSSを生成したいことを示します。-a .codehilite:-aは、すべてのCSSルールが.codehiliteCSSクラス（python-markdownによって使用されるデフォルトクラス）の下にネストされることを意味します。
完了後、static/css/highlight.cssを開くと、monokaiテーマのCSSルールが内部に生成されているのがわかります。
ステップ4：FastAPIでの静的ディレクトリのマウント
これでCSSファイルはできましたが、FastAPIはまだそれを認識していません。これを修正するには、main.pyでstaticディレクトリを「マウント」する必要があります。
main.pyを開き、次のように変更します。
ステップ5：HTMLテンプレートにCSSを含める
templates/doc.htmlを変更し、HTMLページがコードハイライトCSSをロードできるように、<head>に<link>タグを追加します。
ステップ6：Markdown拡張機能の有効化
最後のステップとして、main.pyに戻り、python-markdownライブラリにcodehilite拡張機能を使用するように指示しましょう。
また、バッククォート3つ内のコンテンツをコードブロックとしてレンダリングするために使用されるfenced_code拡張機能も必要です。これは、構文ハイライトを表示するための必須条件です。
main.pyのget_hello_docルート関数を変更します。
ステップ7：実行とテスト
uvicorn main:app --reloadを実行してサーバーを起動します。
再度http://127.0.0.1:8000/docs/helloにアクセスします。
hello.mdのPythonコードブロックに、monokaiテーマの構文ハイライトが適用されているのがわかります。CSSを生成する際のパラメータを変更して、他のハイライトテーマの効果を確認することもできます。
プロジェクトのオンラインデプロイ
ドキュメントサイトは皆が閲覧できるようにするものなので、ローカルで実行するだけでは十分ではありません。次に、オンラインでデプロイしましょう。
簡単なデプロイオプションはLeapcellを使用することです。これは、FastAPIを含むさまざまな言語やフレームワークのプロジェクトをホストできるWebアプリホスティングプラットフォームです。
以下の手順に従ってください。
1.ウェブサイトでアカウントを登録します。
2.プロジェクトをGitHubにコミットします。手順については、GitHubの公式ドキュメントを参照してください。Leapcellは後でGitHubリポジトリからコードを取得します。
3.Leapcellページで「Create Service」をクリックします。
4.FastAPIリポジトリを選択すると、Leapcellが必要な構成を自動入力しているのが表示されます。
5.下部にある「Submit」をクリックしてデプロイします。デプロイはすぐに完了し、デプロイホームページに戻ります。ここでLeapcellがドメインを提供していることがわかります。これはブログのオンラインアドレスです。
結論と次のステップ
構文ハイライトにより、ドキュメントサイトははるかにプロフェッショナルに見えます。
しかし、まだ問題が1つあります。doc.htmlテンプレートのページタイトル（{{ page_title }}）は、main.pyのルート関数でハードコードされたままです（"page_title": "Hello, Markdown!"）。これはMarkdownファイルから取得されているわけではありません。
これは非常に柔軟性がありません。正しいアプローチは、このタイトルもhello.mdファイル自体から読み取ることです。
次の記事では、MarkdownファイルでFrontmatter（title、dateなどの記事メタデータを定義するために使用）を導入し、プロジェクトでFrontmatterの解析と読み込みを実装して、コードでのハードコーディングを回避します。
Xでフォローする：@LeapcellJapan
関連記事：
