Kasasagi’s memorandum

JavaとかProcessingとか。最近はAtcoderとか。

SublimeText3のカラースキームを作った話

こんばんは、春の応用情報を受けるのに参考書を買ってすらない、かささぎです。たぶん落ちる。。。


機械学習を試してみたいと思い、tensorflowのサンプルを動かそうとしたのですが、動きませんでした。動いたらwriteUP仕様と思っていたのですが、残念な結果になったため、今回は全く別の話をします。chainerのほうがいいのかな...


皆さんはどんなエディタを使っていますかね。vimatomemacsterapadなど、さまざまなエディタが存在しますが、僕はSublime Text3を利用しています。最初は「sublimeって崇高って意味か、かっけー」とか適当な理由で使い始めたのですが、今日では使い慣れて、とても重宝しています。前に使っていたgeditが使いづらかったのもあるかも。


そのSublimeTextで、自作したカラースキームを利用できると聞き、興味を持ったのでやってみました。今回はそれについてまとめます。

1. カラースキームの作成

 まずはカラースキームを作成します。Sublime Text内のxmlファイルを直接編集して作成することも一応可能ですが、クソ面倒くさいので、カラースキームエディタを用います。
tmtheme editorというものを利用しました。

https://tmtheme-editor.herokuapp.com/#!/editor/theme/Monokai

f:id:yh9092:20180316171641p:plain

 こちらでは、変更をリアルタイムで確認しながら、カラースキームのデータを作成し、ファイルをダウンロードできます。sublimeTextのほかに、vscodetextmateなどでも利用できるそうです。
 
 使い方を説明します。
 
 左から二番目の"general"では、エディタ全体の色について調節できます。項目を説明すると、
 
 - background  背景色
 - caret カーソルの色
 - foreground 通常の文字の色
 - invisibles なんやこれ(分かりませんでした)
 - lineHighLight カーソルがある行の左端の数字につく色
 - selection 選択した位置につく色

 という感じです。

 一番左の"scopes"では、特定の文字につける色を調節できます。
 例えば"String"をダブルクリックしてみると、

 f:id:yh9092:20180316172724p:plain

 このように表示されます。
 "scope"が範囲を示していて、今回は"String"、つまり、シングルクォーテーションやダブルクォーテーションで囲まれている文字、ということになります。
 このscopeについては、SublimeTextの公式HPで解説されています。
https://www.sublimetext.com/docs/3/scope_naming.html

 ですが、いちいち翻訳して、この色に決めてと繰り返すのはまあまあ大変です。
 なので、左上にある"Gallery"から、自分の作りたいスキームと近いものを選んで、それを変更していく感じで作っていくのをおすすめします。

 利用できるスタイルは、文字色だけでなく、背景色(通常は警告などに使われる)もあります。また、文字を太文字にしたり、イタリックにしたり、下線を引いたりすることもできます。


 画面右側では、スタイルのプレビューを見ることかできます。右下のボタンではサンプルコードの言語を切り替えることができます。また、その隣の"Customize preview code"を押すと、自分で書いたコードでスタイルの確認をすることができます。


 完成したら、緑色の"Save"と書かれたボタンを押し、隣の"Download"を押して、"tmTheme.txt"というファイルがダウンロードされれば成功です。


 私は今回、このようにしてみました。

 f:id:yh9092:20180316174045p:plain

 ごちうさカラーです。

 ごちうさの画像を、ペイントのスポイトを利用して色データを取得しながら、地道に作りました。

2. Sublime Textへ反映

 
 
 Webの参考ソースではsublime text2を使っている方が多かったため、反映するのがなかなか大変でした。

 まず、ダウンロードされたファイルのファイル名を次のように変更します。
 
 (利用したいファイル名).tmTheme

 拡張子が変更されますが、テキストエディタなどで開くことができるため問題ありません。

 次にSublime Textを開き、Preferences->Browse Packagesを開きます。

 そして、Userというフォルダを作成し、その中に先ほど作ったスキームのtmThemeファイルをぶっこみます。
 その後、Sublime Textを再起動します。

 起動したら、Preferences->Color Schemeを開き、作ったscheme名で検索して、それを押せば、完成です。

 f:id:yh9092:20180316174733p:plain
 f:id:yh9092:20180316174744p:plain

 いやーいいですね。
 文字をごちうさのタイトルの色にしたのが工夫点です。

 ちなみに実行結果

 f:id:yh9092:20180316174952p:plain

 ごちうさ三期待ってます...


 今回作ったテーマはGitHubにおいておきます。
 よかったら、自由に持ってきて、利用・改造してください。
 
 https://github.com/hiroto3432/GotiusaStyle


 それでは。