ブログを書いていて、とてもやりたいことの一つに、ブログで作成したコードの一部とかを公開することでした。自分でプログラム作成をするときに参考にするサイトでも、コードのところだけ別の枠に囲まれていて、色やら行数やらついていたりして、カッコイイじゃん！俺もやりてーなー！とずっと思ってはいたのですが、なかなかそこまでに至りませんでした。
で、ちょっと手が空いたときに調べてやってみたのですが、最初はよく分からなくてうまくできなかったのですが、きちんと時間をとって調べてみると、意外と簡単だったりしました。ということで、このブログにも仕込んで見ました。
ちなみに、ブログでプログラムコードのところが↓こんな風になるのを、シンタックスハイライトというらしいです。
これはブログに限った話ではなく、コードを色付けしたりして読みやすくする、というのがメインの目的です。まぁ私のブログ文字多めなんで、これにコードを入れたらもっと文字多くなっちゃって大変ですがねぇ。 それはともかく。 使い方は他のサイトを参考にしていただくとして(現時点で一番参考になったのはこのサイト。日本語で説明されていることもありますが、元のサイトのリンクも入れてくれていたのは助かりました。感謝いたします)、導入の要点をまとめておきます。
で、ちょっと手が空いたときに調べてやってみたのですが、最初はよく分からなくてうまくできなかったのですが、きちんと時間をとって調べてみると、意外と簡単だったりしました。ということで、このブログにも仕込んで見ました。
ちなみに、ブログでプログラムコードのところが↓こんな風になるのを、シンタックスハイライトというらしいです。
<!DOCTYPE HTML>
<html>
<head>
<title>Online or offline?</title>
<script>
function update(online) {
document.getElementById('status').textContent =
online ? 'Online' : 'Offline';
}
</script>
</head>
<body ononline="update(true)"
onoffline="update(false)"
onload="update(navigator.onLine)">
<p>You are: <span id="status">(Unknown)</span></p>
</body>
</html>
(w3cのサイトからコピペしてきましたごめんなさい)これはブログに限った話ではなく、コードを色付けしたりして読みやすくする、というのがメインの目的です。まぁ私のブログ文字多めなんで、これにコードを入れたらもっと文字多くなっちゃって大変ですがねぇ。 それはともかく。 使い方は他のサイトを参考にしていただくとして(現時点で一番参考になったのはこのサイト。日本語で説明されていることもありますが、元のサイトのリンクも入れてくれていたのは助かりました。感謝いたします)、導入の要点をまとめておきます。
- 下準備としてスクリプトのリンクを追加しておくこと。参考リンクでは<head>セクションの一番最後(もちろん</head>タグの直前ですよ)に追加、とありますが、これは昔ながらのお約束ですが、近頃(少なくとも2015年の時点)では<body>セクションの一番最後(</body>の直前)に仕込むのが流行りらしいです(速度向上とか)。このサイトでは流行りに負けて<body>セクションの最後に記載してみました。
- 実際に使う場合、コードを<pre>タグで囲むだけでよいみたいです(参考にしたサイトは情報が古めだったので、実際に元サイトに行ってみるとそう書いてある)。
使い方例：
<pre class='brush: ○○; html-script: true;'> コードの内容 </pre>
上記例の「class=brush:○○」のところに使っているコードの名前をここを参考にして記入します。もしhtmlの中のスクリプトだということであればその次の「html-script」項目をTrueにすればよいはずです。 - ただし、<pre>タグに囲まれたコードの中で、一部エスケープ文字を使用する必要があります。各言語で異なると思いますが、上記の例で言えば、HTML(XML)の場合は(少なくとも)行頭の「<」はエスケープ文字(「<」)に直しておく必要があります。そうしないと表示が崩れます。 ＃本当は「>(>)」もやらなきゃいけないみたいですが、 ＃Bloggerでは行頭を直したら行末は勝手に修正が入ってしまいましたとさ。
ちなみに、これは私が使っているBloggerの場合ですが、おそらく他のブログサイトでも同様でしょう。ちなみに、スクリプトリンクの追加は(Bloggerの場合)テンプレートのHTMLファイルをいじる必要があります。まぁコードを載せようなんて人は「その筋」の人たちでしょうから、元のHTMLファイルを壊す、ということもないと思いますが(笑)。
まだ使い方があまりわかっていませんが(つか元サイトがあまりにも説明少なすぎる気が)色々と調べてみて、わかってきたらまとめて解説してみようかな、と思っています。
まだ使い方があまりわかっていませんが(つか元サイトがあまりにも説明少なすぎる気が)色々と調べてみて、わかってきたらまとめて解説してみようかな、と思っています。
