Custom CSS using a :stylesheet:

[john-cj]

Is there a way to use custom CSS without adding it to the extension itself? Adding to the extension is a good option, but for me it is not very convenient.

This is what I have tried:

:stylesheet: C:\Test\mystyles.css

Doesn't work. As well, as this:

:stylesheet!:

There is a workaround to use include, yes.

include::C:\Test\Styles.adoc[]

Styles.adoc:

++++
<style>
...
</style>
++++

This workaround isn't good, mainly, because it is necessary to override a lot of existing rules. E.g.

include::C:\Static\mystyles.adoc[]

Good code:

----
Code
----

Bad code:

[.bad]
----
Code
----

.bad pre {background-color: rgba(255, 96, 92, .2) !important;}

[ggrossetie]

Hello @john-cj

Adding to the extension is a good option, but for me it is not very convenient.

Could you please explain why?

:stylesheet: C:\Test\mystyles.css

In my opinion the above is not really portable.
Currently, the stylesheet attribute is used to select a known stylesheet. For instance if you've imported a stylesheet named corporate.css, you can enable it in your document using:

:stylesheet: corporate.css

The main benefit is that your document is portable. Meaning that you don't add specific attribute just for the browser extension.
For instance, if you are using the asciidoctor command line to convert this document, corporate.css could be resolved with the stylesdir.

Also, I might not be able to link an external resource for security reason.

[john-cj]

Hello, Guillaume. It seems, there is very friendly spirit here.

Could you please explain why?

Yes, of course. My problem is that I want to start from blank CSS file and then, from time to time, to add different things here-and-there according to my needs. So, the style sheet will be updated very often. But as I understand, when I add the style sheet to the extension itself, the changes in the style sheet file (located in C:\Static\Asciidoc.css) will not be automatically updated in the extension. This is why it is not convenient.

To be honest, I don't understand why it is bad for portability. You have adoc document:

:stylesheet: styles.css

Text

Then, you can open it with browser extension. Or you can convert it to HTML or PDF with command line utility. And it will look the same. Isn't it perfect? No additional job.

[ggrossetie]

Thanks for your feedback, I will see what I can do 😉

[john-cj]

I have slightly improved my workaround and now there is no need to overwrite anything. The key point is to add blank CSS:

1. Add blank CSS to the extension itself. C:\Static\adoc-blank.css.
2. And then use include to add your normal stylesheet. include::C:\Static\adoc-john.css.adoc. That's it.

(Though, a native :stylesheet: will be better, of course.)

[mojavelinux]

I'm not sure I understand why it's a problem for the stylesheet to be an absolute path, unless the browser extension simply won't allow it (but then how does the described workaround work?). If the value of the stylesheet is an absolute path, I think the extension should just use it as it is (if possible).

[ggrossetie]

I'm also wondering how/why the include directive is working with a css file. Maybe it's because we are using an XMLHttpRequest but we didn't explicitly ask the permission in the manifest.
I don't know if it's intended or not...
I didn't have the chance to give it a try yet but we need to make sure that this is not an oversight in Chrome and that this "feature" is also working in Firefox and Opera.

[john-cj]

I'm also wondering how/why the include directive is working with a css file.

Actually, it includes adoc file, with ++++<style>...</style>++++ (multi-line) section.

[ggrossetie]

Actually, it includes adoc file, with ++++<style>...</style>++++ (multi-line) section.

I see that's why it's working... so the question is should we add the following permission:

"permissions":[
  // ...
  "*://*/*.css"
],

[john-cj]

Personally, I would prefer

"permissions": [
  "*://*/*.css",
  "*://*/*.js"
]

Custom CSS is useful, JS is useful as well. For example, I use a script that shows footnotes when I hover over them, and it requires jQuery. So, currently, I need to download jQuery, then add this script in the jQuery file, and then add jQuery file in the extension using browser GUI menu. (It seems that the overall process is not as fast and nice as it could be.)

[john-cj]

@Mogztter It seems you haven't considered to add CSS access yet? :)

[ggrossetie]

@john-cj Sorry for the late reply, I'm still considering it but Chrome and Firefox review process are getting more strict. The extension is already subject to an in-depth review:

So I'm not even sure it will pass the review if I add your suggestion.
I will try to add this feature in the next version to see how the review process goes.

[john-cj]

Not sure why I haven't posted the following workaround earlier, but it is better than the previous one.

Instead of including an .adoc file,

include::styles.adoc[]

include a .css one, so you will have a correct highlighting, autocomplete, and other CSS-related features when you edit it.

++++
include::styles.css[]
++++

[sluedecke]

I use asciidoctor.js for chrome and I would love to have an option to specify a :stylesheet: at the top of my .adoc file. This way I can have custom stylesheets for every file I use.

But this does not (yet?) work and I successfully can use the workaround mentioned above, although for me it needs to be:

++++
<style>
include::my-custom-style.css[]
</style>
++++