bloggerでブログ記事中のpre内スクリプトに色付けする【blogspot】

前段

pythonのコードをブログに載せたんですが見づらすぎてハゲるのでどうにかしたいです。

調査

実践

ソースのDL

$ cd ~/Downloads/
$ tar -jxvf prettify-4-Mar-2013.tar.bz2

いろいろ種類あって迷いましたが最新のmin版にしました。

ソースの修正

$ cd google-code-prettify/src
$ vi prettify.css 

# ファイル下部のコードを一部コメントアウト

他のファイルだとどうか知りませんが、159〜166行目をコメントアウトしました。

ソースアップロードとテーマの修正

めっちゃ詰まりました。
やることとしてはウェブスペースにpretty.cssとpretty.jsをアップロードして、bloggerのテーマからhtmlを弄るだけ。
なんですが、セキュリティを突破するための作業が必要でした。

xserver→httpsじゃないので弾かれる。FAX！
google drive→そういう用途で使えなくなってる

というわけでgithubに上げました。
よくわからずにローカルリポジトリを作ってremote追加してpushしてとかやってしまったんですが、直接ファイルを作成することができるのでそっちでやればよかった……。

で、上げたら今度はこんなエラーがブラウザから出てきました。

Refused to apply style from ‘~~/prettify.css’ because its MIME type (‘text/plain’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Refused to execute script from ‘~/prettify.js’ because its MIME type (‘text/plain’) is not executable, and strict MIME type checking is enabled.

調べたところ、別サービス経由からならうまく読み込めるようです。

結局、コレを見つつ別サービス経由で参照するようにしたところ、うまくいきました。

githubのアドレスのドメインをcdn.rawgit.comに変更すれば使えます。
こんな感じです。

    <link href='https://cdn.rawgit.com/user/repository/master/prettify.css' rel='stylesheet' type='text/css'/>
    <script src="https://cdn.rawgit.com/user/repository/master/prettify.js" type='text/javascript'></script>

CSSの修正

これは以前からでしたけど、preの長い行がはみ出してたんですよね。

なので、今回の修正でついでに直すことにしました。
ただ資料に紹介されていたのが長い行の場合に改行する方法だったので、スクロールしてくれる方法を探します。

preのスタイルにoverflow: auto;を追加するだけでできるらしいです。

やってみると確かにできました。
ブラウザ依存のきらいはあるようですが……。

確認

というわけでできました。

enter image description here

見た目はちょっとイマイチかな……
元のbackgroundがdimgreyで見づらかったため、そのへんも多少変更しています。

あと、stackedit経由だとpreタグには自動的にprettyprintクラス（あとprettyprintedも）が付与されているようなので、既存記事を変更する必要はなかったです。

linenumsを追加する

linenumsはちょっと気になるけどスルー……しようかと思いつつ試しに足してみたら便利そうだったので対策します。

以前に停止になった広告アドレスの向き先を変えるという処理を足していたので、そこに追加しました。

        $(document).ready(function() {
            // 広告用のなんやかや

            $("pre").addClass("linenums");
        });

ぜんぜん本件とは関係ないんですがついでに広告用のなんやかやを修正した記事も書いたので、仕事をしましたという主張のために置いておきます。

スタイル修正

全般的に問題なかったものの、linenumsを付けたpreの中にolが追加され、そいつがなぜかmargin-bottom: 30px !important;とかしてました。

非常に不格好だったので、テーマに直接ol.linenums { margin-bottom: 0px !important; }を追加して修正しました。

修正方法が不格好ですが……。

今後の課題

とりあえず最低限はできましたね。
言語の指定とかpreタグの先頭にファイル名とかなんか文字を記載するとかそのへんも気が向いたらやっていきたいです。

コード記載するなら素直にQiitaで記事書けという話はあると思います。

 B! LINE