プログラムのソースコードをブログで表示する設定が10秒で終わった件

SNSやってます。

一体先日の苦労はなんだったのか、よくよく調べると、私の使っているワードプレステーマSimplicity2にはソースコードを簡単にのせることができる設定がすでに実装済だと本日わかりました。

こんにちはSPF36.comのダイ(@daijirok_jp)です。

私のブログにプログラムのソースコードを載せる方法として先日GitHubのGistWordPressのプラグインJavascript等を検討しました↓

Babylinkの改変が完了したのでコードをブログに載せたい
先日記事にしましたが、シンプルなアマゾンアフィリエイトリンクを張るためにワードプレステーマ作者でもある「わいひら」さんの「Babyl...

が、結論から言うと私には全て不要でした。

当時の記事のコメントでも”通りすがりのおっさん”さんから同様のコメントをいただきました。ありがとうございました。

プログラムのソースコードをワードプレスに載せる方法(Simplicityの場合)

結果は非常に簡単でした。

Simplicity2でコードを表示するには、

  1. ワードプレスにログイン
  2. ワードプレスの管理メニューを選択
  3. カスタマイズを選択
  4. ソースコードを選択
  5. ソースコードをハイライト表示preタグで囲まれたソースコードをハイライト表示、にチェック。
  6. 保存して公開を選択
  7. <pre>と</pre>というタグでコードを囲む

たった、これだけでした。

これによりhighlight.jsというjavascriptと利用できる様な仕様になっているそうです。

ワードプレスのテーマSimplicity2を使っていない方は基本的に利用できないかもしれませんが、もしかしたらお使いのテーマにもコード表記が簡単にできる機能が初めから備わっているかもしれません。

という事で、プラグインや他サービスの埋め込みを使う前にテーマ開発者や開発会社のページでソースコード表示の機能がないかを確認されることをお勧めします。

実際に表示するとこんな感じです。↓

.babylink-box{
overflow: hidden !important;
font-size: small !important;
zoom: 1 !important;
margin: 15px 0 !important;
text-align: left !important;
}

ただしHTMLの場合は<pre>タグで囲ってもHTMLを出力してしまうので、HTMLを一度エスケープする(”<”というマークは”&lt;”という記号にする)必要があります。

ワードプレス内蔵のエディタであればビジュアルエディタのところにHTMLコードを入りつけてテキストエディタでみるとエスケープしたデータに変わっていますので、そのコードの始めに<pre>、最後に</pre>を追加してあげるだけです。

こちら↓はHTMLを表示して見た所です。Simplycity2素晴らしいです。最高です^^

<div class="babylink-box" style="overflow: hidden; font-size: small; zoom: 1; margin: 15px 0; text-align: left;">
   <div class="babylink-image" style="float: left; margin: 0px 15px 10px 0px; width: 75px; height: 75px; text-align: center;">
      <a href="http://www.amazon.co.jp/exec/obidos/ASIN/アフィリエイトID/" rel="nofollow" target="_blank">
         <img style="border-top: medium none; border-right: medium none; border-bottom: medium none; border-left: medium none;" src="https://Hogehoge.jpg"/>
      </a>
   </div>
   <div class="babylink-info" style="overflow: hidden; zoom: 1; line-height: 120%;">
      <div class="babylink-title" style="margin-bottom: 2px; line-height: 120%;">本のタイトル
      </div>
   </div>
</div>

↑ 長いコードも右にスクロールできます。ただ、行番号が入らないという所だけが欠点かと思います。

また<pre>で囲むだけでも言語を自動判別して適切なハイライトをしてくれますが、念のため<pre class=”html”> hoge hoge </pre>というふうにclassで言語を指定しておくと意図したハイライトをつける事ができます。

SImplycity2をお使いであれば詳しくは公式サイトに詳しくやり方が載っています。↓

Simplicity2.1.6からプラグインを使用せずとも、ソースコードをハイライト表示出来るようになりました。ソースコードのハイライト表示には、jQueryプラグインのhighlight.jsを利用しています。ハイライト機能追加は、以前か

をご覧いただければと思います。