darshandsoni / asciidoctor-skins Goto Github PK

hi
I am wondering if any of styles are more adapted to generate HTML content that can be used as MAIL body.
The default HTML5 code generated is excellent on a modern browser but is rendering poorly when in a mail client (gmail, outlook, mac mail) and i am note sure how to adapt it.

tx

The stylesheet on asciidoctor.org is not the official default stylesheet for Asciidoctor. Please don't link against it. That stylesheet has extra styles that are required for the website to function. It's also not kept in sync with the stylesheet shipped with Asciidoctor and may move when the website is redesigned.

Instead, you can use the following URL to retrieve the default stylesheet for the latest release directly from the GitHub repository:

https://cdn.jsdelivr.net/gh/asciidoctor/[email protected]/data/stylesheets/asciidoctor-default.css

If you want to link against the development version instead, you can use this URL:

https://cdn.jsdelivr.net/gh/asciidoctor/asciidoctor@master/data/stylesheets/asciidoctor-default.css

Could you please document and add the instructions needed to contribute to your project in order to ?

• Add a new style
• Move existing styles (https://github.com/asciidoctor/asciidoctor-stylesheet-factory)
• Is it possible that we use less or sass to generate the css files
• Can we release the styles for a specific version of Asciidoctor

We are using the asciidoctor.css stylesheet we found in your project to help with the vscode-didact project (https://github.com/redhat-developer/vscode-didact) and while working through some issues reported by SonarCloud, I received the error: Unexpected missing generic font family

on this line:

.verseblock pre{font-family:"Open Sans","DejaVu Sans",sans;font-size:1.15rem;color:rgba(0,0,0,.85);font-weight:300;text-rendering:optimizeLegibility}

Here's a bit more about the issue: https://rules.sonarsource.com/css/RSPEC-4649

It appears that 'sans' is not a globally accepted font name, but 'sans-serif' is.

I'm trying to use the dark.css style but it is not rendered as espected. I'm getting this in vscode

and this one in Chrome after render the .adoc to an .html with asciidoctor

I was expecting something like this

I guess it is happening the same for other styles.

For style that use a 'navbar' skin such as boot-flatly it would be great to see the (first) nesting hierarchy as a dropdown

Is this easy to achieve or should I use navbar for this ?

Cheers

When using the switcher.js as described (for example, here as a passthrough in the asciidoc)

//skin selector for HTML backend
++++

++++

highlighter.js does not work anymore after a skin has been changed, only the first time. As Highlight.js is one of the supported syntax colourings for asciidoctor, it would be great if the switcher and highlight.js could work together seamslessly.

By having a quick look I think that all that needs do be done in switcher.js would be to make a check if there exits a hljs object and if so just call hljs.initHighlightning() again

The current demo page is based on the html5-test-page project. It does a good job of demonstrating most of the elements included in HTML5, but it is missing many Asciidoctor-specific features such as admonitions. To give a better sense of how the themes look when applied to .adoc files, the demo should be replaced with an Asciidoctor-based sample article.

It would be desirable to be able to migrate documentation from asciidoc to asciidoctor while preserving the styling, and then make separate consideration of whether to change it.

Can we please have an "asciidoc" or "classic" theme that emulates, as possible, the original asciidoc style?

I noticed the error below on loading the skins:

Failed to load resource: the server responded with a status of 404 (Not Found) => http://darshandsoni.com/asciidoctor-skins/css/css/asciidoctor.css

It seems that this is occurring because of this line that tries to import asciidoctor.css from css/asciidoctor.css, which of course doesn't exist now since the skins themselves are located in the css directory.

I'll see if I can submit a PR to fix this.

I'm using asciidoctor.css together with adoc-foundation.css and I've added a custom font everywhere except for code blocks. However, I've noticed that the element .toc-root (the title of the document at the top of the table of contents) is defined nowhere in any of the css files and therefore has retained the original font (wherever that was defined then, since apparently it also didn't inherit this setting from anywhere that I've changed the settings).

Could a setting for .toc-root maybe be added to the stylesheets? Thanks! :)

Hi all,

Can you please add a new theme? Dracula :-)

Thanks. Refael.

When using source highlighter like highlightjs, background-color property for code tag is not displayed properly (by this I mean, it does not use highlightjs styles), because of this line ((snippet below is taken from fedora theme))
code{color:var(--white);background-color: var(--highlightcolor) !important}

I suggest changing it to something similar to how it is defined in asciidoctor.css
:not(pre)>code{color:var(--white);background-color: var(--highlightcolor)}

[%collapsible] in Adoc-github is missing the arrow which makes it very hard/unusable to see the collipsible text

Seen an example of how it looks like in the regular skin. https://blog.mrhaki.com/2019/03/awesome-asciidoctor-collapsible-content.html

Would it be possible to add this?

BTW Thanks for a great project.

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:

Here is coderay:

Here is pygments:

Here is 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!