投稿者 tel | 2014年1月24日

BracketsでGLSLを色分け表示する

BracketsでHTMLに書いたGLSLをシンタックスハイライトできたのでメモ。

WebGLとか書く場合に、次のようにして頂点シェーダとフラグメントシェーダをHTMLファイル内に書くけど、Bracketsで色分け表示されてなかったのでできるようにした。

<script id="shader-fs" type="x-shader/x-fragment"><script>
 

こんなふうになる。

brackets_glsl_ss

導入方法

Bracketsの拡張機能マネージャで以下のURLを入力してインストール。

https://github.com/sapphire-al2o3/Brackets-GLSL

シンタックスハイライトの作り方

ソースを眺めてみたところGLSLのモード自体はthirdparty/CodeMirror2/mode/clike.jsの中に定義されていた。

なぜデフォルトで有効にならないかデバッガで追いながら調べてみたところ、
text/x-brackets-htmlというモードの時に内部のscriptタグで有効になるモード(javascriptはデフォルトで有効)を定義しておく必要があるみたいだった。
なのでこの設定を上書きしてx-shader/x-fragmentとx-shader/x-vertexを追加した。


コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

カテゴリー

%d人のブロガーが「いいね」をつけました。