@ -7,7 +7,7 @@ This repository contains no source code, it only contains the scripts to package
These packages are described in the root file called `metadata.js` and it is possible to create an editor distribution that contains only certain plugins by editing that file.
| [vscode](https://github.com/Microsoft/vscode) | [monaco-editor-core](https://www.npmjs.com/package/monaco-editor-core) | editor core functionality (language agnostic) is shipped out of vscode. |
| [monaco-languages](https://github.com/Microsoft/monaco-languages) | [monaco-languages](https://www.npmjs.com/package/monaco-languages) | plugin that adds colorization and basic supports for dozens of languages. |
| [monaco-typescript](https://github.com/Microsoft/monaco-typescript) | [monaco-typescript](https://www.npmjs.com/package/monaco-typescript) | plugin that adds rich language support for JavaScript and TypeScript. |
@ -15,12 +15,11 @@ These packages are described in the root file called `metadata.js` and it is pos
| [monaco-json](https://github.com/Microsoft/monaco-json) | [monaco-json](https://www.npmjs.com/package/monaco-json) | plugin that adds rich language support for JSON. |
| [monaco-html](https://github.com/Microsoft/monaco-html) | [monaco-html](https://www.npmjs.com/package/monaco-html) | plugin that adds rich language support for HTML. |
## Running the editor from source
You need to have all the build setup of VS Code to be able to build the Monaco Editor.
* Install all the [prerequisites](https://github.com/Microsoft/vscode/wiki/How-to-Contribute#prerequisites)
- Install all the [prerequisites](https://github.com/Microsoft/vscode/wiki/How-to-Contribute#prerequisites)
### OS X and Linux
@ -50,7 +49,7 @@ You need to have all the build setup of VS Code to be able to build the Monaco E
/src/vscode> yarn run watch
```
* For the monaco editor test pages:
- For the monaco editor test pages:
```bash
# clone monaco-editor (note the folders must be siblings!)
@ -90,7 +89,7 @@ Open [http://localhost:8080/monaco-editor/test/?editor=src&monaco-typescript=src
> Tip: All folders must be cloned as siblings.
> Tip: When running the test pages, use the control panel in the top right corner to switch between running from source, running from npm or running from the local release:
* inside `esm`: ESM version of the editor (compatible with e.g. webpack)
* inside `dev`: AMD bundled, not minified
* inside `min`: AMD bundled, and minified
* inside `min-maps`: source maps for `min`
* `monaco.d.ts`: this specifies the API of the editor (this is what is actually versioned, everything else is considered private and might break with any release).
- inside `esm`: ESM version of the editor (compatible with e.g. webpack)
- inside `dev`: AMD bundled, not minified
- inside `min`: AMD bundled, and minified
- inside `min-maps`: source maps for `min`
- `monaco.d.ts`: this specifies the API of the editor (this is what is actually versioned, everything else is considered private and might break with any release).
It is recommended to develop against the `dev` version, and in production to use the `min` version.
## Documentation
* Learn how to integrate the editor with these [complete samples](https://github.com/Microsoft/monaco-editor-samples/).
* [Integrate the AMD version](./monaco-editor/docs/integrate-amd.md).
* [Integrate the AMD version cross-domain](./monaco-editor/docs/integrate-amd-cross.md)
* [Integrate the ESM version](./monaco-editor/docs/integrate-esm.md)
* Learn how to use the editor API and try out your own customizations in the [playground](https://microsoft.github.io/monaco-editor/playground.html).
* Explore the [API docs](https://microsoft.github.io/monaco-editor/api/index.html) or read them straight from [`monaco.d.ts`](https://github.com/Microsoft/monaco-editor/blob/master/website/playground/monaco.d.ts.txt).
* Read [this guide](https://github.com/Microsoft/monaco-editor/wiki/Accessibility-Guide-for-Integrators) to ensure the editor is accessible to all your users!
* Create a Monarch tokenizer for a new programming language [in the Monarch playground](https://microsoft.github.io/monaco-editor/monarch.html).
* Ask questions on [StackOverflow](https://stackoverflow.com/questions/tagged/monaco-editor)! Search open and closed issues, there are a lot of tips in there!
- Learn how to integrate the editor with these [complete samples](https://github.com/Microsoft/monaco-editor-samples/).
- [Integrate the AMD version](./monaco-editor/docs/integrate-amd.md).
- [Integrate the AMD version cross-domain](./monaco-editor/docs/integrate-amd-cross.md)
- [Integrate the ESM version](./monaco-editor/docs/integrate-esm.md)
- Learn how to use the editor API and try out your own customizations in the [playground](https://microsoft.github.io/monaco-editor/playground.html).
- Explore the [API docs](https://microsoft.github.io/monaco-editor/api/index.html) or read them straight from [`monaco.d.ts`](https://github.com/Microsoft/monaco-editor/blob/master/website/playground/monaco.d.ts.txt).
- Read [this guide](https://github.com/Microsoft/monaco-editor/wiki/Accessibility-Guide-for-Integrators) to ensure the editor is accessible to all your users!
- Create a Monarch tokenizer for a new programming language [in the Monarch playground](https://microsoft.github.io/monaco-editor/monarch.html).
- Ask questions on [StackOverflow](https://stackoverflow.com/questions/tagged/monaco-editor)! Search open and closed issues, there are a lot of tips in there!
## Issues
@ -77,11 +78,11 @@ No.
❓ **Why doesn't the editor support TextMate grammars?**
* Please see https://github.com/bolinfest/monaco-tm which puts together `monaco-editor`, `vscode-oniguruma` and `vscode-textmate` to get TM grammar support in the editor.
- Please see https://github.com/bolinfest/monaco-tm which puts together `monaco-editor`, `vscode-oniguruma` and `vscode-textmate` to get TM grammar support in the editor.
❓ **What about IE 11 support?**
* The Monaco Editor no longer supports IE 11. The last version that was tested on IE 11 is `0.18.1`.
- The Monaco Editor no longer supports IE 11. The last version that was tested on IE 11 is `0.18.1`.
## Development setup
@ -91,6 +92,6 @@ Please see [CONTRIBUTING](./CONTRIBUTING.md)
This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
## License
Licensed under the [MIT](https://github.com/Microsoft/monaco-editor/blob/master/LICENSE.md) License.
Microsoft takes the security of our software products and services seriously, which includes all source code repositories managed through our GitHub organizations, which include [Microsoft](https://github.com/Microsoft), [Azure](https://github.com/Azure), [DotNet](https://github.com/dotnet), [AspNet](https://github.com/aspnet), [Xamarin](https://github.com/xamarin), and [our GitHub organizations](https://opensource.microsoft.com/).
If you believe you have found a security vulnerability in any Microsoft-owned repository that meets [Microsoft's definition of a security vulnerability](https://docs.microsoft.com/en-us/previous-versions/tn-archive/cc751383(v=technet.10)), please report it to us as described below.
If you believe you have found a security vulnerability in any Microsoft-owned repository that meets [Microsoft's definition of a security vulnerability](<https://docs.microsoft.com/en-us/previous-versions/tn-archive/cc751383(v=technet.10)>), please report it to us as described below.
## Reporting Security Issues
@ -18,13 +18,13 @@ You should receive a response within 24 hours. If for some reason you do not, pl
Please include the requested information listed below (as much as you can provide) to help us better understand the nature and scope of the possible issue:
* Type of issue (e.g. buffer overflow, SQL injection, cross-site scripting, etc.)
* Full paths of source file(s) related to the manifestation of the issue
* The location of the affected source code (tag/branch/commit or direct URL)
* Any special configuration required to reproduce the issue
* Step-by-step instructions to reproduce the issue
* Proof-of-concept or exploit code (if possible)
* Impact of the issue, including how an attacker might exploit the issue
- Type of issue (e.g. buffer overflow, SQL injection, cross-site scripting, etc.)
- Full paths of source file(s) related to the manifestation of the issue
- The location of the affected source code (tag/branch/commit or direct URL)
- Any special configuration required to reproduce the issue
- Step-by-step instructions to reproduce the issue
- Proof-of-concept or exploit code (if possible)
- Impact of the issue, including how an attacker might exploit the issue
This information will help us triage your report more quickly.
Microsoft takes the security of our software products and services seriously, which includes all source code repositories managed through our GitHub organizations, which include [Microsoft](https://github.com/Microsoft), [Azure](https://github.com/Azure), [DotNet](https://github.com/dotnet), [AspNet](https://github.com/aspnet), [Xamarin](https://github.com/xamarin), and [our GitHub organizations](https://opensource.microsoft.com/).
If you believe you have found a security vulnerability in any Microsoft-owned repository that meets [Microsoft's definition of a security vulnerability](<https://docs.microsoft.com/en-us/previous-versions/tn-archive/cc751383(v=technet.10)>), please report it to us as described below.
## Reporting Security Issues
**Please do not report security vulnerabilities through public GitHub issues.**
Instead, please report them to the Microsoft Security Response Center (MSRC) at [https://msrc.microsoft.com/create-report](https://msrc.microsoft.com/create-report).
If you prefer to submit without logging in, send email to [secure@microsoft.com](mailto:secure@microsoft.com). If possible, encrypt your message with our PGP key; please download it from the [Microsoft Security Response Center PGP Key page](https://www.microsoft.com/en-us/msrc/pgp-key-msrc).
You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message. Additional information can be found at [microsoft.com/msrc](https://www.microsoft.com/msrc).
Please include the requested information listed below (as much as you can provide) to help us better understand the nature and scope of the possible issue:
- Type of issue (e.g. buffer overflow, SQL injection, cross-site scripting, etc.)
- Full paths of source file(s) related to the manifestation of the issue
- The location of the affected source code (tag/branch/commit or direct URL)
- Any special configuration required to reproduce the issue
- Step-by-step instructions to reproduce the issue
- Proof-of-concept or exploit code (if possible)
- Impact of the issue, including how an attacker might exploit the issue
This information will help us triage your report more quickly.
If you are reporting for a bug bounty, more complete reports can contribute to a higher bounty award. Please visit our [Microsoft Bug Bounty Program](https://microsoft.com/msrc/bounty) page for more details about our active programs.
## Preferred Languages
We prefer all communications to be in English.
## Policy
Microsoft follows the principle of [Coordinated Vulnerability Disclosure](https://www.microsoft.com/en-us/msrc/cvd).
comment:"This issue is being closed because its description is not in English, that makes it hard for us to work on it. Please open a new issue with an English description. You might find [Bing Translator](https://www.bing.com/translator) useful."
comment:'This issue is being closed because its description is not in English, that makes it hard for us to work on it. Please open a new issue with an English description. You might find [Bing Translator](https://www.bing.com/translator) useful.'
},
{
type:'comment',
@ -57,6 +58,6 @@
action:'updateLabels',
addLabel:'needs more info',
comment:"Thanks for creating this issue! We figured it's missing some basic information or in some other way doesn't follow our [issue reporting](https://aka.ms/vscodeissuereporting) guidelines. Please take the time to review these and update the issue.\n\nHappy Coding!"
Options can be passed in to `MonacoWebpackPlugin`. They can be used to generate a smaller editor bundle by selecting only certain languages or only certain editor features:
* `filename` (`string`) - custom filename template for worker scripts, respects the same options as [loader-utils' interpolateName](https://github.com/webpack/loader-utils#interpolatename). Useful for adding content-based hashes so that files can be served with long-lived caching headers.
* default value: `'[name].worker.js'`.
* `publicPath` (`string`) - custom public path for worker scripts, overrides the public path from which files generated by this plugin will be served. This wins out over Webpack's dynamic runtime path and can be useful to avoid attempting to load workers cross-origin when using a CDN for other static resources. Use e.g. '/' if you want to load your resources from the current origin..
* default value: `''`.
* `languages` (`string[]`) - include only a subset of the languages supported.
- `filename` (`string`) - custom filename template for worker scripts, respects the same options as [loader-utils' interpolateName](https://github.com/webpack/loader-utils#interpolatename). Useful for adding content-based hashes so that files can be served with long-lived caching headers.
- default value: `'[name].worker.js'`.
- `publicPath` (`string`) - custom public path for worker scripts, overrides the public path from which files generated by this plugin will be served. This wins out over Webpack's dynamic runtime path and can be useful to avoid attempting to load workers cross-origin when using a CDN for other static resources. Use e.g. '/' if you want to load your resources from the current origin..
- default value: `''`.
- `languages` (`string[]`) - include only a subset of the languages supported.
Some languages share the same web worker. If one of the following languages is included, you must also include the language responsible for instantiating their shared worker:
| Language | Instantiator |
| ------------- | ------------- |
| ---------- | ------------ |
| javascript | typescript |
| handlebars | html |
| scss, less | css |
- `features` (`string[]`) - include only a subset of the editor features.
* excluded features: It is also possible to exclude certain default features prefixing them with an exclamation mark '!'.
* `globalAPI` (`boolean`) - specify whether the editor API should be exposed through a global `monaco` object or not. This option is applicable to `0.22.0` and newer version of `monaco-editor`. Since `0.22.0`, the ESM version of the monaco editor does no longer define a global `monaco` object unless `global.MonacoEnvironment = { globalAPI: true }` is set ([change log](https://github.com/microsoft/monaco-editor/blob/main/CHANGELOG.md#0220-29012021)).
* default value: `false`.
- `globalAPI` (`boolean`) - specify whether the editor API should be exposed through a global `monaco` object or not. This option is applicable to `0.22.0` and newer version of `monaco-editor`. Since `0.22.0`, the ESM version of the monaco editor does no longer define a global `monaco` object unless `global.MonacoEnvironment = { globalAPI: true }` is set ([change log](https://github.com/microsoft/monaco-editor/blob/main/CHANGELOG.md#0220-29012021)).
Microsoft takes the security of our software products and services seriously, which includes all source code repositories managed through our GitHub organizations, which include [Microsoft](https://github.com/Microsoft), [Azure](https://github.com/Azure), [DotNet](https://github.com/dotnet), [AspNet](https://github.com/aspnet), [Xamarin](https://github.com/xamarin), and [our GitHub organizations](https://opensource.microsoft.com/).
If you believe you have found a security vulnerability in any Microsoft-owned repository that meets [Microsoft's definition of a security vulnerability](https://docs.microsoft.com/en-us/previous-versions/tn-archive/cc751383(v=technet.10)), please report it to us as described below.
If you believe you have found a security vulnerability in any Microsoft-owned repository that meets [Microsoft's definition of a security vulnerability](<https://docs.microsoft.com/en-us/previous-versions/tn-archive/cc751383(v=technet.10)>), please report it to us as described below.
## Reporting Security Issues
@ -18,13 +18,13 @@ You should receive a response within 24 hours. If for some reason you do not, pl
Please include the requested information listed below (as much as you can provide) to help us better understand the nature and scope of the possible issue:
* Type of issue (e.g. buffer overflow, SQL injection, cross-site scripting, etc.)
* Full paths of source file(s) related to the manifestation of the issue
* The location of the affected source code (tag/branch/commit or direct URL)
* Any special configuration required to reproduce the issue
* Step-by-step instructions to reproduce the issue
* Proof-of-concept or exploit code (if possible)
* Impact of the issue, including how an attacker might exploit the issue
- Type of issue (e.g. buffer overflow, SQL injection, cross-site scripting, etc.)
- Full paths of source file(s) related to the manifestation of the issue
- The location of the affected source code (tag/branch/commit or direct URL)
- Any special configuration required to reproduce the issue
- Step-by-step instructions to reproduce the issue
- Proof-of-concept or exploit code (if possible)
- Impact of the issue, including how an attacker might exploit the issue
This information will help us triage your report more quickly.
comment:"This issue is being closed because its description is not in English, that makes it hard for us to work on it. Please open a new issue with an English description. You might find [Bing Translator](https://www.bing.com/translator) useful."
comment:'This issue is being closed because its description is not in English, that makes it hard for us to work on it. Please open a new issue with an English description. You might find [Bing Translator](https://www.bing.com/translator) useful.'
},
{
type:'comment',
@ -57,6 +58,6 @@
action:'updateLabels',
addLabel:'needs more info',
comment:"Thanks for creating this issue! We figured it's missing some basic information or in some other way doesn't follow our [issue reporting](https://aka.ms/vscodeissuereporting) guidelines. Please take the time to review these and update the issue.\n\nHappy Coding!"
@ -18,21 +18,19 @@ More self-contained samples are available at [monaco-editor-samples](https://git
This is the easiest method, and it allows for options to be passed into the plugin in order to select only a subset of editor features or editor languages. Read more about the [Monaco Editor Loader Plugin](https://github.com/Microsoft/monaco-editor-webpack-plugin), which is a community authored plugin.
Full working samples are available at https://github.com/Microsoft/monaco-editor-samples/tree/master/browser-esm-webpack or https://github.com/Microsoft/monaco-editor-samples/tree/master/browser-esm-webpack-small
@ -138,7 +138,8 @@ A full working sample is available at https://github.com/Microsoft/monaco-editor
When using parcel, we need to use the `getWorkerUrl` function and build the workers seperately from our main source. To simplify things, we can write a tiny bash script to build the workers for us.
Then, simply run `sh ./build_workers.sh && parcel index.html`. This builds the workers into the same directory as your main bundle (usually `./dist`). If you want to change the `--out-dir` of the workers, you must change the paths in `index.js` to reflect their new location.
*note - the `getWorkerUrl` paths are relative to the build directory of your src bundle*
_note - the `getWorkerUrl` paths are relative to the build directory of your src bundle_
---
@ -193,33 +191,33 @@ Then, simply run `sh ./build_workers.sh && parcel index.html`. This builds the w
Adding monaco editor to [Vite](https://vitejs.dev/) is simple since it has built-in support for web workers. You only need to implement the `getWorker` function (NOT the `getWorkerUrl`) to use Vite's output ([Source](https://github.com/vitejs/vite/discussions/1791#discussioncomment-321046)):
```js
import * as monaco from 'monaco-editor'
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
import * as monaco from 'monaco-editor';
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
// The diff editor offers a navigator to jump between changes. Once the diff is computed the <em>next()</em> and <em>previous()</em> method allow navigation. By default setting the selection in the editor manually resets the navigation state.
varoriginalModel=monaco.editor.createModel("just some text\n\nHello World\n\nSome more text","text/plain");
varmodifiedModel=monaco.editor.createModel("just some Text\n\nHello World\n\nSome more changes","text/plain");
varoriginalModel=monaco.editor.createModel(
'just some text\n\nHello World\n\nSome more text',
'text/plain'
);
varmodifiedModel=monaco.editor.createModel(
'just some Text\n\nHello World\n\nSome more changes',
'foreground'// Overall foreground color. This color is only used if not overridden by a component.
'errorForeground'// Overall foreground color for error messages. This color is only used if not overridden by a component.
'descriptionForeground'// Foreground color for description text providing additional information, for example for a label.
'focusBorder'// Overall border color for focused elements. This color is only used if not overridden by a component.
'contrastBorder'// An extra border around elements to separate them from others for greater contrast.
'contrastActiveBorder'// An extra border around active elements to separate them from others for greater contrast.
'selection.background'// The background color of text selections in the workbench (e.g. for input fields or text areas). Note that this does not apply to selections within the editor.
'textSeparator.foreground'// Color for text separators.
'textLink.foreground'// Foreground color for links in text.
'textLink.activeForeground'// Foreground color for active links in text.
'textPreformat.foreground'// Foreground color for preformatted text segments.
'textBlockQuote.background'// Background color for block quotes in text.
'textBlockQuote.border'// Border color for block quotes in text.
'textCodeBlock.background'// Background color for code blocks in text.
'widget.shadow'// Shadow color of widgets such as find/replace inside the editor.
'input.background'// Input box background.
'input.foreground'// Input box foreground.
'input.border'// Input box border.
'inputOption.activeBorder'// Border color of activated options in input fields.
'input.placeholderForeground'// Input box foreground color for placeholder text.
'inputValidation.infoBackground'// Input validation background color for information severity.
'inputValidation.infoBorder'// Input validation border color for information severity.
'inputValidation.warningBackground'// Input validation background color for information warning.
'inputValidation.warningBorder'// Input validation border color for warning severity.
'inputValidation.errorBackground'// Input validation background color for error severity.
'inputValidation.errorBorder'// Input validation border color for error severity.
'dropdown.background'// Dropdown background.
'dropdown.foreground'// Dropdown foreground.
'dropdown.border'// Dropdown border.
'list.focusBackground'// List/Tree background color for the focused item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not.
'list.focusForeground'// List/Tree foreground color for the focused item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not.
'list.activeSelectionBackground'// List/Tree background color for the selected item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not.
'list.activeSelectionForeground'// List/Tree foreground color for the selected item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not.
'list.inactiveSelectionBackground'// List/Tree background color for the selected item when the list/tree is inactive. An active list/tree has keyboard focus, an inactive does not.
'list.inactiveSelectionForeground'// List/Tree foreground color for the selected item when the list/tree is inactive. An active list/tree has keyboard focus, an inactive does not.
'list.hoverBackground'// List/Tree background when hovering over items using the mouse.
'list.hoverForeground'// List/Tree foreground when hovering over items using the mouse.
'list.dropBackground'// List/Tree drag and drop background when moving items around using the mouse.
'list.highlightForeground'// List/Tree foreground color of the match highlights when searching inside the list/tree.
'pickerGroup.foreground'// Quick picker color for grouping labels.
'pickerGroup.border'// Quick picker color for grouping borders.
'button.foreground'// Button foreground color.
'button.background'// Button background color.
'button.hoverBackground'// Button background color when hovering.
'badge.background'// Badge background color. Badges are small information labels, e.g. for search results count.
'badge.foreground'// Badge foreground color. Badges are small information labels, e.g. for search results count.
'scrollbar.shadow'// Scrollbar shadow to indicate that the view is scrolled.
'editorWidget.background'// Background color of editor widgets, such as find/replace.
'editorWidget.border'// Border color of editor widgets. The color is only used if the widget chooses to have a border and if the color is not overridden by a widget.
'editor.selectionBackground'// Color of the editor selection.
'editor.selectionForeground'// Color of the selected text for high contrast.
'editor.inactiveSelectionBackground'// Color of the selection in an inactive editor.
'editor.selectionHighlightBackground'// Color for regions with the same content as the selection.
'editor.findMatchBackground'// Color of the current search match.
'editor.findMatchHighlightBackground'// Color of the other search matches.
'editor.findRangeHighlightBackground'// Color the range limiting the search.
'editor.hoverHighlightBackground'// Highlight below the word for which a hover is shown.
'editorHoverWidget.background'// Background color of the editor hover.
'editorHoverWidget.border'// Border color of the editor hover.
'editorLink.activeForeground'// Color of active links.
'diffEditor.insertedTextBackground'// Background color for text that got inserted.
'diffEditor.removedTextBackground'// Background color for text that got removed.
'diffEditor.insertedTextBorder'// Outline color for the text that got inserted.
'diffEditor.removedTextBorder'// Outline color for text that got removed.
'editorOverviewRuler.currentContentForeground'// Current overview ruler foreground for inline merge-conflicts.
'editorOverviewRuler.incomingContentForeground'// Incoming overview ruler foreground for inline merge-conflicts.
'editorOverviewRuler.commonContentForeground'// Common ancestor overview ruler foreground for inline merge-conflicts.
'editor.lineHighlightBackground'// Background color for the highlight of line at the cursor position.
'editor.lineHighlightBorder'// Background color for the border around the line at the cursor position.
'editor.rangeHighlightBackground'// Background color of highlighted ranges, like by quick open and find features.
'editorCursor.foreground'// Color of the editor cursor.
'editorWhitespace.foreground'// Color of whitespace characters in the editor.
'editorIndentGuide.background'// Color of the editor indentation guides.
'editorLineNumber.foreground'// Color of editor line numbers.
'editorLineNumber.activeForeground'// Color of editor active line number.
'editorRuler.foreground'// Color of the editor rulers.
'editorCodeLens.foreground'// Foreground color of editor code lenses
'editorInlayHint.foreground'// Foreground color of editor inlay hints
'editorInlayHint.background'// Background color of editor inlay hints
'editorBracketMatch.background'// Background color behind matching brackets
'editorBracketMatch.border'// Color for matching brackets boxes
'editorOverviewRuler.border'// Color of the overview ruler border.
'editorGutter.background'// Background color of the editor gutter. The gutter contains the glyph margins and the line numbers.
'editorError.foreground'// Foreground color of error squigglies in the editor.
'editorError.border'// Border color of error squigglies in the editor.
'editorWarning.foreground'// Foreground color of warning squigglies in the editor.
'editorWarning.border'// Border color of warning squigglies in the editor.
'editorSuggestWidget.background'// Background color of the suggest widget.
'editorSuggestWidget.border'// Border color of the suggest widget.
'editorSuggestWidget.foreground'// Foreground color of the suggest widget.
'editorSuggestWidget.selectedBackground'// Background color of the selected entry in the suggest widget.
'editorSuggestWidget.highlightForeground'// Color of the match highlights in the suggest widget.
'editor.wordHighlightBackground'// Background color of a symbol during read-access, like reading a variable.
'editor.wordHighlightStrongBackground'// Background color of a symbol during write-access, like writing to a variable.
'peekViewTitle.background'// Background color of the peek view title area.
'peekViewTitleLabel.foreground'// Color of the peek view title.
'peekViewTitleDescription.foreground'// Color of the peek view title info.
'peekView.border'// Color of the peek view borders and arrow.
'peekViewResult.background'// Background color of the peek view result list.
'peekViewResult.lineForeground'// Foreground color for line nodes in the peek view result list.
'peekViewResult.fileForeground'// Foreground color for file nodes in the peek view result list.
'peekViewResult.selectionBackground'// Background color of the selected entry in the peek view result list.
'peekViewResult.selectionForeground'// Foreground color of the selected entry in the peek view result list.
'peekViewEditor.background'// Background color of the peek view editor.
'peekViewEditorGutter.background'// Background color of the gutter in the peek view editor.
'peekViewResult.matchHighlightBackground'// Match highlight color in the peek view result list.
'peekViewEditor.matchHighlightBackground'// Match highlight color in the peek view editor.
('foreground');// Overall foreground color. This color is only used if not overridden by a component.
('errorForeground');// Overall foreground color for error messages. This color is only used if not overridden by a component.
('descriptionForeground');// Foreground color for description text providing additional information, for example for a label.
('focusBorder');// Overall border color for focused elements. This color is only used if not overridden by a component.
('contrastBorder');// An extra border around elements to separate them from others for greater contrast.
('contrastActiveBorder');// An extra border around active elements to separate them from others for greater contrast.
('selection.background');// The background color of text selections in the workbench (e.g. for input fields or text areas). Note that this does not apply to selections within the editor.
('textSeparator.foreground');// Color for text separators.
('textLink.foreground');// Foreground color for links in text.
('textLink.activeForeground');// Foreground color for active links in text.
('textPreformat.foreground');// Foreground color for preformatted text segments.
('textBlockQuote.background');// Background color for block quotes in text.
('textBlockQuote.border');// Border color for block quotes in text.
('textCodeBlock.background');// Background color for code blocks in text.
('widget.shadow');// Shadow color of widgets such as find/replace inside the editor.
('input.background');// Input box background.
('input.foreground');// Input box foreground.
('input.border');// Input box border.
('inputOption.activeBorder');// Border color of activated options in input fields.
('input.placeholderForeground');// Input box foreground color for placeholder text.
('inputValidation.infoBackground');// Input validation background color for information severity.
('inputValidation.infoBorder');// Input validation border color for information severity.
('inputValidation.warningBackground');// Input validation background color for information warning.
('inputValidation.warningBorder');// Input validation border color for warning severity.
('inputValidation.errorBackground');// Input validation background color for error severity.
('inputValidation.errorBorder');// Input validation border color for error severity.
('dropdown.background');// Dropdown background.
('dropdown.foreground');// Dropdown foreground.
('dropdown.border');// Dropdown border.
('list.focusBackground');// List/Tree background color for the focused item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not.
('list.focusForeground');// List/Tree foreground color for the focused item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not.
('list.activeSelectionBackground');// List/Tree background color for the selected item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not.
('list.activeSelectionForeground');// List/Tree foreground color for the selected item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not.
('list.inactiveSelectionBackground');// List/Tree background color for the selected item when the list/tree is inactive. An active list/tree has keyboard focus, an inactive does not.
('list.inactiveSelectionForeground');// List/Tree foreground color for the selected item when the list/tree is inactive. An active list/tree has keyboard focus, an inactive does not.
('list.hoverBackground');// List/Tree background when hovering over items using the mouse.
('list.hoverForeground');// List/Tree foreground when hovering over items using the mouse.
('list.dropBackground');// List/Tree drag and drop background when moving items around using the mouse.
('list.highlightForeground');// List/Tree foreground color of the match highlights when searching inside the list/tree.
('pickerGroup.foreground');// Quick picker color for grouping labels.
('pickerGroup.border');// Quick picker color for grouping borders.
('button.foreground');// Button foreground color.
('button.background');// Button background color.
('button.hoverBackground');// Button background color when hovering.
('badge.background');// Badge background color. Badges are small information labels, e.g. for search results count.
('badge.foreground');// Badge foreground color. Badges are small information labels, e.g. for search results count.
('scrollbar.shadow');// Scrollbar shadow to indicate that the view is scrolled.
('editorWidget.background');// Background color of editor widgets, such as find/replace.
('editorWidget.border');// Border color of editor widgets. The color is only used if the widget chooses to have a border and if the color is not overridden by a widget.
('editor.selectionBackground');// Color of the editor selection.
('editor.selectionForeground');// Color of the selected text for high contrast.
('editor.inactiveSelectionBackground');// Color of the selection in an inactive editor.
('editor.selectionHighlightBackground');// Color for regions with the same content as the selection.
('editor.findMatchBackground');// Color of the current search match.
('editor.findMatchHighlightBackground');// Color of the other search matches.
('editor.findRangeHighlightBackground');// Color the range limiting the search.
('editor.hoverHighlightBackground');// Highlight below the word for which a hover is shown.
('editorHoverWidget.background');// Background color of the editor hover.
('editorHoverWidget.border');// Border color of the editor hover.
('editorLink.activeForeground');// Color of active links.
('diffEditor.insertedTextBackground');// Background color for text that got inserted.
('diffEditor.removedTextBackground');// Background color for text that got removed.
('diffEditor.insertedTextBorder');// Outline color for the text that got inserted.
('diffEditor.removedTextBorder');// Outline color for text that got removed.
('editorOverviewRuler.currentContentForeground');// Current overview ruler foreground for inline merge-conflicts.
('editorOverviewRuler.incomingContentForeground');// Incoming overview ruler foreground for inline merge-conflicts.
('editorOverviewRuler.commonContentForeground');// Common ancestor overview ruler foreground for inline merge-conflicts.
('editor.lineHighlightBackground');// Background color for the highlight of line at the cursor position.
('editor.lineHighlightBorder');// Background color for the border around the line at the cursor position.
('editor.rangeHighlightBackground');// Background color of highlighted ranges, like by quick open and find features.
('editorCursor.foreground');// Color of the editor cursor.
('editorWhitespace.foreground');// Color of whitespace characters in the editor.
('editorIndentGuide.background');// Color of the editor indentation guides.
('editorLineNumber.foreground');// Color of editor line numbers.
('editorLineNumber.activeForeground');// Color of editor active line number.
('editorRuler.foreground');// Color of the editor rulers.
('editorCodeLens.foreground');// Foreground color of editor code lenses
('editorInlayHint.foreground');// Foreground color of editor inlay hints
('editorInlayHint.background');// Background color of editor inlay hints
('editorBracketMatch.background');// Background color behind matching brackets
('editorBracketMatch.border');// Color for matching brackets boxes
('editorOverviewRuler.border');// Color of the overview ruler border.
('editorGutter.background');// Background color of the editor gutter. The gutter contains the glyph margins and the line numbers.
('editorError.foreground');// Foreground color of error squigglies in the editor.
('editorError.border');// Border color of error squigglies in the editor.
('editorWarning.foreground');// Foreground color of warning squigglies in the editor.
('editorWarning.border');// Border color of warning squigglies in the editor.
Alex Dima
3 years ago