HOME

{ javascript,css,html ソースコードをハイライト表示する }

{ svg, javascript で作成したプログラム一覧 }

推奨 ブラウザ : chrome


javascript, css, html のコードをハイライト表示する関数書きました。
あまり、テストしてないです。_(:3」∠)_
以前、html タグでテキストエディタ?を作成した時に書いた関数の一部再利用です。
再利用関数をテストしてたら、不具合があったけど放置してます。
テキストに色を付けたり、ハイライトする文字をコードの中から抽出する関数は、
ほぼそのまま使用してます。
文字列の中にある、一文字、二文字と小さな文字数のハイライト処理がよくないです。
いくつか試したけど、どれもうまくいかず。
アイデアなし。。。ヽ(´ー`)ノ

javascript で作成したコードをハイライトする、この関数は、激重になりました。
ソースコードを見ると分かるのですが、ハイライトする大量の文字列を、配列に格納しています。
効率のいい、処理のやり方があるんだろうけど、とりあえず形にしてみたくて作成してみました。
ソースコードは、 テキストエリアから取得するようにしてます。
pre タグでも試したのですが、< や > を、変換する作業が必要でした。
div タグに、 myCode クラスを指定して、子要素のテキストエリアにコードを記述します。
ページ読み込みと同時に、処理が開始されます。
拡張子によって、テキストエリアの属性を設定する必要があります。
css の場合は、→ <textarea data-status="css"
html の場合は、→ <textarea data-status="html"
javascript の場合は、→ <textarea data-status="javascript"

ハイライトする対象を増やす場合は、文字列を格納した配列を増やします。
変数の h1 が HTML, c1 が CSS, j1 が JavaScript になっています。

このプログラムを作成するのに、多くの HTML タグを
javascript で書き出す作業が必要でした。
今までは、 for などを利用して、作成していたのですが、
Array 配列を利用した createEement() 関数を作成してみました。
親要素、作成する要素名、属性、テキスト情報を配列にもたせて、関数を呼び出すと、
DOM 要素が返ってきます。要素の入れ子も処理できると思います。
入れ子の場合、配列の中に配列を作ります。
第一引数に 親要素、
第二引数に、要素名、
第三引数に属性、第四引数に、その値、
以後、属性、値の繰り返し。
属性の場所に、配列、値に、空テキストで、子要素作成、
属性の場所に、テキスト、値に、配列で、 id 作成、 [...,'id', ['t', n], ...]
属性の場所に、空テキスト、値に文字列で、要素にテキスト書き出し。

上にあるコードで、ハイライトツール外観の html タグを書き出しています。
使ってみた感想は、めんどくさいです。(*‘ω‘ *)

createEement() 関数差替えました。
こちら → { 配列を利用した DOM 要素一括作成 : javascript }

数学の勉強をやり直ししてたりします。_´ω`)_