Bracketsで行間(line-height)を変更する方法

Bracketsで行間(line-height)を変更する方法

僕が知らないだけな可能性もありますが、Bracketsではフォントサイズやフォントファミリーを変更することは「表示 > テーマ」から設定可能ですが、行間を設定できる項目が見当たりません。デフォルトがあからさまに見辛いということでもないのですが、エディタ内の行間を変更する方法を見かけて変更してみたので備忘録です。

※ここで紹介している方法はインストールして使用するテーマでの変更方法になり、デフォルトテーマで変更する方法ではありません。
もし、これをご覧になった方でもっと適した方法を知っているとかデフォルトテーマの変更方法を知っている方いれば是非教えてください。

※テーマの適用方法などについては割愛します。

line-height変更前とline-height変更後

Bracketsで行間を変更するには、まず「ヘルプ」内にある「拡張機能のフォルダーを開く」を選択します。
選択するとウィンドウが表示されるので、次に「user」内にある使用テーマのフォルダを開きます。
拡張機能のファイルなども入っているので人によってはここで沢山のフォルダが表示されると思いますが、その中から自分が行間を変更したいテーマのフォルダを選択します。
ちなみに僕は「Monokai Dark Soda」というテーマを普段使用しており、同じテーマを使用しているという場合は「rain.monokai-dark-soda」というフォルダがそれにあたりますので、そちらを選択してください。

テーマによって中身は多少違いがありますが、テーマファイルを開くとpackage.jsonとテーマ用のCSSが入っています。
僕が使用している「Monokai Dark Soda」の場合は、テーマ用CSSは「main.min.css」となっているのでそちらを変更するのですが、テーマによっては別の名前・非圧縮・lessになっていたりもします。
あとは、該当のCSSを開いて以下のように.CodeMirrorというクラスに対して任意の値でline-height記述して保存をします。

.CodeMirror {
	line-height: 1.4;
}

問題なければ保存した瞬間現在開いているCSSの行間が変更され、他のファイルを開いた際でも変更できるのを確認できます。

ちなみに、例えば同じく.CodeMirrorに対してfont-weight: bold;を記述すると文字を太字表示にできたり、letter-spacingを使って文字間隔の変更を行ったりと、ここを編集することでいろいろとオリジナルな見栄えにすることができます。
他にもいろいろやってみたい時は「デバッグ > 開発者ツールを表示」で表示されるツールを使用すればそれぞれどのようなクラスになっているのかなど確認もできるので、テーマのカスタマイズに興味ある人やより自分好みにしたい人は試してみてください。
ただ、意図しない場所が変更されてしまうという可能性ももちろんありますので、もし大きく変更する場合は定期的にバックアップをとるなどした方がいいと思います。(手っ取り早く元に戻したい時は単純に再インストールするのが早いです)

ここで紹介した内容は以下を参考にさせてもらい、「すたらブログ」さんでは「Monokai」のテーマを変更する形で紹介されています。

Back to Top

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。