Bloggerにソースコードを載せる(JavaScript/HTML)



ソースコードとは

枠に囲まれたこういうの。
Bloggerに載せるには、ガジェットで「Google Code Prettifyを使うよ」設定し、投稿でタグ囲みします。

ガジェットでソースコード用ライブラリを設定する

1. Blogger管理画面で左メニュー「レイアウト」をクリック。

2. 右側「Sidebar(Item Page)」の「ガジェットを追加」をクリック。

3. 「ガジェットを追加」が表示されます。「HTML/JavaScript」をクリック。


4. 「HTML/JavaScript」が表示されます。タイトルは例「コード用js」と入れます。

コンテンツ「Google Code Prettify」読み込みコードを入れて「保存」。
<script skin="sunburst" src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

5. ガジェットに「コード用js」が表示されます。画面の右下「保存」クリック。



ここまでしたら、投稿でソースコードを載せられます。

投稿では「<pre class="prettyprint">~~</pre>」箇所が、ソースコードとして表示されます。
<pre class="prettyprint">ここにソースコードを書いてちょ</pre>

表示されない?文字として入れる方法

1. 画面の左上「編集」から「HTMLビュー」を開きます。

2. ソースコードを載せたい箇所に、適当な文字列を入れて保存。
<pre class="prettyprint">適当な文字列</pre>

3. 「編集」から「作成ビュー」に切替、文字列を書き換えます。
※「作成ビュー」では文字列にしか見えません。
<pre class="prettyprint">換わるんだろうか‥‥</pre>

4. 書き換わったか「プレビュー」で確認。表示されるようになりました。



こんな感じです。