ちょっとエンジニアリングに対してやる気が出てきたので、ブログもちゃんと書いていこうと思います。

んでいざ書こうと思ったら、このブログ、シンタックスハイライト入れてなかったのね。なので、今日は手軽に導入できるPrismを使います。CDNで使えるやつとかもあるみたいだけど、まぁこれくらいならローカルで持っててもいいかなーと思う。

多分もっとナウい方法があると思うんで、フロントエンドでバリバリなエンジニアは真似しちゃダメよ・v・

What’s Prism

Prism

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in thousands of websites, including some of those you visit daily.

何をいいたいかよくわからないけど、ボタンポチポチすればcssとjsが組み上がるので、それをDLしてペッと貼るだけです。

Hogoの場合

<head></head>で普通に読み込むだけです。超簡単ですね。僕のテーマだと(多分どのテーマにもあると思うけど)header.htmlってのがあるんで、そこに追加で書いてます。詳しくはソースを(ry

<link rel="stylesheet" href="{{ .Site.BaseURL }}css/prism.css" type="text/css" media="all" />
<script type="text/javascript" src="{{ .Site.BaseURL }}js/prism.js"></script>

サクッと導入できていいですね。プラグイン的なのも好きなのだけ選んで入れれるので、そのへんも好感持てます。

Highlightサンプル

PythonのHighlightはこんな感じ。以下は追加プラグインを使って、{.line-numbers}でクラスを付けてあげた例です。

ちゃんと行番号も表示されてますね。

import numpy as np

# see: http://prismjs.com/
print("This style use Prism.js")

これでコードをブログにバンバン載せられる準備ができました。ま、ちょっと長めのはGistとかにすると思いますが…