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

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

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

Instead the highlighters that are supported are Shiki and Prism.

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

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"]
        }


   }