在Visual Studio代码中更改突出显示文本颜色

时间:2016-03-10 20:17:06

标签: visual-studio-code

现在,它是一个微弱的灰色覆盖层,很难看到。有什么方法可以改变默认颜色吗?

enter image description here

9 个答案:

答案 0 :(得分:156)

将以下行添加到settings.json文件中的“Editor:Token Color Customizations”设置中。

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

有关更多选项,请参阅Theme Color Reference

答案 1 :(得分:11)

<强>更新 请参阅@JakubZawiślak对VScode 1.12 +

的回答

旧答案

Visual Studio Code调用此选项突出显示,不幸的是,我认为当前颜色不可自定义。主题可以控制“选择”颜色,但“选择突出显示”颜色是硬编码的。

请参阅此问题,跟踪可能的解决方案:https://github.com/Microsoft/vscode/issues/1636

(作为旁注,您可以使用editor.selectionHighlight设置切换此功能或/关闭。)

答案 2 :(得分:6)

如果有人找到了它,并且像我一样,无法使上述配置正常工作,请尝试执行此操作。

  1. 转到文件>“偏好设置”>“设置”
  2. 键入搜索编辑器标记颜色自定义
  3. 编辑器标记颜色自定义项下的
  4. 标头
  5. 单击settings.json中的编辑
  6. 在右列中选择用户设置
  7. 将其粘贴到json对象中

请确保将#替换为您想要的颜色。

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

我对上述配置的理解。

editor.lineHighlightBackground-单击行时,这是行背景的颜色。

“ editor.selectionBackground”-这是缓冲区中其他位置的匹配选择的背景。考虑一个名为foo的变量,它已在整个文件中使用。然后,您突出显示该文本,页面上的所有其他foo都将是此颜色。

“ editor.wordHighlightBackground”-这是所选文本的颜色,如果单击时默认的突出显示单词无效。我只看到如果您单击未自动选择的单词,则此值会有所不同。

editorCursor.foreground-这是光标的颜色。

答案 3 :(得分:5)

以上答案涵盖了 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
}

典型设置文件示例,发布mod:

    {
        "git.enableSmartCommit": true,
        "git.autofetch": true,
        "breadcrumbs.enabled": true,
        "git.confirmSync": false,
        "explorer.confirmDelete": false,
        "code-runner.saveFileBeforeRun": true,
        "code-runner.saveAllFilesBeforeRun": true,
        "workbench.activityBar.visible": true,
        "files.trimTrailingWhitespace": true,
        "telemetry.enableTelemetry": false,
        "workbench.colorCustomizations": {
            "editor.selectionBackground": "#e788ff7c", //Currently SELECTED text
            "editor.selectionHighlightBackground": "#ff00005b", //Same content as selection
            "editor.findMatchBackground": "#00cc44a8", //Current SEARCH MATCH
            "editor.findMatchHighlightBackground": "#ff7b00a1" //Other SEARCH MATCHES
        }
    }


在哪里找到settings.json文件:

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

ALTERNATE方法以打开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

答案 4 :(得分:3)

您可以使用自己喜欢的颜色更改它:

<强>步骤

  1. 打开可视代码
  2. 转到文件菜单
  3. 偏好设置 - &gt;设置
  4. 打开设置后,您将更新右侧栏中的设置,将此代码复制并粘贴到主括号.current { background-color: #00ff00; }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="tabs-container">
        <ul class="tabs-menu">
            <li class="current"><a href="#news">News</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
        <div class="tab">
            <div id="news" class="tab-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor. Nullam pretium, est at congue mattis, nibh eros pharetra lectus, nec posuere libero dui consectetur arcu. Quisque convallis facilisis fermentum. Nam tincidunt, diam nec dictum mattis, nunc dolor ultrices ipsum, in mattis justo turpis nec ligula. Curabitur a ante mauris. Integer placerat imperdiet diam, facilisis pretium elit mollis pretium. Sed lobortis, eros non egestas suscipit, dui dui euismod enim, ac ultricies arcu risus at tellus. Donec imperdiet congue ligula, quis vulputate mauris ultrices non. Aliquam rhoncus, arcu a bibendum congue, augue risus tincidunt massa, vel vehicula diam dolor eget felis.</p>
            </div>
            <div id="contact" class="tab-content">
                <p>Donec semper dictum sem, quis pretium sem malesuada non. Proin venenatis orci vel nisl porta sollicitudin. Pellentesque sit amet massa et orci malesuada facilisis vel vel lectus. Etiam tristique volutpat auctor. Morbi nec massa eget sem ultricies fermentum id ut ligula. Praesent aliquet adipiscing dictum. Suspendisse dignissim dui tortor. Integer faucibus interdum justo, mattis commodo elit tempor id. Quisque ut orci orci, sit amet mattis nulla. Suspendisse quam diam, feugiat at ullamcorper eget, sagittis sed eros. Proin tortor tellus, pulvinar at imperdiet in, egestas sed nisl. Aenean tempor neque ut felis dignissim ac congue felis viverra. </p>
            
            </div>
        </div>
    </div>

答案 5 :(得分:2)

如果有人发现自己正在阅读@FujiRoyale的答案,而其他人都不起作用,则想知道为什么他/她的答案也没有起作用,但由于最近才想知道为什么,我遵循了他们的答案,并使用了v1。 vscode中的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"
}

在该右侧设置窗格中现有{}之间。

答案 6 :(得分:1)

正如我所测试的那样,设置边框颜色比设置背景颜色(即Sublime Text所做的)更易于阅读。

例如,在settings.json中添加以下行:

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

所选单词将显示如下:

enter image description here

答案 7 :(得分:1)

您是否尝试过使用/添加 Ryuichi Inagaki 的扩展 Text Marker (Highlighter) ??

您可以选择/突出显示一个选择块,右键单击 Toggle highlight 为其赋予独特的颜色,然后继续并重复其他选择块,为它们赋予我认为最有用的每个不同的不同颜色!

答案 8 :(得分:0)

更改步骤突出显示默认颜色

  1. 打开Visual Studio代码。
  2. 然后按Ctrl+k,t
  3. 将出现下拉对话框,从下拉列表中选择您的选择。