某イカのゲームっぽいsyntax作れそうな気がしてatomに作ったのでざっくりメモ。
基本的なドキュメントはこのへん。
https://atom.io/docs/v0.60.0/creating-a-theme
https://atom.io/docs/v1.0.2/hacking-atom-creating-a-theme
初期化編
普通なやり方
apmというのがあるので、npmと一緒でapm initみたいなことすると良いかなーと思ったけどもうちょっといいやり方あった。
cmd-shift-Pでコマンドパネル開いてPackage Generator: Generate Syntax Themeを選ぶ
これで選択した所にテンプレートができてる。
atom-templateというのがgithubに公式っぽくあがっているが、微妙にそっちは古そうだった
既存テーマをベースにするときのやり方
「このテーマ、ここだけなんとかしたい」とか「このテーマをベースにしたい」
という時は、もうちょっと違うやり方がある。
その時はざっくりこんな感じ
- githubでベースとなるやつをcloneする
- cloneしたリポジトリの名前を変えておく
- ローカルにcheckoutする
-
package.jsonのnameを変えておく- 同じ名前では多分登録できないか、上書きされてしまう気がする
-
$apm linkを実行-
$npm linkとにたようなやつ。 -
~/.atom/packages/にシンボリックリンクする
-
起動編
atom --dev . で開く。
既に先ほど作ったsyntaxがインストール済みになっているはずなので、設定からそのsyntaxを選ぶ
（これがわからず最初詰まった）
あとはlessファイルをいじるだけ！
lessいじるときの細かいテクニックとか
Pigmentsプラグインは入れるべき
色を背景に入れてくれるpluginはこれまでにもあったが
こいつはlessの変数までしっかり読み込んでくれる。
マジ便利。
lessのcolor functionは積極的に使う
このあたりの関数とか特に使える
atom --devだと簡単にelementをinspectできる
「あれ、ここの色どういうセレクタで調整するんだ？」ってなったら右クリックすると「Inspect Element」というのが増えている
chromeみたいにInspectorが開くので、どんなセレクタが有効になっているのかとかわかる。
【欄外】他のthemeをベースにする時のtips
割りとニッチな話。
今回、monokaiをベースにいじった。ベースがしっかりしているのだが、色名が変数化されてないという難点があるので、下記のどっちかをする必要があった。
- このpull reqを取り込む
- がんばって置換する
今回は後者を選んだ。「どの色をどれにあてはめる」かを後で入れ替えたかったりしたため、@pinkなどの変数名だと都合が悪かった。なので全部@color1 @color2などと変数化してあとで置き換える事にした。
atomのPackage Generatorでは、@red,@greenなどの色が最初から定数化されている。
最初はこちらを使ったが、入れ替えの調整しているうちに@redに青色が入ったりしていってわけがわからなくなってしまった。
結果として最初の開発時には番号化してしまうほうがいっそ楽だった。
登録編
だいたいnpmと一緒。
-
$apm loginする- 「APIキーを貼ってね」的なことを言われるので、貼る。
-
package.jsonのtagにあわせて$git tag登録するnpm tagみたいなのはなさそうだった。- ↑
$apm publish patchみたいなのだけでよかった
-
$apm publishする-
repositoryフィールドのurlが間違ってたり、tagが編だったりすると怒られる。
-
- atom上で確認する
結果
できました
青がやたら使いづらくて困っています。