Skip to content
For Astro

Styling

When using @forastro/asciidoc The HTML that is extracted from each page is below the <body>. This means that they are unstyled by default. Which means you must bring your own stylesheet. When it comes to supporting styles. TailwindCSS and UnoCSS are supported.

TailwindCSS

Section titled “TailwindCSS”

To use TailwindCSS all you need to do is import the tailwindAsciidocTypography from @forastro/asciidoc/tailwind. Into your tailwind config file.

import { tailwindAsciidocTypography } "@forastro/asciidoc/tailwind"


export default {
    plugins: [
        tailwindAsciidocTypography
    ]
}

UnoCSS

Section titled “UnoCSS”

To use UnoCSS all you need to do is import the presetAsciidocTypography from @forastro/asciidoc/unocss. Into your unocss config file.

import { presetAsciidocTypography } "@forastro/asciidoc/unocss"


export default {
    plugins: [
        presetAsciidocTypography
    ]
}

Syntax highlighting

Section titled “Syntax highlighting”

Instead the highlighters that are supported are Shiki and Prism.

Shiki

Section titled “Shiki”

To configure Shiki you set the attributes.sourceHighlighter to shiki. When you do you can configure the theme by doing attributes.shikiTheme. You will be forced to do a light and dark mode theme. When using it all languages are enabled. The names must be different.

   export default {
        attributes: {
            sourceHighlighter: "shiki",
            shikiTheme: {
                light: "nord",
                dark: "dracula"
            }
        }


   }

Prism

Section titled “Prism”

To configure Shiki you set the attributes.sourceHighlighter to prism. When you do you can configure the languages by doing attributes.prismLanguages.

   export default {
        attributes: {
            sourceHighlighter: "prism",
            prismLanguages: ["clike", "toml"]
        }


   }