दृश्य स्टूडियो कोड में हाइलाइट टेक्स्ट का रंग बदलें


114

अभी, यह एक बेहोश ग्रे ओवरले है, जिसे देखना मुश्किल है। डिफ़ॉल्ट रंग बदलने का कोई तरीका?

यहां छवि विवरण दर्ज करें


उपकरण -> विकल्प, सामान्य तौर पर: फ़ॉन्ट्स और रंग
ऑस्टिन टी फ्रेंच

10
विज़ुअल स्टूडियो कोड, वीएस 2013 नहीं, 2015, आदि
duyn9uyen

जवाबों:


14

अपडेट देखें वीएसकोड 1.12+ के लिए @Jakub Zawiślak का उत्तर


पुराना उत्तर

विजुअल स्टूडियो कोड इस चयन को हाइलाइटिंग कहता है और दुर्भाग्य से, मुझे नहीं लगता कि वर्तमान में रंग अनुकूलन योग्य है। थीम 'चयन' रंग को नियंत्रित कर सकते हैं, लेकिन 'चयन हाइलाइट' रंग हार्डकोड है।

एक संभावित समाधान पर नज़र रखने वाले इस मुद्दे को देखें: https://github.com/Microsoft/vscode/issues/1636

(साइड नोट के रूप में, आप इस सुविधा को चालू कर सकते हैं या editor.selectionHighlightसेटिंग से बंद कर सकते हैं ।)


4
अप्रचलित
एलेक्स

4
जेकब ज़ावीलाक के VSCode के आधुनिक संस्करणों के लिए संदर्भ का अद्यतन करने के लिए अपडेट किया गया
मैट बिएनर

@ duyn9uyen, बेहतर स्वीकार किए गए उत्तर को बदलते हैं।
किमीचेक

266

"संपादक: टोकन रंग अनुकूलन" सेटिंग में निम्न पंक्तियाँ जोड़ें, अंदर settings.json फ़ाइल।

"workbench.colorCustomizations": {
    "editor.selectionBackground": "#135564",
    "editor.selectionHighlightBackground": "#135564"
},

अधिक विकल्पों के लिए थीम रंग संदर्भ देखें


5
क्या पाठ का रंग बदलने का कोई तरीका है? अन्यथा आपको एक पृष्ठभूमि रंग खोजना होगा जो आपकी रंग योजना में हर एक रंग के साथ जोड़े जाने पर पठनीयता बनाए रखता है। यह दो मुद्दों में से एक है जो दुर्भाग्य से मुझे वीएस कोड का उपयोग करने से
ब्रूनो एली

3
@BrunoBEly यदि आप खोलते हैं "workbench.colorCustomizations": {}तो टाइप करना शुरू करें "editor.selection, स्वतः पूर्ण मेनू चयन अग्रभूमि सहित सभी संभावित कुंजी और उनके स्पष्टीकरण का सुझाव देगा।
टोबिया

2
@ टोबिया टिप के लिए धन्यवाद! मैंने इसे पाया, लेकिन शायद कुछ गलत कर रहा हूं। मैंने पृष्ठभूमि और अग्रभूमि दोनों को लाल रंग में सेट किया है, लेकिन केवल पृष्ठभूमि ही काम कर रही है (मैं VS कोड 1.18.0 का उपयोग कर रहा हूं)
ब्रूनो एली

1
टर्मिनल के लिए: "terminal.selectionBackground": "#f1eeb3a9",
जिनसो

1
यह पायथन के लिए काम selectionHighlightBackgroundनहीं करता है , सेटिंग को प्रभावित नहीं करता है कि किसी चर या फ़ंक्शन (उदाहरण के लिए) के उपयोग को हाइलाइट करते समय रंग बनामकोड किस रंग का उपयोग करता है
jrh

48

उपरोक्त उत्तर कवर करते हैं Selected textऔर areas with same content as selection, लेकिन वे याद करते हैं - Current Search Matchऔर जो एक ही समस्या हैOther Search Matches

"workbench.colorCustomizations": {
    "editor.findMatchBackground": "#00cc44a8", //Current SEARCH MATCH
    "editor.findMatchHighlightBackground": "#ff7b00a1" //Other SEARCH MATCHES
}

ध्यान दें कि उपर्युक्त सेटिंग्स भी रंग को प्रभावित करेगी जब Change All Occurrences CtrlF2 (एक सुपर-उपयोगी कमांड जो समझदारी से एक स्ट्रिंग के सभी घटनाओं का चयन करता है, प्रत्येक स्थान पर कई-उदाहरण संपादन के लिए कर्सर रखते हुए) का उपयोग करता है

अपडेट करें:

लोकप्रिय एक्सटेंशन नंबर वाले बुकमार्क का उपयोग करने वालों के लिए - अब आप बुकमार्क लाइनों की पृष्ठभूमि का रंग बदल सकते हैं - यह उन्हें नोटिस करने के लिए आसान बनाता है। अपने settings.json (भी नीचे करने के लिए इस पंक्ति जोड़ें workbench.colorCustomizations ):

        "numberedBookmarks.lineBackground": "#007700"

और नीचे दिए गए अपने उत्तर में हेनरी ज़ू के उपयोगी टिप को याद न करें (यदि आपको यह उपयोगी लगता है तो उसके उत्तर को याद रखें) । मैंने ऊपर की सेटिंग्स में हेनरी की टिप को जोड़ा , और समग्र प्रभाव में सुधार पाया।


एक विशिष्ट सेटिंग फ़ाइल का उदाहरण, पोस्ट मॉड:

    {
        "git.enableSmartCommit": सच है,
        "git.autofetch": सच है,
        "ब्रेडक्रंब। विकलांग": सच है,
        "git.confirmSync": गलत,
        "explorer.confirmDelete": गलत,
        "कोड-रनर। saveFileBeforeRun": सत्य,
        "कोड-रनर। saveAllFilesBeforeRun": सच है,
        "वर्कबेन्च.ऐक्टिविटीबर्वर। अदृश्य": सच,
        "files.trimTrailingWhitespace": सच है,
        "telemetry.enableTelemetry": गलत,
        "scm.providers.v अदृश्य": 0, // 0 स्रोत नियंत्रण पैनल के मैनुअल आकार की अनुमति देता है
        "वर्कबेन्च.कोलर कस्टमाइज़ेशन": {
            "Editor.selectionBackground": "# e788ff7c", // वर्तमान में चयनित पाठ
            "Editor.selectionHighlightBackground": "# ff00005b", // चयन के समान सामग्री
            "Editor.findMatchBackground": "# 00cc44a8", // वर्तमान खोज MATCH
            "Editor.findMatchHighlightBackground": "# ff7b00a1", // अन्य खोजे
            "नंबरबुकमार्कs.लाइनबैकग्राउंड": "# 007700"
            // हेनरी की टिप यहां जाती है ... (ऊपर लाइन में अल्पविराम जोड़ना न भूलें)
        }
    }


सेटिंग्स को खोजने के लिए कहाँ। जसन फ़ाइल:

Depending on your platform, the user settings file is located here:

Windows %APPDATA%\Code\User\settings.json
macOS $HOME/Library/Application Support/Code/User/settings.json
Linux $HOME/.config/Code/User/settings.json

सेटिंग्स खोलने के लिए वैकल्पिक विधि। फ़ाइल को खोलें:

  1. सेटिंग खोलने के लिए Ctrl +, (अल्पविराम)

  2. कार्यक्षेत्र

  3. सेटिंग्स संपादक

  4. शीर्ष पर खोज बॉक्स में, पेस्ट-इन करें workbench.colorCustomizations

  5. बाईं ओर, क्लिक करें Workbenchऔर फिरAppearance

  6. लिंक को दाईं ओर क्लिक करें: Edit in settings.json

संदर्भ:

https://code.visualstudio.com/api/references/theme-color#editor-colors

https://code.visualstudio.com/docs/getstarted/themes#_customize-a-color-theme

https://code.visualstudio.com/docs/getstarted/settings


1
मैंने इन्हें एक नज़र में मैच खोजने के लिए इस उत्तर के साथ संयोजन के रूप में भी उपयोगी पाया। RGBA के लिए समर्थन पर ध्यान दें (मेरे उपयोग में, रंग मानों के अंत में 75 अल्फा सेटिंग:"editor.wordHighlightBorder": "#00ff0075", "editor.findMatchHighlightBorder": "#00ff0075"
नील गाय लिंडबर्ग

उस टिप के लिए धन्यवाद, नील। मैं इसे आजमाऊंगा।
cssyphus

किसी को पता है कि टर्मिनल खोज में मैचों के लिए यह कैसे संभव है?
होल्ज़कोह्लग्रेनिल

20

अगर किसी को यह पता चलता है और, मेरी तरह, ऐसा करने की कोशिश कर रहा उपरोक्त विन्यास प्राप्त करने में असमर्थ था।

  1. फ़ाइल> वरीयताएँ> सेटिंग में जाएं
  2. खोज संपादक टोकन रंग अनुकूलन में टाइप करें
  3. संपादक टोकन रंग अनुकूलन हेडर के तहत
  4. settings.json में एडिट पर क्लिक करें
  5. दाहिने हाथ के स्तंभ पर उपयोगकर्ता सेटिंग्स का चयन करें
  6. इसे जसन ऑब्जेक्ट में पेस्ट करें

उन रंगों को बदलना सुनिश्चित करें जिन्हें आप देखना चाहते हैं।

"workbench.colorCustomizations": {
    "editor.lineHighlightBackground": "#<color1>",
    "editor.selectionBackground": "#<color2>",
    "editor.wordHighlightBackground": "#<color3>",
    "editorCursor.foreground": "#<color4>"
},

उपरोक्त विन्यास के बारे में मेरी समझ।

editor.lineHighlightBackground - जब आप एक लाइन पर क्लिक करते हैं तो यह वह रंग है जिस पर लाइन बैकग्राउंड होगी।

"editor.selectionBackground" - यह बफर में कहीं और मिलान किए गए चयन की पृष्ठभूमि है। फू नाम के एक वैरिएबल के बारे में सोचें और यह एक फाइल पर इस्तेमाल होता है। फिर आप उस टेक्स्ट को हाइलाइट करते हैं और पेज पर मौजूद अन्य सभी फोक्स इस रंग के होंगे।

"editor.wordHighlightBackground" - यह चयनित पाठ का रंग है यदि क्लिक पर डिफ़ॉल्ट हाइलाइट शब्द प्रभावी नहीं होता है। यदि आपने किसी ऐसे शब्द पर क्लिक किया है, जो ऑटो-सिलेक्ट नहीं होता है, तो मैंने केवल यह मान देखा है।

EditorCursor.foreground - यह आपके कर्सर का रंग है।


2
इसका उत्तर होना चाहिए। ये VSCode संस्करण 1.3+
MaylorTaylor

: editor.lineHighlightBackground अब वहां होने लगते हैं नहीं है, और मुझे लगता है कि वे क्या कह रहे हैं यह जानबूझकर हटा दिया गया था github.com/dracula/visual-studio-code/issues/68
havlock

यह बहुत अच्छी तरह से हो सकता है।
19

1
धन्यवाद, यह दिनों के लिए खोजने की कोशिश कर रहा था, किसी ने कभी भी शब्द का उल्लेख नहीं किया है।
रयान वीस

इसे उत्तर के रूप में चिह्नित किया जाना चाहिए। 10 सेकंड फिक्स!
निको बटलर

17

जैसा कि मैंने परीक्षण किया है, बॉर्डर कलर सेट करने से बैकग्राउंड कलर सेट करने की तुलना में पढ़ना आसान हो जाता है, जो कि Sublime Text करता है।

उदाहरण के लिए, इन पंक्तियों को इसमें जोड़ें settings.json:

"workbench.colorCustomizations": {
    "editor.selectionHighlightBorder": "#FFFA",
},

चयनित शब्द इस तरह प्रदर्शित किए जाएंगे:

यहां छवि विवरण दर्ज करें


6

आप इसे अपने पसंदीदा रंग के साथ बदल सकते हैं:

कदम

  1. दृश्य कोड खोलें
  2. गोटो फ़ाइल मेनू
  3. प्राथमिकताएं -> सेटिंग्स

खुली सेटिंग्स के बाद आप अपने सेटिंग को अपने दाहिने साइड कॉलम पर अपडेट करेंगे, इस कोड को मुख्य ब्रैकेट के अंदर कॉपी और पेस्ट करेंगे { ... }

"workbench.colorCustomizations": {
    "editor.selectionBackground": "#f00", // red color hexadecimal code
    "editor.selectionHighlightBackground": "#fff" // white hex code
},

नहीं डाल सकते हैं redया whiteमूल्यों के रूप में।
giovannipds

1
जियोनीनीपड्स, इसका सिर्फ नाम दिखाने के लिए, कि आप किसी भी रंग का नाम जोड़ सकते हैं, इसका कोई मूल्य नहीं
Rizo

1
यह कोड है, इसलिए यह गलत है। redऔर whiteवेब रंग हैं, जिससे लोगों को भ्रमित किया जा सकता है ..
giovannipds

3

अगर किसी ने खुद को @ FujiRoyale के उत्तर को पढ़ने में नहीं पाया जैसा कि किसी ने भी काम नहीं किया, और सोचा कि उसका / उसकी भी काम क्यों नहीं चला, लेकिन जैसा कि हाल ही में सोचा गया था कि क्यों, मैंने उनके जवाब का पालन किया, और vscode के v1.18 के साथ ) यह एक user settingsसेटअप के रूप में :

{
    // Is git enabled
    "git.enabled": true,
    // Path to the git executable
    "git.path": "C:\\Users\\t606964\\AppData\\Local\\Programs\\Git\\mingw64\\bin\\git.exe",
    "workbench.startupEditor": "newUntitledFile",
    // other settings
    //
    "editor.fontSize": 12,
    "editor.tabSize": 2,
    "git.confirmSync": false,
    "workbench.colorTheme": "Monokai",
    "editor.fontWeight": "bold",
    "editor.formatOnSave": true,
    "editor.formatOnPaste": true,
    "workbench.iconTheme": "vscode-icons",
    "explorer.confirmDelete": false,
    "files.autoSave": "off",
    "workbench.colorCustomizations": {
        "editor.lineHighlightBackground": "#f00",
        "editor.selectionBackground": "#0f0",
        "editor.wordHighlightBackground": "#00f",
        "editorCursor.foreground": "#ff0"
    }
}

उनके जवाब से इंडेंटेशन और कॉमा और दोहरे उद्धरण चिह्नों को हटाने पर ध्यान दें (जो मुझे इसे सही करने के लिए खेलना था, जो उत्तर से स्पष्ट नहीं था)। Vscode को फिर से शुरू करने की कोई आवश्यकता नहीं होनी चाहिए, लेकिन यह File > Autosaveदेखने लायक हो सकता है और अगर आपको प्राथमिक रंग हाइलाइट्स मिलने लगे। और फिर अपने हाइलाइट्स के लिए बेहतर रंगों का चयन करें।

आप इस काम को workspace settingsपेस्ट करके भी कर सकते हैं

"workbench.colorCustomizations": {
    "editor.lineHighlightBackground": "#f00",
    "editor.selectionBackground": "#0f0",
    "editor.wordHighlightBackground": "#00f",
    "editorCursor.foreground": "#ff0"
}

{}उस दाएँ हाथ की सेटिंग फलक में मौजूदा के बीच में ।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.