この生成ツールでテキストに色を付ける手順

このツールは 1 文字ごと、または 1 単語ごとに、ランダムな色と 1〜7 のランダムなサイズを持つ HTML の font タグで包みます。プレビューとコードブロックは同じ文字列から作られるため、表示されているものがそのままコピー内容になります。

処理はブラウザのタブ内で完結し、アップロード・アカウント・サーバー通信はありません。生成したマークアップは HTML を受け付けるエディタ、フォーラム、テンプレートに貼り付けられます。

テキストを貼り付けるか入力します。ラテン文字、キリル文字、ギリシャ文字、アラビア文字、CJK、絵文字が使え、絵文字は複数の符号位置でできていても 1 文字として扱われます。
「文字ごとに色分け」で 1 文字ずつ、「単語ごとに色分け」で単語単位に色を付けます。単語モードでは単語間の空白もそのまま残ります。
「エフェクトを生成」を押します。黄色い枠に色付きの結果、下のブロックにマークアップが出て、「コードをコピー」でクリップボードに入ります。
「クリア」で両方を空にします。入力欄が空のときは、前回の結果を残さずに入力を促すメッセージを表示します。

生成されるマークアップの内容

1 文字あたり font タグ約 39 文字分です。60,000 文字で約 2.3 MB、単語モードで 12,000 語のとき約 516 KB になり、ブラウザでの実測は 0.5 秒と 0.16 秒でした。

コードブロックの配色は 50,000 文字までです。それより長いテキストも生成とコピーは正確に行われ、配色なしのエスケープされたテキストとして表示されます。

文字モードは読者が 1 文字として見る書記素クラスタ単位で分割します。絵文字の家族、国旗、結合文字付きの文字は分割されず 1 つのタグに収まります。

単語モードは各単語を包み、入力した空白をそのまま保ちます。連続する 2 つ目以降の空白は貼り付け先でも残るようノーブレークスペースになり、タブは 1 つの空白として扱い、改行は改行タグになります。

色とサイズは実行のたびに抽選されます。同じテキストでも毎回違うマークアップになり、隣り合う文字が同じ色になることもあります。

ページ背景とのコントラストは判定しません。明るい色は白地で、暗い色は黒地で読みにくくなります。納得できるまで再生成するか、コピーしたマークアップの 16 進値を書き換えてください。

font 要素は HTML5 では廃止されていますが、ブラウザは今も描画します。CSS を削除する古いエディタ、フォーラム、メールテンプレートでも色が残るため、この出力形式を使っています。

入力した文字は投入時にエスケープされます。山かっことアンパサンドはタグではなく文字として現れるため、マークアップを入力してもプレビューが壊れず、その文字列が色付きで表示されます。