microsoft / microsoft/monaco-editor
Not honoring 8-bit hex colors
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 46.8k
- Forks
- 4.1k
- Avg merge
- 17h 58m
- Merged PRs (30d)
- 1
Description
monaco-editor version: 0.20.0
Browser: Any
OS: Any
Playground code that reproduces the issue:
This is taken from the 'Tokens and Colors' example on the playground. All I added was 2 more characters to a hex value to give it an alpha channel. Monaco strips away those characters to make it a 6 digit hex even though 8 digit hex are valid.
// Theme matching (i.e. applying a style to a token) happens in JavaScript.
// We must therefore register the theme rules in JavaScript.
// A custom theme must name its base theme (i.e. 'vs', 'vs-dark' or 'hc-black')
// It can then choose to inherit the rules from the base theme or not
// A rule token matching is prefix based: e.g.
// - string will match a token with type: string, string.double.js or string.html
// - string.double will match a token with type string.double but will not match string or string.html
// !!! Tokens can be inspected using F1 > Developer: Inspect Tokens !!!
monaco.editor.defineTheme('myCustomTheme', {
base: 'vs', // can also be vs-dark or hc-black
inherit: true, // can also be false to completely replace the builtin rules
rules: [
{ token: 'comment', foreground: 'ffa500', fontStyle: 'italic underline' },
{ token: 'comment.js', foreground: '00880033', fontStyle: 'bold' },
{ token: 'comment.css', foreground: '0000ff' } // will inherit fontStyle from `comment` above
]
});
monaco.editor.create(document.getElementById("container"), {
value: getCode(),
language: "text/html",
theme: "myCustomTheme"
});
function getCode() {
return "<html><!-- // !!! Tokens can be inspected using F1 > Developer: Inspect Tokens !!! -->\n<head>\n <!-- HTML comment -->\n <style type=\"text/css\">\n /* CSS comment */\n </style>\n <script type=\"javascript\">\n // JavaScript comment\n </"+"script>\n</head>\n<body></body>\n</html>";
}
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the provided Tokens and Colors playground snippet and trace how the theme rule foreground value is normalized. Confirm the 8-digit 00880033 value is retained and rendered with its alpha channel in the playground, including the supplied comment token example.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 52/100