他の人たちのブログとか見てて、コードを表示する時にかっこよく表示されているのを見て、自分もやってみたいと思った。
で、ググって色々と調べてBloggerでコードを行番号つきで表示する簡単な方法をメモします。
1.まず、ThemeをHTMLでカスタマイズします。
2.↓のコードを<head>と</head>の間に入れてSaveします。私は<head>の次の行に入れました。
<!-- Google-code-prettify -->
<script src='https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js'/>
<!-- /Google-code-prettify -->
<style>
pre.prettyprint ol.linenums > li {
list-style-type: decimal;
}
</style>
<style>
pre.prettyprint ol{
overflow: auto;
white-space: pre;
}
</style>
3.そして、ブログを投稿編集時にHTMLで編集するようにして、↓のコードを入れます。
<pre class="prettyprint linenums">
test code
test code2
test code3
</pre>
あら不思議、以下のような表示になりました。
test code test code2 test code3
↓来て頂きありがとうございます。クリックしていただくと、励みになります。↓

にほんブログ村

にほんブログ村
No comments:
Post a Comment