<>

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

SublimeText をインストール直後はテキスト画面が 黒い背景に白文字のシンプルな状態ですので
コードごとに色分けされるよう設定していきたいと思います。

色分け " シンタックス “の設定の他に 背景色 “カラースキーマ" の設定によって
文字色にも変化があるので シンタックスとカラースキーマ、合わせて設定してみます。

Sublime Text

Sublime TextはWebサイトを運営していく中でかなり役立つテキストエディタです。の

インストールや 日本語変換の作業が済んでいない方は初めにこちらの記事を参考に各設定を行ってください。
テキストエディタ【 SublimeText 】のインストールのしかた
SublimeText のエディタ画面表示を 日本語に変換する方法

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

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

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

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

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

たくさんのプログラミング言語の中から 使用する言語を選択します。

今回選択した CSS はWebサイトのカスタマイズなどに使用する言語です。

CSSでは 細かくコードが色分けされていて 初心者にはとても分かりやすい表示になりました。

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

カラースキーマの設定はメニューバーから 基本設定の項目のカラースキーマを選択します。
テキストのテーマデザインは「Breakers」「Celeste」「Mariana」「Monokai」「Sixteen」の5種類です。

シンタックスで CSSを選択した状態でカラースキーマのテーマは " Monokai " になっています。

他のデザインはこんな感じです。
カラースキーマ-5つのテーマイメージ-Breakers-Celeste-Mariana-Monokai-Sixteen

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