Brackets - How to change Highlight Color Setting of Live Preview | ライブプレビューハイライトカラー設定変更方法




Brackets Version

Release 1.12 build 1.12.0-17621 (release d3b783b99)
build timestamp: Thu Feb 01 2018 03:32:03 GMT-0800






Before Edit / 編集前

f:id:think-design:20180318120555g:plain









Problems / 問題点
  • It's hard to see padding, margin, contents.
    / 余白・マージン・コンテンツが分かりづらい。

  • Color of padding & contents disappear soon.
    / 余白とコンテンツの色が直ぐに消えてしまう









Edit "brackets.json"


Menu - Brackets - Preferences

Add following code.
/ 下記のコードを加えます。


( But it just adds only [ , ] at only [ "brackets-css-color-preview.enabled": true ] line.
/ ただし [ "brackets-css-color-preview.enabled": true ] 行は、[ , ] を加えるだけです。 )


f:id:think-design:20180318121055p:plain




   "brackets-css-color-preview.enabled": true,
  
    "livedev.remoteHighlight": {
        
        "animateStartValue": {
            "background-color": "rgba(255, 255, 120, 0.5)"
        },        

        "animateEndValue": {
            "background-color": "rgba(255, 255, 120, 0.2)",
            "opacity": 0.5,
            "border-color": "rgba(51, 51, 51, 0.5)",
            "border-style": "solid",
            "border-width": "1px"
        },
        
        "marginStyling": {
            "background-color": "rgba(0, 162, 255, 0.4)"     
        },

        "paddingStyling": {
            "background-color": "rgba(0, 170, 0, 0.3)"
        },        
        
        "showPaddingMargin": true
    }







Please save the file after add it.
/ 加えた後はファイル保存しましょう。

Then you can use soon.
/ そうすると、すぐに使えます。








After Edit - When it's Unsuccessful / 編集後 - 失敗時

It doesn't reflect it. And when Brackets restart, error message displays.
If it happens, please check comma(,) and comment line(//) etc. If there are comment too, it happens error. so please delete comment line.

反映されません。またBraketsを再起動すると、エラーが表示されます。
その時は、カンマとコメント行(//)などを確認します。
コメントがあってもエラーになります。コメント行は消しましょう。

f:id:think-design:20180318144635p:plain








After Edit - When it's Successful / 編集後 - 成功時

f:id:think-design:20180318120709g:plain








Were you successful okay?
/ 無事に成功しましたか?