<>

【SublimeText】テキストの背景色と コードの 文字色を変えるシンタックス設定

SublimeText をインストールした直後のテキストは 黒い背景に白文字のシンプルな状態です。

この文字 ( コード ) に色を付けて表示させるために シンタックス の設定と カラースキーマ のテーマ設定を行います。

シンタックスの設定で コードに色を付ける

インストール直後のテキストはこんな感じで ある意味モノクロ感がカッコいいですが
文字に色を付けることでコードが分かりやすくなります。

メニューバーから 表示 をクリックすると 画面の 表示に関する設定項目が ずらっと表示されます!!

Sublime-Text-カラー表示の設定画面-変更前

シンタックスという項目にカーソルを合わせると、またまた ずらっと
今度は プログラミング言語が表示されます。

たくさんのプログラミング言語がありますが、私たちが主に使用するのは CSS や HTML です。
今回は CSS を 選択していきます。

これで、文字に色を付けることができました。

カラースキーマで テキストの背景を選択する

カラースキーマの設定は メニューバーの 基本設定を開きます。

カラースキーマ設定のしかたの画面

カラースキーマを選択し テキストのテーマデザインを選択できます。
カラースキーマ-設定画面
こちらの 5種類のテーマがありますが、
一般的に知られている SublimeTextのテーマは Monokai ですので、デフォルトではMonokai になっているはず。

他のデザインを みてみます。

Breakers
カラースキーマ-Breakers のイメージ画面

Celeste
カラースキーマ-Celeste のイメージ画面

Mariana
カラースキーマ-Mariana のイメージ画面

Monokai
カラースキーマ-Monokai のイメージ画面

Sixteen
カラースキーマ-Sixteen のイメージ画面

まとめ

セレクタ や プロパティごとに 細かく色分けされているのは Monokai と Sixteen ですね。
初心者向けとしては このどちらかが見やすいのではないでしょうか?

スキームテーマによって 背景や コードごとの文字色が設定されますが
選択するプログラミング言語によっても 文字色が変化するので よく使用する言語で確認してみてください。

もっとこだわりたい場合は SublimeText のプラグインを利用して
スキームテーマを 変更することも出来るので また改めてご案内できればと思っています。