primer / github-syntax-theme-generator Goto Github PK

Would be great to publish an official monaco-editor theme!

Hello - I'm not sure if this is the correct repository to share this, but the styles in github.com's dark themes have a broken ::selection style, making it impossible to see selected text.

I tried to communicate this to github, github design and github engineering on twitter.

https://twitter.com/andy__blum/status/1651956561508442113

If this is not the correct repository to report these issues, do you have an idea of where I can request this gets fixed?

lib/themes/light.json treats all keywords the same, colouring them red:

    {
      "scope": "keyword",
      "settings": {
        "fontStyle": "",
        "foreground": "#d73a49"
      },
      "name": "Keyword"
    },

I'd like to suggest that it treats keyword.operator differently, preferably using a less vivid colour.

Reasons:

1. TextMate documentation is fairly clear that keyword.operator includes symbolic operators like Java's + = << whereas most other keywords are words like Java's continue while return. These are rather different kinds of syntactic elements and it seems odd to me that they are lumped together in the same category for colouring purposes.

2. In practice some language grammars (e.g. Java and JavaScript) make use of keyword.operator and some (e.g. C and Go) do not, which leads to inconsistent colouring across languages: in Java and Javascript, symbolic operators stand out in red, and in C and Go they do not.

The links from the README don't work anymore:

https://github.com/primer/github-vscode-syntax-light
https://github.com/primer/github-vscode-syntax-dark

Both return 404.

Atom: 1.13.1x64
OS X El Capitan 10.11.6
All atom packages up to date.
No custom CCS styles.
Syntax theme: github-atom-light-syntax

I am not sure if this is Atom bug somehow, but it only happens for me with github-atom-light-syntax syntax theme, so I think it belongs here possibly.

The brackets on same line do not seem to be matched. Different lines do match. Notice the match (with bottom border).

This happens regardless of the type of bracket.

Expected look with stock atom One Light theme:

With all new updates in the language-php package it seems the colours in PHP doesn't match the colours on GitHub. Atom on the right and GitHub on the left:

List of syntax colours that doesn't match:

• DocBlocks
• Properties
• Variables
• Methods

I'm running Atom version 1.20.1 with github-atom-light-syntax version 0.5.0.

Maybe @50Wliu knows more about this issue?

Starting from Atom v1.13.0, the contents of atom-text-editor elements are no longer encapsulated within a shadow DOM boundary.
This means you should stop using :host and ::shadow pseudo-selectors, and prepend all your syntax selectors with syntax--.

To prevent breakage with existing style sheets, Atom will automatically upgrade the following selectors:

• atom-text-editor, :host => atom-text-editor,atom-text-editor
• atom-text-editor .line.cursor-line, :host .line.cursor-line => atom-text-editor .line.cursor-line,atom-text-editor .line.cursor-line
• atom-text-editor .invisible, :host .invisible => atom-text-editor .invisible,atom-text-editor .invisible
• atom-text-editor .cursor, :host .cursor => atom-text-editor .cursor,atom-text-editor .cursor
• atom-text-editor .selection .region, :host .selection .region => atom-text-editor .selection .region,atom-text-editor .selection .region
• atom-text-editor .bracket-matcher .region, :host .bracket-matcher .region => atom-text-editor .bracket-matcher .region,atom-text-editor .bracket-matcher .region
• atom-text-editor .invisible-character, :host .invisible-character => atom-text-editor .invisible-character,atom-text-editor .invisible-character
• atom-text-editor .indent-guide, :host .indent-guide => atom-text-editor .indent-guide,atom-text-editor .indent-guide
• atom-text-editor .wrap-guide, :host .wrap-guide => atom-text-editor .wrap-guide,atom-text-editor .wrap-guide
• atom-text-editor .gutter, :host .gutter => atom-text-editor .gutter,atom-text-editor .gutter
• atom-text-editor .gutter .line-number, :host .gutter .line-number => atom-text-editor .gutter .line-number,atom-text-editor .gutter .line-number
• atom-text-editor .gutter .line-number.cursor-line, :host .gutter .line-number.cursor-line => atom-text-editor .gutter .line-number.cursor-line,atom-text-editor .gutter .line-number.cursor-line
• atom-text-editor .gutter .line-number.cursor-line-no-selection, :host .gutter .line-number.cursor-line-no-selection => atom-text-editor .gutter .line-number.cursor-line-no-selection,atom-text-editor .gutter .line-number.cursor-line-no-selection
• atom-text-editor .gutter .line-number .icon-right, :host .gutter .line-number .icon-right => atom-text-editor .gutter .line-number .icon-right,atom-text-editor .gutter .line-number .icon-right
• atom-text-editor .gutter:not(.git-diff-icon) .line-number.git-line-removed.git-line-removed::before, :host .gutter:not(.git-diff-icon) .line-number.git-line-removed.git-line-removed::before => atom-text-editor .gutter:not(.git-diff-icon) .line-number.git-line-removed.git-line-removed::before,atom-text-editor .gutter:not(.git-diff-icon) .line-number.git-line-removed.git-line-removed::before
• atom-text-editor .gutter:not(.git-diff-icon) .line-number.git-line-removed::after, :host .gutter:not(.git-diff-icon) .line-number.git-line-removed::after => atom-text-editor .gutter:not(.git-diff-icon) .line-number.git-line-removed::after,atom-text-editor .gutter:not(.git-diff-icon) .line-number.git-line-removed::after
• atom-text-editor .gutter .line-number.folded, :host .gutter .line-number.folded, atom-text-editor .gutter .line-number:after, :host .gutter .line-number:after, atom-text-editor .fold-marker:after, :host .fold-marker:after => atom-text-editor .gutter .line-number.folded,atom-text-editor .gutter .line-number.folded, atom-text-editor .gutter .line-number:after,atom-text-editor .gutter .line-number:after, atom-text-editor .fold-marker:after,atom-text-editor .fold-marker:after
• atom-text-editor .search-results .marker .region, :host .search-results .marker .region => atom-text-editor .search-results .syntax--marker .region,atom-text-editor .search-results .syntax--marker .region
• atom-text-editor .search-results .marker.current-result .region, :host .search-results .marker.current-result .region => atom-text-editor .search-results .syntax--marker.current-result .region,atom-text-editor .search-results .syntax--marker.current-result .region
• .comment, .punctuation.definition.comment, .string.comment => .syntax--comment, .syntax--punctuation.syntax--definition.syntax--comment, .syntax--string.syntax--comment
• .constant, .entity.name.constant, .variable.other.constant, .variable.language => .syntax--constant, .syntax--entity.syntax--name.syntax--constant, .syntax--variable.syntax--other.syntax--constant, .syntax--variable.syntax--language
• .entity, .entity.name => .syntax--entity, .syntax--entity.syntax--name
• .variable.parameter.function => .syntax--variable.syntax--parameter.syntax--function
• .entity.name.tag => .syntax--entity.syntax--name.syntax--tag
• .keyword => .syntax--keyword
• .storage, .storage.type => .syntax--storage, .syntax--storage.syntax--type
• .storage.modifier.package, .storage.modifier.import, .storage.type.java => .syntax--storage.syntax--modifier.syntax--package, .syntax--storage.syntax--modifier.syntax--import, .syntax--storage.syntax--type.syntax--java
• .string, .punctuation.definition.string, .string .punctuation.section.embedded .source => .syntax--string, .syntax--punctuation.syntax--definition.syntax--string, .syntax--string .syntax--punctuation.syntax--section.syntax--embedded .syntax--source
• .support => .syntax--support
• .meta.property-name => .syntax--meta.syntax--property-name
• .variable => .syntax--variable
• .variable.other => .syntax--variable.syntax--other
• .invalid.broken => .syntax--invalid.syntax--broken
• .invalid.deprecated => .syntax--invalid.syntax--deprecated
• .invalid.illegal => .syntax--invalid.syntax--illegal
• .invalid.unimplemented => .syntax--invalid.syntax--unimplemented
• .message.error => .syntax--message.syntax--error
• .string .source => .syntax--string .syntax--source
• .string .variable => .syntax--string .syntax--variable
• .source.regexp, .string.regexp => .syntax--source.syntax--regexp, .syntax--string.syntax--regexp
• .string.regexp.character-class, .string.regexp .constant.character.escape, .string.regexp .source.ruby.embedded, .string.regexp .string.regexp.arbitrary-repitition => .syntax--string.syntax--regexp.syntax--character-class, .syntax--string.syntax--regexp .syntax--constant.syntax--character.syntax--escape, .syntax--string.syntax--regexp .syntax--source.syntax--ruby.syntax--embedded, .syntax--string.syntax--regexp .syntax--string.syntax--regexp.syntax--arbitrary-repitition
• .string.regexp .constant.character.escape => .syntax--string.syntax--regexp .syntax--constant.syntax--character.syntax--escape
• .support.constant => .syntax--support.syntax--constant
• .support.variable => .syntax--support.syntax--variable
• .meta.module-reference => .syntax--meta.syntax--module-reference
• .markup.list => .syntax--markup.syntax--list
• .markup.heading, .markup.heading .entity.name => .syntax--markup.syntax--heading, .syntax--markup.syntax--heading .syntax--entity.syntax--name
• .markup.quote => .syntax--markup.syntax--quote
• .markup.italic => .syntax--markup.syntax--italic
• .markup.bold => .syntax--markup.syntax--bold
• .markup.raw => .syntax--markup.syntax--raw
• .markup.deleted, .meta.diff.header.from-file, .punctuation.definition.deleted => .syntax--markup.syntax--deleted, .syntax--meta.syntax--diff.syntax--header.syntax--from-file, .syntax--punctuation.syntax--definition.syntax--deleted
• .markup.inserted, .meta.diff.header.to-file, .punctuation.definition.inserted => .syntax--markup.syntax--inserted, .syntax--meta.syntax--diff.syntax--header.syntax--to-file, .syntax--punctuation.syntax--definition.syntax--inserted
• .markup.changed, .punctuation.definition.changed => .syntax--markup.syntax--changed, .syntax--punctuation.syntax--definition.syntax--changed
• .markup.ignored, .markup.untracked => .syntax--markup.syntax--ignored, .syntax--markup.untracked
• .meta.diff.range => .syntax--meta.syntax--diff.syntax--range
• .meta.diff.header => .syntax--meta.syntax--diff.syntax--header
• .meta.separator => .syntax--meta.syntax--separator
• .meta.output => .syntax--meta.syntax--output
• .brackethighlighter.tag, .brackethighlighter.curly, .brackethighlighter.round, .brackethighlighter.square, .brackethighlighter.angle, .brackethighlighter.quote => .brackethighlighter.syntax--tag, .brackethighlighter.syntax--curly, .brackethighlighter.syntax--round, .brackethighlighter.syntax--square, .brackethighlighter.syntax--angle, .brackethighlighter.syntax--quote
• .sublimelinter.mark.error => .sublimelinter.syntax--mark.syntax--error
• .sublimelinter.mark.warning => .sublimelinter.syntax--mark.syntax--warning
• .constant.other.reference.link, .string.other.link => .syntax--constant.syntax--other.syntax--reference.syntax--link, .syntax--string.syntax--other.syntax--link

Automatic translation of selectors will be removed in a few release cycles to minimize startup time. Please, make sure to upgrade the above selectors as soon as possible.

I updated some of the syntax to be more close to GitHub, Thought you may like to update your code base. Please compare and update if you wish. I did not have the builder installed just thought you could compare the compiled file and go from there easily.

@import "syntax-variables";

atom-text-editor, :host {
  background-color: @syntax-background-color;
  color: @syntax-text-color;
}

atom-text-editor .gutter, :host .gutter {
  background-color: @syntax-gutter-background-color;
  color: @syntax-gutter-text-color;
}

atom-text-editor .gutter .line-number.cursor-line, :host .gutter .line-number.cursor-line {
  background-color: @syntax-gutter-background-color-selected;
  color: @syntax-gutter-text-color-selected;
}

atom-text-editor .gutter .line-number.cursor-line-no-selection, :host .gutter .line-number.cursor-line-no-selection {
  color: @syntax-gutter-text-color-selected;
}

atom-text-editor .wrap-guide, :host .wrap-guide {
  color: @syntax-wrap-guide-color;
}

atom-text-editor .indent-guide, :host .indent-guide {
  color: @syntax-indent-guide-color;
}

atom-text-editor .invisible-character, :host .invisible-character {
  color: @syntax-invisible-character-color;
}

atom-text-editor .search-results .marker .region, :host .search-results .marker .region {
  background-color: transparent;
  border: @syntax-result-marker-color;
}

atom-text-editor .search-results .marker.current-result .region, :host .search-results .marker.current-result .region {
  border: @syntax-result-marker-color-selected;
}

atom-text-editor.is-focused .cursor, :host(.is-focused) .cursor {
  border-color: @syntax-cursor-color;
}

atom-text-editor.is-focused .selection .region, :host(.is-focused) .selection .region {
  background-color: @syntax-selection-color;
}

atom-text-editor.is-focused .line-number.cursor-line-no-selection, atom-text-editor.is-focused .line.cursor-line, :host(.is-focused) .line-number.cursor-line-no-selection, :host(.is-focused) .line.cursor-line {
  background-color: #f5f5f5;
}

.comment, .punctuation.definition.comment, .string.comment {
  color: #969896;
}

.entity.name.constant,  .variable.language {
  color: #ed6a43;
}

.variable.other.constant {
  color: #0086b3;
}

.constant {
  color: #0086b3;
}

.keyword.operator.symbole, .keyword.other.mark {
}

.entity, .entity.name {
  color: #795da3;
}

.variable.parameter.function {
  color: #333333;
}

.entity.name.tag {
  color: #63a35c;
}

.keyword {
  color: #a71d5d;
}

.storage, .storage.type {
  color: #a71d5d;
}

.storage.modifier.package, .storage.modifier.import, .storage.type.java {
  color: #333;
}

.string, .punctuation.definition.string, .string .punctuation.section.embedded .source {
  color: #183691;
}

.string.unquoted.import.ada {
}

.support {
  color: #0086b3;
}

.meta.property-name {
  color: #0086b3;
}

.variable {
  color: #333333;
}

.variable.other {
  color: #333;
}

.invalid.broken {
  font-weight: bold;
  font-style: italic;
  text-decoration: underline;
  color: #b52a1d;
}

.invalid.deprecated {
  font-weight: bold;
  font-style: italic;
  text-decoration: underline;
  color: #b52a1d;
}

.invalid.illegal {
  font-style: italic;
  text-decoration: underline;
  color: #f8f8f8;
  background-color: #b52a1d;
}

.invalid.unimplemented {
  font-weight: bold;
  font-style: italic;
  text-decoration: underline;
  color: #b52a1d;
}

.message.error {
  color: #b52a1d;
}

.string .source {
  color: #333;
}

.string .variable {
  color: #0086b3;
}

.source.regexp, .string.regexp {
  color: #183691;
}

.string.regexp.character-class, .string.regexp .constant.character.escape, .string.regexp .source.ruby.embedded, .string.regexp .string.regexp.arbitrary-repitition {
  color: #183691;
}

.string.regexp .constant.character.escape {
  font-weight: bold;
  color: #63a35c;
}

.support.constant {
  color: #0086b3;
}

.support.variable {
  color: #0086b3;
}

.meta.module-reference {
  color: #0086b3;
}

.markup.list {
  color: #693a17;
}

.markup.heading, .markup.heading .entity.name {
  font-weight: bold;
  color: #1d3e81;
}

.markup.quote {
  color: #008080;
}

.markup.italic {
  font-style: italic;
  color: #333;
}

.markup.bold {
  font-weight: bold;
  color: #333;
}

.markup.raw {
  color: #0086b3;
}

.markup.deleted, .meta.diff.header.from-file, .punctuation.definition.deleted {
  color: #bd2c00;
  background-color: #ffecec;
}

.markup.inserted, .meta.diff.header.to-file, .punctuation.definition.inserted {
  color: #55a532;
  background-color: #eaffea;
}

.markup.changed, .punctuation.definition.changed {
  color: #ef9700;
  background-color: #ffe3b4;
}

.markup.ignored, .markup.untracked {
  color: #d8d8d8;
  background-color: #808080;
}

.meta.diff.range {
  font-weight: bold;
  color: #795da3;
}

.meta.diff.header {
  color: #0086b3;
}

.meta.separator {
  font-weight: bold;
  color: #1d3e81;
}

.meta.output {
  color: #1d3e81;
}

.brackethighlighter.tag, .brackethighlighter.curly, .brackethighlighter.round, .brackethighlighter.square, .brackethighlighter.angle, .brackethighlighter.quote {
  color: #595e62;
}

.brackethighlighter.unmatched {
  color: #b52a1d;
}

.sublimelinter.mark.error {
  color: #b52a1d;
}

.sublimelinter.mark.warning {
  color: #ed6a43;
}

.sublimelinter.gutter-mark {
  color: #c0c0c0;
}

.constant.other.reference.link, .string.other.link {
  text-decoration: underline;
  color: #183691;
}

When using github-syntax-light or github-syntax-dark, there is a colour issue with the github package when solving conflicts, it is just unreadable:

Current conflict resolution style

Expected result

If we compare with one-light or one-dark:

Would be awesome to have the official github colorscheme for vim too

There is some bad interaction with language-diff as reported at miketheman/language-diff#10 when using Atom as git commit editor. The commit message containing the diff is not readable. Changing themes to Atom default ones, all works ok.

Please advise. Thanks!

[email protected]
[email protected]
[email protected]
[email protected]

there is deprecation warning on atom 1.15.0 for using shadow selectors.
with the description :

Starting from Atom v1.13.0, the contents of atom-text-editor elements are no longer encapsulated within a shadow DOM boundary. This means you should stop using :host and ::shadow pseudo-selectors, and prepend all your syntax selectors with syntax--.

https://pygments.org/

Hello,

I see a new version was pushed yesterday. I can confirm that today. rolling back to 0.2.0 allows me to see my theme.

apm install [email protected]

Reference:

• https://github.com/primer/github-atom-light-syntax

The atom-package-manager package doesn't play well with travisci, so we should try and remove the dependency on it.

Options are:

1. Rewrite the apm converter and just have it here https://github.com/atom/apm/blob/master/src/theme-converter.coffee
2. Write a .json to atom plugin that doesn't rely on textmate themes.

After upgrading github-atom-light-syntax to 0.3.2 the marks indicating changed lines disappeared.

Default theme:

GitHub Atom light v0.3.2:

I am using Atom 1.12.6 on Ubuntu 16.04.

Hello GitHub [light|dark] syntax theme generator,

From:

• qjebbs/vscode-plantuml#428
• github-linguist/linguist#5530

We have a question:

• Is it plan to explicit differentiate support scope colour from constant scope colour?

Regards.

Hi all, we noticed that https://github.com/primer/github-syntax-light/blob/master/lib/github-light.css and https://github.com/primer/github-syntax-dark/blob/master/lib/github-dark.css lack some of the classes that seem to be generated by rougify (and, equivalently, pygments). For instance, rougify highlights certain substrings of a .html file with an nt class, but absent from github-light.css and github-dark.css is a corresponding pl-nt class.

Are the CSS themes meant to be used in conjunction with an additional stylesheet? We tried, for instance, prepending each with the output of rougify style github, but that yielded an overall color scheme quite different from what we see when HTML files are highlighted on github.com itself.

Thank you!

I'm not sure this is the right place to report this, but as underlying PrettyLight library is closed-source, it's the best I can do.

If tokens contain right-to-left text, any following ambiguous tokens (comma, digits, etc.) will be rendered right-to-left.

Example (code link):

The string literal here contains the arabic waw followed by a space (and is followed by , 3u8). However the full sequence of waw, quotation mark, latin comma (outside the string literal token), space, digit 3 is rendered right-to-left, because the letter u is the first strong left-to-right character that flips the bidi algorithm again.

This can be fixed by setting the unicode-bidi: isolate CSS to not let a token's directionality leak outside of it. Setting that for .pl-s makes this render correctly (and as it does in VS Code):

This property should be set on at least string and character literals, as well as identifiers, which in many languages can be arbitrary Unicode sequences, and comments. It probably doesn't hurt to set it on all token types.