●ウェブページのソースに色を付ける(prettyprint)
最近のエディタでは、ソースコードのキーワードを自動的に色分けして見やすくしてくれています。
ウェブページにも沢山のソースコードが掲載されています。
このウェブページにも多くのソースコードを掲載していますが、特に色分けをしていなかったのですが、googleが提供している「google-code-prettify」というJavascript＆CSSのパッケージを利用すると、簡単にウェブページのソースを色分けしてくれます。
ウェブページにも沢山のソースコードが掲載されています。
このウェブページにも多くのソースコードを掲載していますが、特に色分けをしていなかったのですが、googleが提供している「google-code-prettify」というJavascript＆CSSのパッケージを利用すると、簡単にウェブページのソースを色分けしてくれます。
--
使い方は簡単。
■準備
まず、google-code-prettifyのページから、JavascriptとCSSをダウンロードし、自分のサーバーの適当なパスに保存します。
ソースのheadブロックに以下の記述を追加。
<link href="/css/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/js/prettify.js"></script>
ソースのbodyブロックに以下の記述を追加。
<body onload="prettyPrint()">
自分のCSSファイルに以下の記述を追加。
特に必要ありませんが、white-space部分がないと、自動改行されないので、ソースに長い行が含まれると、右側のサイドバーが下に落ちてしまう（特にIE6で）ので、入れておいたほうがよいでしょう。
なくても、他のブラウザでは、単にはみ出すだけです。
.entry pre {
margin: 15px 20px 0 20px;
padding: 10px;
border: 1px solid #666666;
background: white;
color: black;
font-size: small;
line-height: 150%;
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3 */
word-wrap: break-word; /* IE 5.5+ */
}
ここまでできたら、掲載したいソースコードを
<pre class="prettyprint"></pre>
の間に挟みこむだけです。
当然のことながら、<>などは、事前に変換しておく必要があります。
このブログエンジンのSBだと、変換ボタンが用意されているので、ラクチンです。
■実例
比較的、控えめな色付けなので、落ち着いてますね。
カラーの配色を変更する場合は、CSSを書き換えるだけでOKです。多分。
色が付いて、ちょっとだけ華やかになったかな。
ネタ元：ハイライトもGoogle流 - "google-code-prettify"でソースコードに色付けを
--
使い方は簡単。
■準備
まず、google-code-prettifyのページから、JavascriptとCSSをダウンロードし、自分のサーバーの適当なパスに保存します。
ソースのheadブロックに以下の記述を追加。
<link href="/css/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/js/prettify.js"></script>
ソースのbodyブロックに以下の記述を追加。
<body onload="prettyPrint()">
自分のCSSファイルに以下の記述を追加。
特に必要ありませんが、white-space部分がないと、自動改行されないので、ソースに長い行が含まれると、右側のサイドバーが下に落ちてしまう（特にIE6で）ので、入れておいたほうがよいでしょう。
なくても、他のブラウザでは、単にはみ出すだけです。
.entry pre {
margin: 15px 20px 0 20px;
padding: 10px;
border: 1px solid #666666;
background: white;
color: black;
font-size: small;
line-height: 150%;
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3 */
word-wrap: break-word; /* IE 5.5+ */
}
ここまでできたら、掲載したいソースコードを
<pre class="prettyprint"></pre>
の間に挟みこむだけです。
当然のことながら、<>などは、事前に変換しておく必要があります。
このブログエンジンのSBだと、変換ボタンが用意されているので、ラクチンです。
■実例
int main(void) {
char* pstr = "Hello,World\n";
printf(pstr);
}
function func() {
var genre = "Blended";
var len = document.F1.radio1.length;
var n;
for(n=0;n<len;n++)
{
if( document.F1.radio1[n].checked == true ) {
genre = document.F1.radio1[n].value;
break;
}
}
}
比較的、控えめな色付けなので、落ち着いてますね。
カラーの配色を変更する場合は、CSSを書き換えるだけでOKです。多分。
色が付いて、ちょっとだけ華やかになったかな。
ネタ元：ハイライトもGoogle流 - "google-code-prettify"でソースコードに色付けを
--
Comments
コメント入力は停止しています
海外からと思われるコメントスパムが横行しているため、全記事のコメント入力を停止しています。メッセージのある方は、ホームページの一番下に連絡欄がありますので、そちらからお願いします。