
【番外編】Responder + Firestore でモダンかつサーバーレスなブログシステムを作ってみた【Pythonでコードをハイライトする】
2020.09.07
番外編~モダンなフレームワークの使い方を学びながらブログシステムを構築~

本連載「Python Responder + Firestoreでモダンかつサーバーレスなブログシステムを作ってみる」は全10回で終了しました。
前回の記事はこちら
コードハイライトを実装しよう!
番外編となる今回は、「コードハイライト」で記事個別ページのデザインを整えたいと思います。
デザインは各自お好きなもので良いのですが、便利なツールをご紹介するので、ぜひ参考にしてくださいね!
こちらの記事もオススメ!
シンタックスハイライト
記事にコードを挿入する場合、Qiita や Github では以下のような記法をしますね。
1 2 3 4 5 6 | ```python import numpy as np a = np.arange(0, 100, 2) print(a) ``` |
これが HTML になると、言語によって自動で色付けされ、とても便利なんです。
本ブログシステムもそれを目指そうと思います。
markdown + pygments
今まで Markdown → HTML の変換は、Python の markdown ライブラリを使用してきました。
実は、コードブロックにも対応しているのですが、ハイライト機能は Pygments というライブラリで拡張する必要があります。
では、さっそくやってみましょう!
インストールと CSS 取得
インストール
まずは、インストールから。
1 | $ pip install Pygments |
テーマを選択
そうしたら、テーマを選び、手元に CSS を落とします。
テーマは以下の通り。
1 2 3 | >>> from pygments.styles import STYLE_MAP >>> print(STYLE_MAP.keys()) dict_keys(['default', 'emacs', 'friendly', 'colorful', 'autumn', 'murphy', 'manni', 'monokai', 'perldoc', 'pastie', 'borland', 'trac', 'native', 'fruity', 'bw', 'vim', 'vs', 'tango', 'rrt', 'xcode', 'igor', 'paraiso-light', 'paraiso-dark', 'lovelace', 'algol', 'algol_nu', 'arduino', 'rainbow_dash', 'abap', 'solarized-dark', 'solarized-light', 'sas', 'stata', 'stata-light', 'stata-dark', 'inkpot']) |
どんなテーマがあるの?
実際のテーマは、以下のページが参考になりますよ。
【Pygments style gallery!】
https://help.farbox.com/pygments.html
載っているのはごく一部ですが、この中からお好きなものを選ぶといいでしょう!
static ディレクトリに落とす
今回は「monokai」を選択して、static ディレクトリに落とします。
1 | $ pygmentize -S monokai -f html -a .codehilite > static/highlight.css |
layout.html に CSS を追加
そして、layout.html に、この CSS を追加します。
1 | <link rel="stylesheet" href="/static/highlight.css"> |
これだけで導入は OK です。
Python側の設定
Python 側では、マークダウンから変換する際の extensions を変更します。
1 | md = markdown.Markdown(extensions=['tables', 'fenced_code', 'codehilite']) |
これでOKです。
各所に追記しておきましょう。
動作例
動作確認してみると、こんな感じです!

ハイライト例: Monokai (余白は要調整)
行番号を入れる
行番号を入れる場合は、markdown > extensions > codehilite.py の以下の部分を直さなければなりません。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | class CodeHiliteExtension(Extension): """ Add source code hilighting to markdown codeblocks. """ def __init__(self, **kwargs): # define default configs self.config = { 'linenums': [True, # None, "Use lines numbers. True=yes, False=no, None=auto"], 'guess_lang': [True, "Automatic language detection - Default: True"], 'css_class': ["codehilite", "Set class name for wrapper <div> - " "Default: codehilite"], 'pygments_style': ['default', 'Pygments HTML Formatter Style ' '(Colorscheme) - Default: default'], 'noclasses': [False, 'Use inline styles instead of CSS classes - ' 'Default false'], 'use_pygments': [True, 'Use Pygments to Highlight code blocks. ' 'Disable if using a JavaScript library. ' 'Default: True'] } super().__init__(**kwargs) |
特定の行をマークアップ
特定の行をマークアップさせたい場合は、以下のように指定してください。
1 2 3 | ```python hl_lines="5 17" nanikashirano code ``` |
行全体にかかるわけではありませんが、強調させたい時には便利ですね。

Monokaiでのマークアップ (ついでに pre{ padding: 10px;} としてみた)
さいごに
番外編である今回は、「コードハイライトの実装」を行いました。
これで、本連載も完全に終了です!
長い間、ありがとうございました!
次の連載企画にも、ぜひご注目ください!
(株)ライトコードは、WEB・アプリ・ゲーム開発に強い「好きを仕事にするエンジニア集団」です。
Responder + Firestoreでの開発依頼・お見積もりはこちらまでお願いします。
また、ResponderやFirestoreを扱えるエンジニアを積極採用中です!詳しくはこちらをご覧ください。
※現在、多数のお問合せを頂いており、返信に、多少お時間を頂く場合がございます。
ソースコード
なお、「本連載で制作したコードをちょっと扱いやすくしたもの」が Github にありますので、ぜひご自分で動かしてみてください!
【ソースコード:Github】
https://github.com/rightcode/python-firestore
これをもとに、オリジナルのブログシステムを作るのも良いですよ!
第1回の記事はこちら
こちらの記事もオススメ!
ライトコードよりお知らせ






一緒に働いてくれる仲間を募集しております!
ライトコードでは、仲間を募集しております!
当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。
また、ライトコードは現在、急成長中!だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております!
なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。
ライトコードでは一緒に働いていただける方を募集しております!
採用情報はこちら書いた人はこんな人

IT技術2021.03.02TypeScriptの型を問題形式で学べる「type-challenges」とは?
IT技術2021.03.01シスコルータのコンフィグ作成をPythonで自動化してみた!
IT技術2021.02.23【Unity】ARFoundation入門~機能解説から平面検知の実装まで~
IT技術2021.02.22Swiftでguardを使うメリットと使い方をご紹介!