CODEWITHSUNDEEP
asciidocasciidoctorspring-restdocs
Dark
Dark

Reputation: 209

How to add stylesheet CDN on asciidoc?

Is it possible to do this in AsciiDoc? I tried to stylize it using bootstrap CSS:

:stylesheet:
https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css

Upvotes: 2

Views: 1969

Answers (3)

Jean Le Roi
Jean Le Roi

Reputation: 1

The solution described here https://afikri.de/howto#:~:text=How%20to%20add%20stylesheet%20CDN%20in%20asciidoc worked for me:

When generating HTML content with ASCIIDoc, the CSS is either added to the HTML file itself or in a separate file that can be loaded into the HTML file using the link-ref tag. However, this approach can lead to performance problems, since in most cases the generated CSS file is relatively large (about 30 KB and in most cases is significantly larger than the original file). Fortunately, asciidoc hosted the CSS file on a Content Delivery Network (CDN) server:

https://cdn.jsdelivr.net/gh/asciidoctor/[email protected]/data/stylesheets/asciidoctor-default.css To add the link automatically to the generated HTML file, you need to generate the file info docinfo.html with this content:

docinfo.html

And add this document attribute to your asciidoc file:

:docinfo: shared-head Note: The docinfo.html file should be located in the same folder as your adoc file.

Here an example: .mydoc.adoc

= How-To :author: Ahmed Fikri :docinfo: shared-head

== Spring Boot

=== Configuration

==== How to Change the Default Port in Spring Boot ...... Then you generate the HTML file with this command:

asciidoctor -a stylesheet! mydoc.adoc

Upvotes: 0

eMPee584
eMPee584

Reputation: 2054

As I just learned from https://stackoverflow.com/a/29456923/200509 , asciidoc has a passthrough block functionality which allows to insert snippets of raw HTML, i.e. CSS or JS code or references, into the rendered output. Accordingly, putting this somewhere in your .adoc file should work:

++++
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
++++

Upvotes: 2

ahus1
ahus1

Reputation: 5932

The attribute :stylesheet: works with local files only.

You can write a local CSS style.css and then include it in your doc.adoc like this. 

// style.css
@import "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css";

// doc.adoc
:stylesheet: style.css

To make the result look pretty, you'll still need to write more CSS to match the classes the Asciidoctor HTML output uses.

The following page might help you: https://asciidoctor.org/docs/produce-custom-themes-using-asciidoctor-stylesheet-factory/

Upvotes: 3

Related Questions