WordPressでコードをきれいに表示してみよう Google,code-prettify

昔は何でも自前で作りたい質だったので、既存のツールやサービスを使うのが悔しくて仕方がなかったのですが、歳を取ったせいか「最近はいろいろ便利なものが多いのねぇ~」と受け入れるようになりました。WordPressを使って、レンタルサーバで簡単インストールに頼っている時点でもう、便利な世の中ありがとう!と思っています。

そんなわけで、コード表示用のCSSやスクリプトくらいなら自分で用意したい気持ちもありましたが、Googleさんの「code-prettify」が軽快そうだったので、使ってみることにしました。

GitHub上にある、code-prettifyのReadMeを参照しながら、使い方を覚えたいと思います。

An embeddable script that makes source-code snippets in HTML prettier. - google/code-prettify
スポンサーリンク
AMP広告用336x280Adsense

早速サンプルを試してみる。

これは、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.
}
0