色をつける＝シンタックスハイライトのことです。
ティラノスクリプトのサンプルゲーム冒頭に出てくるタグを入れてみました。
色がつくとこんな感じ
サンプルのシナリオ冒頭を<pre><code>で囲むとこうなる。
;ティラノスクリプトサンプルゲーム
*start
[cm]
[clearfix]
[start_keyconfig]
[bg storage="room.jpg" time=100]
;メニューボタンの表示
@showmenubutton
;メッセージウィンドウの設定
[position layer="message0" left=160 top=500 width=1000 height=200 page="fore" visible=true]かえって見づらい？
@で始めるタグの色が思った通りにつかなくて難しい。
全体的にパラメータが多いので落ち着いた色が合いそう。この色テーマはPrism.jsのTOMORROW NIGHTです。
clikeを拡張して、ティラノスクリプトのタグとパラメータをkeywordに追加するだけでもいい感じに見えます。このページで使っているのはコピペとぐぐった正規表現を継ぎ接ぎしたものですけど。
Prism.jsについて
Prism.jsは様々な言語に対応しているシンタックスハイライターです。このブログで使った限りでは重い感じはないです。
行番号、行の色変えなど機能ごとにファイルが分割されていて、必要なものだけ利用することができます。
jsDelivrからCDNを利用すると複数のファイルをまとめて取得できます。このブログでは記事のラベルによって読み込むjsファイルを変えたりしています。
公式テーマ以外にユーザーが配布しているテーマを追加することもできます。公式テーマちょっと癖が強く見えるので。CSSだけ自作してもいいかも。
おわりに
Web用にいい感じのハイライターが欲しいです。
ティラノスクリプト公式の機能デモの下画面も微妙に色がついているけど、何を使っているんだろう。
追記（2022-06-25）
prism-tyranoscript.js（制作者：ogihara88saiさん）
(https://ogihara88sai.github.io/prism-tyranoscript/)
ティラノスクリプトのためのWeb用シンタックスハイライターが登場しました。しかもPrism.js用の拡張ファイルとして。制作者はティラノスクリプトの共同開発者の方。きれいでとても見やすいです。