【番外編】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を使うメリットと使い方をご紹介！
関連記事
採用情報
\ あの有名サービスに参画!? /
バックエンドエンジニア
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界はお前の手の中に・・・ /
モバイルエンジニア
\ サービスの守り神！ /
インフラエンジニア
