【番外編】Responder + Firestore でモダンかつサーバーレスなブログシステムを作ってみた【Pythonでコードをハイライトする】
2021.12.20
番外編～モダンなフレームワークの使い方を学びながらブログシステムを構築～
本連載「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;} としてみた)
さいごに
番外編である今回は、「コードハイライトの実装」を行いました。
これで、本連載も完全に終了です！
長い間、ありがとうございました！
次の連載企画にも、ぜひご注目ください！
ソースコード
なお、「本連載で制作したコードをちょっと扱いやすくしたもの」が Github にありますので、ぜひご自分で動かしてみてください！
【ソースコード：Github】
https://github.com/rightcode/python-firestore
これをもとに、オリジナルのブログシステムを作るのも良いですよ！
第1回の記事はこちら
こちらの記事もオススメ！
書いた人はこんな人
- 「好きなことを仕事にするエンジニア集団」の（株）ライトコードです！
ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。
システム開発依頼・お見積もり大歓迎！
また、WEBエンジニアとモバイルエンジニアも積極採用中です！
ご応募をお待ちしております！
ITエンタメ2022.08.08「USBドライブはもういらない」Dropbox創業者ドリュー・ヒューストン- ITエンタメ2022.08.01Eメールの父「レイ・トムリンソン」こんなに広まると思わなかった＠物語
- ライトコードの日常2022.07.20祝🎉ライトコード東京オフィスのお引っ越し！
- ITエンタメ2022.07.12【Perl開発者】ラリー・ウォールが唱えた「プログラマの三大美徳」とは？
関連記事
採用情報
\ あの有名サービスに参画!? /
バックエンドエンジニア
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界を変える…！ /
Androidエンジニア
\ みんなが使うアプリを創る /
iOSエンジニア
