メディアチーム【番外編】Responder + Firestore でモダンかつサーバーレスなブログシステムを作ってみた【Pythonでコードをハイライトする】
メディアチームIT技術
番外編
本連載「Python Responder + Firestoreでモダンかつサーバーレスなブログシステムを作ってみる」は全10回で終了しました。
前回の記事はこちら
コードハイライトを実装しよう！
番外編となる今回は、「コードハイライト」で記事個別ページのデザインを整えたいと思います。
デザインは各自お好きなもので良いのですが、便利なツールをご紹介するので、ぜひ参考にしてくださいね！
シンタックスハイライト
記事にコードを挿入する場合、Qiita や Github では以下のような記法をしますね。
1```python
2import numpy as np
3
4a = np.arange(0, 100, 2)
5print(a)
6```これが HTML になると、言語によって自動で色付けされ、とても便利なんです。
本ブログシステムもそれを目指そうと思います。
markdown + pygments
今まで Markdown → HTML の変換は、Python の markdown ライブラリを使用してきました。
実は、コードブロックにも対応しているのですが、ハイライト機能は Pygments というライブラリで拡張する必要があります。
では、さっそくやってみましょう！
インストールと CSS 取得
インストール
まずは、インストールから。
1$ pip install Pygmentsテーマを選択
そうしたら、テーマを選び、手元に CSS を落とします。
テーマは以下の通り。
1>>> from pygments.styles import STYLE_MAP
2>>> print(STYLE_MAP.keys())
3dict_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.csslayout.html に CSS を追加
そして、layout.html に、この CSS を追加します。
1<link rel="stylesheet" href="/static/highlight.css">これだけで導入は OK です。
Python側の設定
Python 側では、マークダウンから変換する際のextensions を変更します。
1md = markdown.Markdown(extensions=['tables', 'fenced_code', 'codehilite'])これでOKです。
各所に追記しておきましょう。
動作例
動作確認してみると、こんな感じです！
行番号を入れる
行番号を入れる場合は、markdown > extensions > codehilite.py の以下の部分を直さなければなりません。
1class CodeHiliteExtension(Extension):
2 """ Add source code hilighting to markdown codeblocks. """
3
4 def __init__(self, **kwargs):
5 # define default configs
6 self.config = {
7 'linenums': [True, # None,
8 "Use lines numbers. True=yes, False=no, None=auto"],
9 'guess_lang': [True,
10 "Automatic language detection - Default: True"],
11 'css_class': ["codehilite",
12 "Set class name for wrapper <div> - "
13 "Default: codehilite"],
14 'pygments_style': ['default',
15 'Pygments HTML Formatter Style '
16 '(Colorscheme) - Default: default'],
17 'noclasses': [False,
18 'Use inline styles instead of CSS classes - '
19 'Default false'],
20 'use_pygments': [True,
21 'Use Pygments to Highlight code blocks. '
22 'Disable if using a JavaScript library. '
23 'Default: True']
24 }
25
26 super().__init__(**kwargs)特定の行をマークアップ
特定の行をマークアップさせたい場合は、以下のように指定してください。
1```python hl_lines="5 17"
2nanikashirano code
3```行全体にかかるわけではありませんが、強調させたい時には便利ですね。
さいごに
番外編である今回は、「コードハイライトの実装」を行いました。
これで、本連載も完全に終了です！
長い間、ありがとうございました！
次の連載企画にも、ぜひご注目ください！
ソースコード
なお、「本連載で制作したコードをちょっと扱いやすくしたもの」が Github にありますので、ぜひご自分で動かしてみてください！
【ソースコード：Github】
https://github.com/rightcode/python-firestore
これをもとに、オリジナルのブログシステムを作るのも良いですよ！
第1回の記事はこちら
こちらの記事もオススメ！
ライトコードでは、エンジニアを積極採用中！
ライトコードでは、エンジニアを積極採用しています！社長と一杯しながらお話しする機会もご用意しております。そのほかカジュアル面談等もございますので、くわしくは採用情報をご確認ください。
採用情報へ
「好きを仕事にするエンジニア集団」の（株）ライトコードです！ ライトコードは、福岡、東京、大阪、名古屋の４拠点で事業展開するIT企業です。 現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。 いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。 システム開発依頼・お見積もり大歓迎！ また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」を積極採用中です！ インターンや新卒採用も行っております。 以下よりご応募をお待ちしております！ https://rightcode.co.jp/recruit
