Support for Darcula theme

[bodiam]

The preview screen uses a template which doesn't take into account the user preferences regarding themes. In effect, this means that the preview window will have a white background, which doesn't look to nice on a Darcula theme.

A custom CSS will be created with some initial support for Darcula.

[bodiam]

Current update:

• Initial support for Darcula is in.

The preview now uses it's own Darcula CSS, but some of the colors/fonts might not be ideal. Any ideas for improvements welcome.

Also, code blocks are a bit tricky, since code blocks seem to use hardcoded coloring (I guess this might be different per source code highlighter, but this is how coderay seems to do it).

Like I said, improvements welcome, but IMO, this looks much better than the white preview screen, and is a good step ahead.

[mojavelinux]

👍 Integrating into the natural environment is a great way for authors to feel "at home".

Eventually, we could change the stylesheets based on the user's theme selection.

code blocks are a bit tricky, since code blocks seem to use hardcoded coloring (I guess this might be different per source code highlighter, but this is how coderay seems to do it).

Simple fix. Just remove the coderay-css attribute and add a stylesheet named coderay-asciidoctor.css stylesheet (using any CSS you want) to the same directory as the asciidoctor.css.

Here's the line that needs to be changed:

https://github.com/asciidoctor/idea-asciidoc/blob/master/src/main/java/vietj/intellij/asciidoc/AsciiDoc.java#L56

[bodiam]

This is the initial support. Comments welcome!

[bodiam]

Initial support is in. If you want to propose changes, etc, please make a new issue.

[mojavelinux]

Really nice start!

Darcula!!! 👿

[bodiam]

Thanks, but as discussed, the code blocks are still an issue, and some of the headers might need some improvement. I'm not a designer however, so... improvements more than welcome :)

[mojavelinux]

@bodiam Another option is to use highlight.js instead of Coderay and then use one of the themes on this page: https://highlightjs.org/static/demo/. Just set the source-highlighter attribute to highlight.js and the highlightjs-theme attribute (e.g., highlightjs-theme=dark). However, you'd have to then add the highlight.js URL explicitly to the HTML since the plugin currently only generates the body content. (See the chrome extension for an example).