Last modified on

Way To Build This Site

Use Tailwind CSS with Hugo

It is a good choice to build a modern website using the relatively few methods and attributes offered by Tailwind CSS.

Install Tailwind CSS inside theme directory

Tailwind CSS can be installed inside the theme directory by following the tutorial.

In step 3, src/input.css should be assets/main.css.

Then generate the css file with the following command.

npx tailwindcss -i ./assets/main.css -o ./assets/style.css --watch

Include the CSS file

Use the css file generated by tailwind in the head partial.

<head>
    {{ $style := resources.Get "style.css" }}
    <link rel="stylesheet" href="{{ $style.RelPermalink }}">
</head>

resources.Get see Find Resources in /assets.

Install plugin

The final step is to install the typography plugin so that we can easily format the document.

AsciiDoc

Markdown is not very expressive, AsciiDoc is a good complement. Asciidoctor is a fast text processor & publishing toolchain for AsciiDoc.

Enable execution privilege

[security.exec]
allow = ['^dart-sass-embedded$', '^go$', '^npx$', '^postcss$', '^asciidoctor$']

Diagram in Asciidoc

gem install asciidoctor-diagram

[markup.asciidocExt]
extensions = ['asciidoctor-diagram']
workingFolderCurrent = true

Math

AsciiDoctor’s native STEM support requires MathJax, so it’s better to just use the faster Katex.

Add Katex script and css to HTML head.

Pass through LaTeX express in asciidoc:

++++
\[
\log_3 12y
\]
++++

April seriously wondered about +\(\sim ABC+1\)+ her sleeping partner choices.

Way to use AsciiDoctor native STEM

  1. Add MathJax scripts to the head
  2. Enable in config 
    [markup.asciidocExt.attributes]
stem = 'latexmath'

Source highlight

Using AsciiDoctor’s native code highlighting requires an additional Javascript library, so I chose to use Hugo’s directly.

Highlighting of Hugo also requires pass through in Asciidoc.

Way to use AsciiDoctor native source highlight

  1. Add highlight.js to the head

Reference