diff --git a/app/components/text-content.module.css b/app/components/text-content.module.css index 9ca75d08f3f..f98b790bd03 100644 --- a/app/components/text-content.module.css +++ b/app/components/text-content.module.css @@ -30,14 +30,6 @@ border-radius: var(--space-3xs); } - :global(.hljs) { - color: unset; - background: unset; - display: unset; - overflow-x: unset; - padding: 0; - } - p, li { code { background-color: light-dark(#f6f8fa, #383836); @@ -92,4 +84,85 @@ } } } + + /* + * This is a combination of the `github.css` and `github-dark.css` themes, + * but merged together using the `light-dark` function. + * + * see https://github.com/highlightjs/highlight.js/blob/11.9.0/src/styles/github.css + * and https://github.com/highlightjs/highlight.js/blob/11.9.0/src/styles/github-dark.css + */ + :global(.hljs-doctag), + :global(.hljs-keyword), + :global(.hljs-meta) :global(.hljs-keyword), + :global(.hljs-template-tag), + :global(.hljs-template-variable), + :global(.hljs-type), + :global(.hljs-variable.language_) { + color: light-dark(#d73a49, #ff7b72); + } + :global(.hljs-title), + :global(.hljs-title.class_), + :global(.hljs-title.class_.inherited__), + :global(.hljs-title.function_) { + color: light-dark(#6f42c1, #d2a8ff); + } + :global(.hljs-attr), + :global(.hljs-attribute), + :global(.hljs-literal), + :global(.hljs-meta), + :global(.hljs-number), + :global(.hljs-operator), + :global(.hljs-variable), + :global(.hljs-selector-attr), + :global(.hljs-selector-class), + :global(.hljs-selector-id) { + color: light-dark(#005cc5, #79c0ff); + } + :global(.hljs-regex)p, + :global(.hljs-strin)g, + :global(.hljs-meta) :global(.hljs-string) { + color: light-dark(#032f62, #a5d6ff); + } + :global(.hljs-built_in), + :global(.hljs-symbol) { + color: light-dark(#e36209, #ffa657); + } + :global(.hljs-comment), + :global(.hljs-code), + :global(.hljs-formula) { + color: light-dark(#6a737d, #8b949e); + } + :global(.hljs-name), + :global(.hljs-quote), + :global(.hljs-selector-tag), + :global(.hljs-selector-pseudo) { + color: light-dark(#22863a, #7ee787); + } + :global(.hljs-subst) { + color: light-dark(#24292e, #c9d1d9); + } + :global(.hljs-section) { + color: light-dark(#005cc5, #1f6feb); + font-weight: bold + } + :global(.hljs-bullet) { + color: light-dark(#735c0f, #f2cc60); + } + :global(.hljs-emphasis) { + color: light-dark(#24292e, #c9d1d9); + font-style: italic + } + :global(.hljs-strong) { + color: light-dark(#24292e, #c9d1d9); + font-weight: bold + } + :global(.hljs-addition) { + color: light-dark(#22863a, #aff5b4); + background-color: light-dark(#f0fff4, #033a16); + } + :global(.hljs-deletion) { + color: light-dark(#b31d28, #ffdcd7); + background-color: light-dark(#ffeef0, #67060c); + } } diff --git a/app/modifiers/highlight-syntax.js b/app/modifiers/highlight-syntax.js index e97cedbcc54..055925386bc 100644 --- a/app/modifiers/highlight-syntax.js +++ b/app/modifiers/highlight-syntax.js @@ -1,6 +1,5 @@ import { modifier } from 'ember-modifier'; import hljs from 'highlight.js/lib/core'; -import 'highlight.js/styles/github.css'; import bash from 'highlight.js/lib/languages/bash'; import c from 'highlight.js/lib/languages/c'; import cpp from 'highlight.js/lib/languages/cpp';