TextHighlightDesigner

Home > IT技術・知識 > jQueryのプラグインを作りました > この記事

投稿日時：2023/10/1 12:00:00

更新日時：2023/10/1 12:00:00

このプラグインはWebサイトで表示するコードをカラーリングして表示してくれます。サンプルはこのページの下にあります。

このコードに関しては商用利用、改変、再配布など自由。変なライセンスなどもありません。ただし、このコードを使って損害が出ても作成者の僕は責任を負いません。その旨を理解し、自由にお使いください。

TextHighLightDesignerをダウンロード

使い方は簡単。下記に示す通りcodeクラスのあるcodeタグを記述して、そのタグの中にあなたの書いたコードを入れるだけ。


<code class="code">
コード
</code>

TextHighLightDesignerの機能

jsファイルにある指定された文字列を指定の色に色付けしてくれます
入れ子のカッコ(ネストされたカッコ)は10階層までカラーが変化します
CSSとjsファイルをカスタマイズしてコードをカラーリングできます

バグというか仕様というか

コードの1行目の1文字目にカッコが来るとそのカッコはカラーリングされません
タグを記入する場合は < などの記号を特殊文字「< (<の場合)」で記入しなければコードではなくタグとして認識されてしまいます
ネストされたカッコは10階層までしか対応しません。それ以上の階層があるなら、texthighlightdesigner.jsを修正してください。簡単にできます
"や'のカラーリングの数は50個しか対応していません。それ以上の場合もスクリプトを修正してください
カッコの数も50個までです。必要ならループの回数を増やしてスクリプトを修正してください

サンプルは下記。


function braces_color(str_code) {
    string str = "String";
    int color_index = 0;
    var index_array = [0, 'left'];

    for(var i = 0; i <= 50; i++)
    {
        index_array[0] = index_array[0] + 1;
        index_array = nextBraces(str_code, index_array[0]);

        if(index_array[0] != -1)
        {
            if(index_array[1] == 'left')
            {
                str_code = leftHighLightBraces(str_code, index_array[0], color_index);
                color_index++;
            }
            else if(index_array[1] == 'right')
            {
                str_code = rightHighLightBraces(str_code, index_array[0], color_index - 1);
                if(color_index != 0)
                {
                    color_index--;
                }
            }
        }
        else
        {
            break;
        }
    }
    return str_code;
}


<?php
function fee($price){
  foreach ($list as $i){
    if(($i + ( 2 * ($i) + ($i / 2)) - 100) >= 1000){
      echo "{$i}
";
    }
  }
}
?>