HiFiWidow: Bloggerでコードを行番号付きで表示する方法

他の人たちのブログとか見てて、コードを表示する時にかっこよく表示されているのを見て、自分もやってみたいと思った。

で、ググって色々と調べてBloggerでコードを行番号つきで表示する簡単な方法をメモします。

１．まず、ThemeをHTMLでカスタマイズします。

２．↓のコードを<head>と</head>の間に入れてSaveします。私は<head>の次の行に入れました。

<style>

pre.prettyprint ol.linenums > li {

list-style-type: decimal;

}

</style>

<style>

pre.prettyprint ol{

overflow: auto;

white-space: pre;

}

</style>

３．そして、ブログを投稿編集時にHTMLで編集するようにして、↓のコードを入れます。

test code

test code2

test code3

</pre>

４．投稿を公開またはプレビューでチェック。

あら不思議、以下のような表示になりました。

 
test code
test code2
test code3

↓来て頂きありがとうございます。クリックしていただくと、励みになります。↓

HiFiWidow