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;} としてみた)

さいごに

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

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

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

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

(株)ライトコードは、WEB・アプリ・ゲーム開発に強い「好きを仕事にするエンジニア集団」です。
Responder + Firestoreでの開発依頼・お見積もりはこちらまでお願いします。
また、ResponderやFirestoreを扱えるエンジニアを積極採用中です!詳しくはこちらをご覧ください。

※現在、多数のお問合せを頂いており、返信に、多少お時間を頂く場合がございます。

ソースコード

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

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

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

第1回の記事はこちら

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

ライトコードよりお知らせ

にゃんこ師匠にゃんこ師匠
システム開発のご相談やご依頼はこちら
ミツオカミツオカ
ライトコードの採用募集はこちら
にゃんこ師匠にゃんこ師匠
社長と一杯飲みながらお話してみたい方はこちら
ミツオカミツオカ
フリーランスエンジニア様の募集はこちら
にゃんこ師匠にゃんこ師匠
その他、お問い合わせはこちら
ミツオカミツオカ
   
お気軽にお問い合わせください!せっかくなので、別の記事もぜひ読んでいって下さいね!

一緒に働いてくれる仲間を募集しております!

ライトコードでは、仲間を募集しております!

当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。

また、ライトコードは現在、急成長中!だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております!

なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。

ライトコードでは一緒に働いていただける方を募集しております!

採用情報はこちら

書いた人はこんな人

ライトコードメディア編集部
ライトコードメディア編集部
「好きなことを仕事にするエンジニア集団」の(株)ライトコードのメディア編集部が書いている記事です。

関連記事