Bracketsとは、Adobeが開発・公開している無料のテキストエディタです。Adobe CCにも"Edge Code"という名前で入っています。これを最近私は愛用しています。
Bracketsは特にWebコーディングに適したエディタとされていて、すごいのはそのBrackets自体がHTML / CSS / JavaScriptで書かれているということ！さらに本体の機能はとてもシンプルで軽量なのですが、追加機能が「プラグイン」という形でたくさん作られているので、必要に応じてインストールすることでより便利にできます。当然、そのプラグインもJSとCSSで書かれているので自分で作ることもできちゃいます！
で…
最近ぼくもエディタの背景にかわいい女の子画像を表示しておきたいな～～～なんて思いはじめたんですね。
例えば"Android Studio"だと"SexyEditor"というプラグインがあって
というエントリを見つけたのでこちらを参考に自分で書いてみましたよ～というのが本題
とりあえずコード
jsは参考サイトそのまんま
/* main.js */
define(function (require, exports, module) {
var ExtensionUtils = brackets.getModule("utils/ExtensionUtils");
ExtensionUtils.loadStyleSheet(module, 'style.css');
});
cssは画像の後ろにも背景色を置きたかったので擬似要素を使いました。
/* style.css */
.CodeMirror-wrap::before {
content: '';
position: fixed;
bottom: 0;
right: 0;
width: 80%;
height: 80%;
background: url("bg.png") no-repeat right bottom;
background-size: contain;
}
.CodeMirror-scroll, .CodeMirror-linenumber, .CodeMirror-gutters {
background: rgba(51, 51, 51, .8) !important;
}
.CodeMirror-activeline-background, .CodeMirror-gutter-elt {
background: rgba(60, 63, 65, .7) !important;
}
透過で重ねてる色は、もともと使っている"Dark Soda"というテーマのCSSから該当する部分を抜き出した感じです。なので汎用性はありません。
(だったら元のそのCSSに上書きしていけばいいじゃんっていうツッコミはなしです！)
追記:ラップトップに持って行ったらどうもうまくいかない…と思っていたら、Themes for Bracketsを更新していなかっただけという。つまり今後そちらの更新でクラス名とかが変わって動かなくなる可能性もありますね…そんときはまた考えます。でもそちらも更新されているのならたぶん、直接いじるのではなくプラグインで更に上書きする意味はあるね？
それでできあがりがこんな感じ
ちなみにエラー吐き出すコンソール部分はレイヤーが下らしく、こんなんになってしまうんですがなんとなくえっちぃ感じにできるのでこのバグはfixしないことにしました。
と、まあ本題は以上です
まとめとしては
- Bracketsめっちゃいいエディタです
- プラグインが簡単につくれます
- ミクさんはエディタの背景になってもやっぱり天使
- コーディングへのモチベ上がる↑↑
夏休み、ほとんどコード書かずに環境構築かゲームしかやってきませんでしたが、この前のライブコーディングといい、プラグイン実装といい、コーディングモチベ上がってきたのでそろそろFU2スタートしそうな予感です。
