2012/02/20更新

[Tool] CSSをWebページに表示する際に色付けするJavascript

今日は、Webページにソースコードを表示するときに簡単に色付けしたい。そう思い立ち、さっそくCSSを表示する際に色付けするJavaScriptを作成しました。
あとは、ソースコードの色づけ方法を自分でも実装してみたかったということも。 jQueryPluginとすればとか、もっと奇麗な実装にすればという色々な意見を頂きましたが、今回はこんな感じ♪(´ε｀ )

http://www.yoheim.net/labo/html5/jsSample/attachColorToCSS.html

使い方

１、サイトで使っているcolorizeCSS.jsというJavaScriptファイルをダウンロードする。そして使いたいサイトにて読み込む。

２、利用したいサイトのonloadイベント時に、colorizeCSS関数を呼ぶ。引数には色付けしたいCSSを記載したタグのクラス名を指定する。

<script type="text/javascript" src="../../javascript/colorizeCSS.js"></script>
<script>
  window.addEventListener("load", function(){colorizeCSS("source_css");}, false);
</script>
<pre class="source_css">
  .jp   {font-style : italic; color : #555555; font-size : small;}
</pre>

気をつけること

１、色付け対象のCSSにコメントがある場合には上手く動作しません。

２、ソースの色づけを変えたい場合には自分でソースで色指定しているところを編集する。

３、colorizeCSSというグローバル変数を定義します。衝突したらすみません。ご自由に変数名を変えてください。

ソースコード

スースコードも記載しておきます(・∀・)

function () {
    var red = "#880000";
    var green = "#006600";
    var blue = "#000088";
    var black = "#000000";
    var elms = document.getElementsByClassName("source_css");
    for (var i = 0; i < elms.length; i++) {
      var css = elms[i].innerHTML;
      elms[i].innerHTML = "";
      while (true) {
        
        // attach color to SELECTOR.
        var index = css.search("{");
        if (index == -1) {break;}
        var selector = css.substring(0, index);
        elms[i].appendChild(createSpan(selector, green));
        elms[i].appendChild(createSpan("{"), black);
        css = css.substring(++index, css.length);
        
        // attach color to PROPERTIES and VALUES.
        index = css.search("}");
        if (index == -1) {break;}
        var contents = css.substring(0, index).split(";");
        for (var j = 0; j < (contents.length - 1); j++) {
          var strs = contents[j].split(":");
          if (strs.length == 2) {
            elms[i].appendChild(createSpan(strs[0], red));
            elms[i].appendChild(createSpan(":", black));
            elms[i].appendChild(createSpan(strs[1], blue));            
            elms[i].appendChild(createSpan(";", black));
          } else {
            elms[i].appendChild(createSpan(contents[j], black));
            elms[i].appendChild(createSpan(";", black));
          }
        }
        elms[i].appendChild(createSpan(contents[contents.length-1], "#000000"));
        elms[i].appendChild(createSpan("}", "#000000"));
        css = css.substring(++index, css.length);        
      } /*end while (true)*/
    }
  }
  var createSpan = function (str, color) {
      var span = document.createElement("span");
      span.innerHTML = str;
      span.style.color = color;
      return span;
  }

最後に

個人的に使いたいから作ったもの。もっと使いやすいように出来るような気もするけど、今はこのままにしよっと。
あと、エディタの多くはソースコードの色付けに対応しているけど、そーゆうのを実装してみたかった。
今回のは超簡単な正規表現ですが、もっともっと正規表現を自由に扱えるようになると、色付けが自由に出来るんだろうなぁ。

最後に、HTML5Learnersも宜しくお願いします。