【番外編】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です。
各所に追記しておきましょう。
動作例
動作確認してみると、こんな感じです!
行番号を入れる
行番号を入れる場合は、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 ``` |
行全体にかかるわけではありませんが、強調させたい時には便利ですね。
さいごに
番外編である今回は、「コードハイライトの実装」を行いました。
これで、本連載も完全に終了です!
長い間、ありがとうございました!
次の連載企画にも、ぜひご注目ください!
ソースコード
なお、「本連載で制作したコードをちょっと扱いやすくしたもの」が Github にありますので、ぜひご自分で動かしてみてください!
【ソースコード:Github】
https://github.com/rightcode/python-firestore
これをもとに、オリジナルのブログシステムを作るのも良いですよ!
第1回の記事はこちら
こちらの記事もオススメ!
書いた人はこんな人
- 「好きを仕事にするエンジニア集団」の(株)ライトコードです!
ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。
システム開発依頼・お見積もり大歓迎!
また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です!
インターンや新卒採用も行っております。
以下よりご応募をお待ちしております!
https://rightcode.co.jp/recruit
- ライトコードの日常2月 29, 2024座談会はじめました!ライトコードの話ちょっと聞いてみませんか?
- ライトコードの日常12月 27, 2023年忘れ!ライトコード大忘年会2023
- ライトコードの日常12月 1, 2023ライトコードクエスト〜東京オフィス歴史編〜
- ITエンタメ10月 13, 2023Netflixの成功はレコメンドエンジン?