What

I use markdown-preview link here while working on documentation today I noticed some awkward coloring while in preview mode and viewing code snippets in a read me.

Adding a screencap for reference:

Suggestion

I have poked around with this a bit and I do have a solution. I need to just a bit more testing and I'll have a PR up tonight for it.

In index.less: Use the atom-text-editor tag instead of the editor-colors class.

In green-syntax\index.less:

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:

• .editor-colors .html => .editor-colors .syntax--html

• .editor-colors .html.string => .editor-colors .syntax--html.syntax--string

• .comment => .syntax--comment

• .entity => .syntax--entity

• .entity.name.function => .syntax--entity.syntax--name.syntax--function

• .entity.tag => .syntax--entity.syntax--tag

• .entity.attribute-name => .syntax--entity.syntax--attribute-name

• .keyword => .syntax--keyword

• .keyword.operator => .syntax--keyword.syntax--operator

• .storage.type => .syntax--storage.syntax--type

• .storage.type.class => .syntax--storage.syntax--type.syntax--class

• .storage.type.class.todo => .syntax--storage.syntax--type.syntax--class.syntax--todo

• .storage.type.function => .syntax--storage.syntax--type.syntax--function

• .storage.type.function.coffee => .syntax--storage.syntax--type.syntax--function.syntax--coffee

• .storage.type.function.js => .syntax--storage.syntax--type.syntax--function.syntax--js

• .storage.modifier.js => .syntax--storage.syntax--modifier.syntax--js

• .constant => .syntax--constant

• .constant.numeric => .syntax--constant.syntax--numeric

• .constant.boolean => .syntax--constant.syntax--boolean

• .variable => .syntax--variable

• .variable.parameter => .syntax--variable.syntax--parameter

• .variable.instance => .syntax--variable.syntax--instance

• .variable.assignment => .syntax--variable.syntax--assignment

• .delimiter, .brace => .syntax--delimiter, .syntax--brace

• .delimiter.period => .syntax--delimiter.syntax--period

• .invalid.deprecated => .syntax--invalid.syntax--deprecated

• .invalid.illegal => .syntax--invalid.syntax--illegal

• .string => .syntax--string

• .string .constant.character.escape => .syntax--string .syntax--constant.syntax--character.syntax--escape

• .string.regexp => .syntax--string.syntax--regexp

• .string.regexp .source.ruby.embedded, .string.regexp .string.regexp.arbitrary-repitition => .syntax--string.syntax--regexp .syntax--source.syntax--ruby.syntax--embedded, .syntax--string.syntax--regexp .syntax--string.syntax--regexp.syntax--arbitrary-repitition

• .support.class => .syntax--support.syntax--class

• .support.function => .syntax--support.syntax--function

• .operator => .syntax--operator

• .operator.new => .syntax--operator.syntax--new

• .control => .syntax--control

• .punctuation.definition.tag => .syntax--punctuation.syntax--definition.syntax--tag

• .punctuation.definition.entity => .syntax--punctuation.syntax--definition.syntax--entity

• .punctuation.definition.variable.ruby => .syntax--punctuation.syntax--definition.syntax--variable.syntax--ruby

• .punctuation.definition.constant => `.syntax-