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. 書き換わったか「プレビュー」で確認。表示されるようになりました。

こんな感じです。