2015年9月30日水曜日

小ネタ：ブログにコードを貼り付ける

ブログを書いていて、とてもやりたいことの一つに、ブログで作成したコードの一部とかを公開することでした。自分でプログラム作成をするときに参考にするサイトでも、コードのところだけ別の枠に囲まれていて、色やら行数やらついていたりして、カッコイイじゃん！俺もやりてーなー！とずっと思ってはいたのですが、なかなかそこまでに至りませんでした。

で、ちょっと手が空いたときに調べてやってみたのですが、最初はよく分からなくてうまくできなかったのですが、きちんと時間をとって調べてみると、意外と簡単だったりしました。ということで、このブログにも仕込んで見ました。

ちなみに、ブログでプログラムコードのところが↓こんな風になるのを、シンタックスハイライトというらしいです。
<!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のサイトからコピペしてきましたごめんなさい)

これはブログに限った話ではなく、コードを色付けしたりして読みやすくする、というのがメインの目的です。まぁ私のブログ文字多めなんで、これにコードを入れたらもっと文字多くなっちゃって大変ですがねぇ。 それはともかく。 使い方は他のサイトを参考にしていただくとして(現時点で一番参考になったのはこのサイト。日本語で説明されていることもありますが、元のサイトのリンクも入れてくれていたのは助かりました。感謝いたします)、導入の要点をまとめておきます。
  1. 下準備としてスクリプトのリンクを追加しておくこと。参考リンクでは<head>セクションの一番最後(もちろん</head>タグの直前ですよ)に追加、とありますが、これは昔ながらのお約束ですが、近頃(少なくとも2015年の時点)では<body>セクションの一番最後(</body>の直前)に仕込むのが流行りらしいです(速度向上とか)。このサイトでは流行りに負けて<body>セクションの最後に記載してみました。
  2. 実際に使う場合、コードを<pre>タグで囲むだけでよいみたいです(参考にしたサイトは情報が古めだったので、実際に元サイトに行ってみるとそう書いてある)。
    使い方例：
    <pre class='brush: ○○; html-script: true;'>
コードの内容
</pre>
    上記例の「class=brush:○○」のところに使っているコードの名前をここを参考にして記入します。もしhtmlの中のスクリプトだということであればその次の「html-script」項目をTrueにすればよいはずです。
  3. ただし、<pre>タグに囲まれたコードの中で、一部エスケープ文字を使用する必要があります。各言語で異なると思いますが、上記の例で言えば、HTML(XML)の場合は(少なくとも)行頭の「<」はエスケープ文字(「&lt;」)に直しておく必要があります。そうしないと表示が崩れます。 ＃本当は「>(&gt;)」もやらなきゃいけないみたいですが、 ＃Bloggerでは行頭を直したら行末は勝手に修正が入ってしまいましたとさ。
ちなみに、これは私が使っているBloggerの場合ですが、おそらく他のブログサイトでも同様でしょう。ちなみに、スクリプトリンクの追加は(Bloggerの場合)テンプレートのHTMLファイルをいじる必要があります。まぁコードを載せようなんて人は「その筋」の人たちでしょうから、元のHTMLファイルを壊す、ということもないと思いますが(笑)。

まだ使い方があまりわかっていませんが(つか元サイトがあまりにも説明少なすぎる気が)色々と調べてみて、わかってきたらまとめて解説してみようかな、と思っています。
投稿者 時刻:
ラベル: , ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)