ブログ記事にソースコードを載せる方法　blogger編

ブログ記事でHTMLのタグの見本を記事に載せたい時、綺麗に記載する方法を調べました。

HMLタグをブログ記事に記載する方法

HTMLの編集

</head> の上に下記のコードを貼り付けます。

 <!-- ex-code-prettify 追加 -->
<link href='https://cyokodog.github.io/jquery.ex-code-prettify/jquery.ex-code-prettify.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>
<script src='https://cyokodog.github.io/jquery.ex-code-prettify/google-code-prettify/prettify.js'/>
<script src='https://cyokodog.github.io/jquery.ex-code-prettify/jquery.ex-code-prettify.js'/>
<style type="text/css">
.prettyprint.linenums {
 box-shadow: 32px 0 0 #f0f0f0 inset, 36px 0 0 #eee inset;
 overflow: auto; /* 横スクロールバーON */
}
pre.ex-code-prettify ol.linenums{
 margin-left:0px;
 padding-left:40px; /* 行番号領域-8px */
}
pre.ex-code-prettify ol.linenums li{
 margin-left:0px;
 color: #bebec5;
 line-height: 10px;  /* 行間-8px */
 text-shadow: 0 1px 0 #fff;
}
.ex-code-prettify-contents{
 border:solid 1px #aaa; /* 罫巻色変更 */
 border-radius:10px; /* 罫巻角丸量+6px */
 word-wrap: break-word;
 overflow: auto;
}
</style>
<script>
$(function(){
    $('.code').exCodePrettify({tabToSpace:true,rawLabel : '全選択'});
});
</script> 

以上で終了です。

記事内にソースコードを記載する方法

ブログ記事を編集するときに、「HTML」編集画面で、 コードを貼り付けたい場所で 以下のタグを使います。

 <pre class="code" data-ex-code-prettify-param="{codeType:''}"> 書きたいコード </pre> 

「書きたいコード」の所に書きたいコードを貼り付けるのですが、そのまま貼り付けるだけだとうまく表示されません。

ブログ記事にコードを記載する場合、
「<」を「&lt;」に。
「>」を「&gt;」に書き換える必要があります。

書き換える方法としては、辞書登録に登録するか、 自動で置換出来る便利なサイトで変換するかになるかなと思います。

私はこちらのサイトを利用しています。 とても便利です(⁎˃ᴗ˂⁎)


参考サイト様
もっと詳しく書かれています！