Bloggerの管理画面 ＞ テーマ ＞ HTMLの編集
<head>の中に1行追加するだけです
[HTMLの編集]
<head>
:
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst">
:
</head>
行末のskinでスタイルを選べます。一覧：スタイルリスト
表示を調整する
さらに横に長くなった時にスクロールバーを出す機能と長すぎるコードは縦スクロールできるようにする機能を付けました先ほど追加した部分に追記します
<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert'/>
<style type='text/css'>
pre.prettyprint {
font-size:12px;
overflow: auto;
}
pre.prettyprint.high {
overflow: auto;
height: 23em;
}
</style>
行番号を表示する
デフォルトでは行番号が5行おきに表示されるので1行ずつ表示するようにします。CSSに追記[テーマ＞カスタマイズ＞上級者向け＞CSSを追加]
[CSS追記]
li.L0, li.L1, li.L2, li.L3,
li.L5, li.L6, li.L7, li.L8 {
list-style-type: decimal !important;
}
コードハイライトの使い方
[HTML編集モード] <pre class="prettyprint [lang-XXX] [linenum] [high]"> コードを記入 </pre>
オプション引数
linenums
行番号を表示するときに指定します。linenums:[開始数字]
開始数字を指定するとその番号からカウントされます。
/*Sample.cs*/
using System;
public class Sample{
public int intvalue;
private float floatvalue;
private double doublevalue;
public bool boolvalue;
Sample(){
/* */
intvalue = 0;
floatvalue = 1.3f;
doublevalue = 2.291;
boolvalue = true;
}
public float Func1(){
float x = intvalue + floatvalue;
return x;
}
}
high
コードブロックの長さを固定して、はみ出した分のコードはスクロールで表示します。＊ 設定で追加した項目です。
using System;
public class Sample{
public int intvalue;
private float floatvalue;
private double doublevalue;
public bool boolvalue;
Sample(){
/* */
intvalue = 0;
floatvalue = 1.3f;
doublevalue = 2.291;
boolvalue = true;
}
public float Func1(){
float x = intvalue + floatvalue;
return x;
}
}
lang-[言語]
コードの言語を指定するときに使用します。これに応じてコードの解釈が変わります。デフォルトの対応言語
"bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java",
"js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml","xsl"
"bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java",
"js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml","xsl"
