1. HOME
  2. ブログ
  3. IT技術
  4. 【番外編】Responder + Firestore でモダンかつサーバーレスなブログシステムを作ってみた【Pythonでコードをハイライトする】

【番外編】Responder + Firestore でモダンかつサーバーレスなブログシステムを作ってみた【Pythonでコードをハイライトする】

番外編モダンなフレームワークの使い方を学びながらブログシステムを構築~

本連載「Python Responder + Firestoreでモダンかつサーバーレスなブログシステムを作ってみる」は全10回で終了しました。

前回の記事はこちら

コードハイライトを実装しよう!

番外編となる今回は、「コードハイライト」で記事個別ページのデザインを整えたいと思います。

デザインは各自お好きなもので良いのですが、便利なツールをご紹介するので、ぜひ参考にしてくださいね!

シンタックスハイライト

記事にコードを挿入する場合、Qiita や Github では以下のような記法をしますね。

これが HTML になると、言語によって自動で色付けされ、とても便利なんです。

本ブログシステムもそれを目指そうと思います。

markdown + pygments

今まで Markdown → HTML の変換は、Python の markdown ライブラリを使用してきました。

実は、コードブロックにも対応しているのですが、ハイライト機能は Pygments というライブラリで拡張する必要があります。

では、さっそくやってみましょう!

インストールと CSS 取得

インストール

まずは、インストールから。

テーマを選択

そうしたら、テーマを選び、手元に CSS を落とします。

テーマは以下の通り。

どんなテーマがあるの?

実際のテーマは、以下のページが参考になりますよ。

【Pygments style gallery!】
https://help.farbox.com/pygments.html

載っているのはごく一部ですが、この中からお好きなものを選ぶといいでしょう!

static ディレクトリに落とす

今回は「monokai」を選択して、static ディレクトリに落とします。

layout.html に CSS を追加

そして、layout.html に、この CSS を追加します。

これだけで導入は OK です。

Python側の設定

Python 側では、マークダウンから変換する際の extensions を変更します。

これでOKです。

各所に追記しておきましょう。

動作例

動作確認してみると、こんな感じです!

ハイライト例: Monokai (余白は要調整)

行番号を入れる

行番号を入れる場合は、markdown > extensions > codehilite.py の以下の部分を直さなければなりません。

特定の行をマークアップ

特定の行をマークアップさせたい場合は、以下のように指定してください。

行全体にかかるわけではありませんが、強調させたい時には便利ですね。

Monokaiでのマークアップ (ついでに pre{ padding: 10px;} としてみた)

さいごに

番外編である今回は、「コードハイライトの実装」を行いました。

これで、本連載も完全に終了です!

長い間、ありがとうございました!

次の連載企画にも、ぜひご注目ください!

ソースコード

なお、「本連載で制作したコードをちょっと扱いやすくしたもの」が Github にありますので、ぜひご自分で動かしてみてください!

【ソースコード:Github】
https://github.com/rightcode/python-firestore

これをもとに、オリジナルのブログシステムを作るのも良いですよ!

第1回の記事はこちら

こちらの記事もオススメ!

書いた人はこんな人

広告メディア事業部
広告メディア事業部
「好きを仕事にするエンジニア集団」の(株)ライトコードです!

ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。

システム開発依頼・お見積もり大歓迎!

また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です!
インターンや新卒採用も行っております。

以下よりご応募をお待ちしております!
https://rightcode.co.jp/recruit

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア