昔は何でも自前で作りたい質だったので、既存のツールやサービスを使うのが悔しくて仕方がなかったのですが、歳を取ったせいか「最近はいろいろ便利なものが多いのねぇ～」と受け入れるようになりました。WordPressを使って、レンタルサーバで簡単インストールに頼っている時点でもう、便利な世の中ありがとう！と思っています。
そんなわけで、コード表示用のCSSやスクリプトくらいなら自分で用意したい気持ちもありましたが、Googleさんの「code-prettify」が軽快そうだったので、使ってみることにしました。
GitHub上にある、code-prettifyのReadMeを参照しながら、使い方を覚えたいと思います。
https://github.com/google/code-prettify
早速サンプルを試してみる。
これは、ReadMeに書かれていたコード。
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<pre class="prettyprint">class Voila {
public:
// Voila
static const string VOILA = "Voila";
// will not interfere with embedded <a href="#voila2">tags</a>.
}</pre>↓↓これをそのままWordPressのテキストエディタに張り付けると、こうなる。
あら簡単。そこそこきれい。
言語を指定できるようなので、試しに
<pre class="prettyprint lang-perl">
という記述にして、perlとしてスタイルを適用してみます。
class Voila {
public:
// Voila
static const string VOILA = "Voila";
// will not interfere with embedded tags.
}
perlの文法ではないので、当たり前ですが微妙な色の変わり方をしました。
次に行数をつけてみる
pre class=”prettyprint linenums“という書き方をすれば良いらしい
先頭行を5行目として書き出すときは、linenums:5と書く。
行数が表示できたけど、5行ごとにしか数字が出ないのはちょっとわかりにくい。全行に行数を表示させたい場合は、prettify.cssの中のこの部分のコメントアウトを外せば良いらしいが、cssなどをこちらで持たなければならないのは少し面倒。
<style>
li.L0, li.L1, li.L2, li.L3,
li.L5, li.L6, li.L7, li.L8 {
list-style-type: decimal !important;
}
</style>ということで一部だけローカルのCSSででスタイル指定。
li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9
{
list-style-type: decimal;
}↓こんな風になりました。このページにスタイルシートを適用すると、上記のコードにも行番号がついてわけがわからなくなるので、画像で表示しています。
一応できたけれど、、他のスキンも含めて想像していたよりちょっと地味なので、他のツールをあたろうと思います。
残念！
～追記～
スタイルシートにこれだけ指定して、いい感じに表示することができました。
.prettyprint {
font-size: 80% !important;
}
.prettyprint li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9
{
list-style-type: decimal !important;
border-left : 2px solid #00ff00;
padding-left : 15px;
}class Voila {
public:
// Voila
static const string VOILA = "Voila";
// will not interfere with embedded tags.
}