[JavaScript] プログラムコードを表示する為のプログラム

2015年3月20日

Javascript プログラミング

WordPressでは、プラグインで「crayon」とか他にもたくさんコード表示のツールがあるが、とりあえず、自作framework用として、作ってみることにしました。

要件定義

HTMLソース内で、プログラムソースを表示する際に、見やすくしたい。 行番号を表示したい。 ソースのコピペを便利にしたい。

ソースコード

(function(){ var $$ = {}; $$.data = { name:'code', class_name:'source_view' }; //onload後起動処理 $$.set = function(){ $$.check(); $$.css(); }; //DOM構造設定 $$.check = function(){ var code = document.getElementsByName($$.data.name); for(var i=0;i<code.length;i++){ //preタグのみ対象とする if(code[i].tagName!="PRE"){continue} //preタグにclass名を設定 code[i].className+= " " + $$.data.class_name; //中身をリストタグに置き換える //var prg = code[i].innerText.split("\n"); var prg = code[i].innerHTML.split("\n"); //書き換えようhtml作成 var html = ""; html+= "<ol class='"+$$.data.class_name+"'>"; for(var j=0;j<prg.length;j++){ prg[j] = prg[j].split("\r").join(""); //最終行処理(改行とスペースを除外してnullの場合は処理無し) if(j==prg.length-1){ var txt = prg[j]; txt = txt.split(" ").join(""); txt = txt.split("\t").join(""); if(txt==""){continue} } html+="<li class='"+$$.data.class_name+"'>"+prg[j]+"</li>"; } html+="</ol>"; //ソースの中身書き換え code[i].innerHTML = html; } }; //スタイル追加 $$.css = function(){ var head = document.getElementsByTagName("head"); if(head[0].getElementsByClassName($$.data.class_name).length){return} var style="<style type='text/css' class='"+$$.data.class_name+"'>"; style+= 'pre.'+$$.data.class_name+'{'; style+= 'margin:4px;'; style+= 'padding:0;'; style+= 'background-color:#DDD;'; style+= 'overflow:auto;'; style+= 'max-height:200px;'; style+= '}'; style+= 'pre.'+$$.data.class_name+' ol.'+$$.data.class_name+'{'; style+= 'list-style: decimal;'; style+= 'margin: 0px 0px 0px 40px;'; style+= 'background-color:white;'; style+= 'padding:0;'; style+= 'color:#5c5c5c;'; style+= 'font-family: "Consolas", "Courier New", Courier, mono, serif;'; style+= 'font-size: 12px;'; style+= '}'; style+= 'pre.'+$$.data.class_name+' li.'+$$.data.class_name+'{'; style+= 'background-color: #FFF;'; style+= 'color: inherit;'; style+= 'list-style: decimal-leading-zero;'; style+= 'list-style-position: outside;'; style+= 'border-left: 3px solid #888;'; style+= 'padding: 0 3px 0 10px;'; style+= 'line-height: 20px;'; style+= 'white-space:pre-wrap;'; style+= 'word-break: break-all;'; style+= '}'; style+= 'pre.'+$$.data.class_name+' li.'+$$.data.class_name+':nth-child(2n+0){'; style+= 'background-color: #EEE;'; style+= '}'; style+= 'pre.'+$$.data.class_name+' li.'+$$.data.class_name+':hover{'; style+= 'background-color: #DDF;'; style+= '}'; style+= '</style>'; head[0].innerHTML += style; }; $$.lib = { eventAdd:function(t, m, f){ //other Browser if (t.addEventListener){ t.addEventListener(m, f, false); } //IE else{ if(m=='load'){ var d = document.body; if(typeof(d)!='undefined'){d = window;} if((typeof(onload)!='undefined' && typeof(d.onload)!='undefined' && onload == d.onload) || typeof(eval(onload))=='object'){ t.attachEvent('on' + m, function() { f.call(t , window.event); }); } else{ f.call(t, window.event); } } else{ t.attachEvent('on' + m, function() { f.call(t , window.event); }); } } }, urlProperty:function(url){ if(!url){return ""} var res = {}; var urls = url.split("?"); res.url = urls[0]; res.domain = urls[0].split("/")[2]; res.querys={}; if(urls[1]){ var querys = urls[1].split("&"); for(var i=0;i<querys.length;i++){ var keyValue = querys[i].split("="); if(keyValue.length!=2||keyValue[0]===""){continue} res.querys[keyValue[0]] = keyValue[1]; } } return res; } }; //onloadで実行 $$.lib.eventAdd(window,"load",$$.set); })();

使い方

1.JavaScriptタグを貼り付ける 2.ソースコードを表示させたい箇所を<pre>タグで囲む ※既にPREタグの場合はそのままでOK 3.PREタグにname属性をつける ex) <pre name="code"> これでHTMLを表示させると読み込み直後にpreタグを行数付きのコード表示にしてくれます。

GitHub

以下のURLにアップしておきました。 https://github.com/yugeta/codeView

issue

1.プログラムの行について、画面幅に応じて改行されます。  改行なしモードは、構成を変える必要があるので、現時点ではできません。 2.syntax判定モードはありません。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。