エディター（Brackets）

101 Views

Bracketsでコードを書くエリアに好きな画像を定義する場合。

main.js

define(function (require, exports, module) {
　var ExtensionUtils = brackets.getModule("utils/ExtensionUtils");
　ExtensionUtils.loadStyleSheet(module, 'style.css');
});

style.css

/* style.css */
.CodeMirror-wrap::before {
    content: '';
    position: fixed;
    bottom: 0;
    right: 0;
    width: 89.6%; /*幅を微調整して下さい*/
    height: 100%;
    background: url("background.jpg") no-repeat right;/*画像までのパス*/
    background-size: cover;
}
.CodeMirror-scroll, .CodeMirror-linenumber, .CodeMirror-gutters {
    background: rgba(51, 51, 51, .6) !important;/*色を微調整して下さい*/
}
.CodeMirror-activeline-background, .CodeMirror-gutter-elt {
    background: rgba(60, 63, 65, 1) !important;/*色を微調整して下さい*/
}

上記↑の２つのコードを書いたら、１つのフォルダーに納めて下さい。
フォルダー名は、好きなフォルダーネームで、構わないと思います。
僕は、backgroundとしています。

今度はフォルダーの中に、style.cssで定義したbackground.jpgの画像もフォルダーの中に納めて下さい。

最後に、何処にフォルダーを移動させるか？ですが。
僕は、windowsを使っているので、windowsで説明して行きます。
エクスプローラーを立ち上げたら、
１PCのアイコンをクリック
↓
２Cドライブをクリック
↓
３userもしくはユーザー、フォルダーをクリック
↓
４user nameもしくは、ユーザーネームをクリック
↓
５AppDataフォルダーをクリック※隠しファイル（フォルダー）なので、非表示を表示にしてください。
↓
６Roamingフォルダーをクリック
↓
７Bracketsフォルダーをクリック
↓
８extensionsフォルダーをクリック
↓
９userフォルダーをクリック※このuserフォルダーの中に移動して再起動すれば、OKだと思います。

ここ→