増子良太のブログです

増子良太が書いているブログです。テーマをしぼらず、思いついたものをただひたすら書いていきます。

Bloggerでのソースコードの表示をかっこ良くする

      2013/06/28

こんばんわ!rmascoです。

2012年3月9日追記:テキストエリア内のソースコードをコピペしてもダメみたいなので、削除しました。

ソースコードの表示が見づらい

このブログに記事を書いていて、
ソースコードをもう少し見やすくできないかなと、
思っていましたが対策もしないまま、いままでやっていました。

よくブログで見るこんな形でソースコードが見れるやつ、かっこいいですよね。

見る方もview plainとか押せばソースが取得できるので、コピーして貼りつけてテストとか、
すごくしやすい。こうしたい!!こうしたい!!

・・・で、ちょっと時間があったので、調べてみたらできました!
色々なやり方があり、私のやり方が間違えているのか、
うまくいかない方法などもあったので、
私ができたやり方を載せておきます。

ソースコード表示を見やすくする方法実践

まず、下記サイトにアクセスし、ファイルをダウンロードします。
FaziBear’s Blogger Widgets

ダウンロードしたファイルが「blogger.html」というそれっぽい名前!
ここで、HTMLをブラウザで開いて、
Add to Bloggerというボタンがあるみたいなんですが、
私の環境では表示されず、スクリプトがつらつらと。。。

どうしたものかと悩みましたが、ソースを読んでみたら、
あるURLに情報をPOSTするようなことが書いてあるので、
早速URLにアクセスしてみました。

http://www.blogger.com/add-widget

すると、このような画面が出てくると思います。

 

ログインしていない場合には下記のような画面が出てくるので、ログイン後にアクセスしてみてください。

ページの要素を追加という画面が出てきたら、
下記のように追加します。

ブログを選択:
追加したいブログを選択します。私の場合は1つしかないので、選択しようがありませんけども。。。

タイトル:
ウィジェットをわかりやすくするタイトルです。でもこれをつけると、ブログを表示した時に表示されてしまうので、私は空のままにしました。

コンテンツ:
HTMLソースのtextareaと書いてある部分の中身をコピーします。
下記に私がコピーした内容をはっておきます。

ウィジェットの追加ボタンを押します。
すると、Bloggerのレイアウト変更画面に飛ばされ、
ウィジェットが追加されています。

早速テストしてみましょう。
下記ソースをコピーして、Bloggerの編集画面でHTML編集モードに変換後、
貼りつけてみてください。
<pre name=”code” class=”html”>
HTMLのコード
</pre>

ちなみにコードの部分はHTMLエンコードが必要で、<は&lt;、>は&gt;と表記します。
※なぜか<code>も<pre>も動作してくれないので、&を全角にしましたが、半角です。

かなり裏技チックですが、こちらの方法でできたので、
まぁ、よしとしようかな。

ちなみに今回も参考にさせてもらったのが、kuriboさんのブログでした。
# 毎度毎度お世話になっております。

クリボウの Blogger Tips: コードをハイライトする「Blogger Syntax Highlighter」ウィジェット

ちなみにこのページにあるHTMLエンコードツールでエンコードすると、とても楽にソースを書くこともできました。
ありがとうございます!

これでバリバリソースが書けるので、
記事の更新頻度も上がる!・・・はず。

 - wordpress