Configure Asciidoctor

#1 Get Asciidoctor CSS

Choose a skin you like here

Then go to the css directory of the asciidoctor-skins project and click on the skin you liked.

Click on Raw button

get raw css

  • Save the file in mysite/static/css/asciidoctor.css

#2 Add Asciidoctor CSS to header

Adding Custom CSS

Refer to theme instructions such as theme documentation for instructions how to add custom css, the instructions are in the Add Custom CSS section. If there are no instructions, the CSS will have to be added manually.

To add CSS manually, go to the project root and:

cp themes/my-theme/layouts/partials/head.html layouts/partials/

Open up the layouts/partials/head.html, look for lines that include the css and below add:

1
2
  <link rel="stylesheet" href="{{"css/asciidoctor.css" | absURL}}">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

For example, adding the custom css to the head.html file of the Liva Hugo theme looks like this:

16
17
18
19
20
21
22
23
24
25
  {{ "<!-- Main Stylesheet -->" | safeHTML }}
  {{ $styles := resources.Get "scss/style.scss" | toCSS | minify }}
  <link rel="stylesheet" href="{{ $styles.Permalink }}" media="screen">

  <link rel="stylesheet" href="{{"css/asciidoctor.css" | absURL}}"> (1)
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> (2)

  {{ "<!--Favicon-->" | safeHTML }}
  <link rel="shortcut icon" href="{{ `images/favicon.png` | absURL }} " type="image/x-icon">
  <link rel="icon" href="{{ `images/favicon.png` | absURL }} " type="image/x-icon">
1Custom CSS
2Font Awesome

#3 Add Asciidoc Page

Asciidoctor Documentation

Generate a new asciidoc document:

$ hugo new hello-asciidoc.adoc

Edit the content/hello-asciidoc.adoc as follows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
---
title: "Hello Asciidoc"
date: 2020-11-19T05:52:40-05:00
draft: true

categories:
    - "category1"
tags:
    - "tag1"
    - "tag2"
---

= Hello Asciidoc
<no value>
2020-11-19

Hello World!

NOTE: this is a note and it should look cool

WARNING: this is a warning and it should look serious

The content should look something likt this:

Admonitions

← Install Asciidoctor | Index | Install SvgBob