sublime textでコードに色がつかない!【解決方法】

sublime textでコードに色がつかない!【解決方法】

解決したい現象

sublime textでhtmlやPHPのコーディングをしていて、
ソースコードの色がつかず、すごく見づらい!

ということがあると思います。

以下のような状態です。

それを以下のように、色がついて見やすくする方法を説明します。

ちなみに、テキストエディタでソースコードに色がつくことを
「シンタックスハイライト」と言います。

誰かに状況を説明する時や、検索する時に
「ソースコードに色がつきません。」と言うのはちょっとカッコ悪いうえに、伝わりにくいです。
「シンタックスハイライトがつきません。」と言う方が伝わりやすいので、これを機に覚えましょう。

sublime textでコードにシンタックスハイライト(色)がつかない場合

まずは以下の状態のソースを例にしてみましょう。

 

この状態で、以下のコマンドを打ちましょう。

windowsの場合 : [ctrl] + [shift] + [P]
macの場合 : [command] + [shift] + [P]

 

すると、以下のように文字を入力できるウインドウが開きます。

 

このウインドウに、「html」と入力しましょう。
すると、以下のように、「Set Syntax: HTML」と表示されるので、それを選択します。

 

これで色がついたはずです。

ちなみに、「Set Syntax」というのは、
Syntax(シンタックス) = 文法
という意味なので、
「文法を設定する」という意味です。
シンタックスという言葉は、プログラミングなどでちょくちょく出てくる言葉なので、
覚えておくといいでしょう。

なぜこの現象が起こるのか

解決できたのはいいですが、なぜこういったことが起こるのでしょうか?
原因としては、「sublime textが、今書かれているコードの言語がわからないから」なのですが、
なぜ書かれている言語がわからないのでしょうか?(厳しい言い方)

それは、編集しているファイルの「拡張子」の問題である場合が多いです。
たとえば、「hogehoge.txt」というファイル名でhtmlを書いても、
拡張子から、ただのテキストファイルと判断しているので、シンタックスハイライトはつきません。

なので、解決策としては、先ほど紹介したSet Syntaxを指定するか、
正しい拡張子でファイルを保存する保存する方法があります。

まとめ

Set Syntaxは、単純で初歩的なもののように感じますが、
けっこうよく使います。

例えば、ファイルの拡張子はhtmlだけど、
PHPの記述をしている場合などは
そのまま編集しようとすると、PHPの記述部分にシンタックスハイライトがつきません。
そういった場面で、「Set Syntax: PHP」と指定することがあります。

シンタックスハイライトがついている状態と、ついていない状態では、
ソースコードの読みやすさに歴然とした差が出ますし、
何よりも、文法の指定が正しくされていないと、
Emmetなどのショートカットキーが効かないという弊害もおきますので、
しょぼい問題のようんで、意外と重要な部分になります。

ぜひ、覚えておきましょう。