asciidoctor-skins icon indicating copy to clipboard operation
asciidoctor-skins copied to clipboard

Syntaxhighlight in Dark theme doesn't work

Open jodobear opened this issue 2 years ago • 0 comments

I love the dark theme, but syntax highlight has major issues.

This code produces the below results:

[source,python]
----
def x(a, b):
  return a + b
----

[source,bash]
----
$ ls gocode
 bin   pkg

$ ll gocode
drwxr-xr-x a a 4.0 KB Thu Mar  3 05:52:00 2022  bin
drwxr-xr-x a a 4.0 KB Thu Mar  3 05:45:43 2022  pkg
----

[source,javascript]
----
function square(number) {
  return number * number;
}
----

Here is highlight.js: adoc-highlight js

Here is coderay: adoc-coderay

Here is pygments: adoc-pygments

Here is rouge: adoc-rouge

I tried altering the dark.css, but i couldn't get to change anything. Following is the relevant code in dark.css:

code{color:var(--linkcoloralternate);background-color: var(--sidebarbackground) !important}

.literalblock pre, .listingblock pre:not(.highlight), .listingblock pre[class="highlight"], .listingblock pre[class^="highlight "], .listingblock pre.CodeRay, .listingblock pre.prettyprint {
  background: var(--sidebarbackground);
  color: var(--white);
}

Now, how to fix/alter/customize source/literal block css in the theme dark?

We really need some documentation for the themes. If there is already, i apologise that i couldn't find it.

I would greatly appreciate anyone pointing out if i'm making any mistake and/or help fix this issue.

Thanks!

jodobear avatar Jun 30 '22 15:06 jodobear