This extension allows you to include AsciiDoc files in your HTML using htmx.
|
Tip
|
💡 Run the example by cd examples/asciidoc; go run main.go and open http://localhost:8080 in your browser to test it out.
|
It will make it possible to include AsciiDoc content in your HTML using the hx-ext="asciidoc" attribute.
<body hx-ext="asciidoc">
<button
hx-get="/readme"
hx-target="#content"
asciidoc-attributes="showtitle=true,sectnums=true">
Load AsciiDoc
</button>
<div id="content"></div>
</body>When the server returns a content type of text/asciidoc, the extension will render the AsciiDoc content in the target element.
It is possible to disable the rendering of text/asciidoc content by adding the asciidoc-disable attribute to the element. Then the extension will pass-through the content to the target element un-rendered.
In order to use it, make sure that you’ve loaded asciidoctor.js and htmx-asciidoc.js in your HTML.
<head>
<link href="https://cdn.jsdelivr.net/npm/@asciidoctor/[email protected]/dist/css/asciidoctor.min.css" rel="stylesheet"> // (1)
<script src="https://cdn.jsdelivr.net/npm/@asciidoctor/[email protected]/dist/browser/asciidoctor.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/htmx.min.js"></script> // (2)
<script src="https://cdn.jsdelivr.net/gh/mariotoffia/[email protected]/asciidoc/htmx-asciidoc.js"></script> // (3)
</head>-
Add some default asciidoc styles.
-
Since it is a HTMX extension, load it after HTMX itself.
-
Make sure to load this last so it will have access to the asciidoctor object.
|
Note
|
You need to serve the asciidoctor.js file from your server (in this setup). |
If you have styles that will be affected by the asciidoc styles, you can include them using asciidoc-stylesheet attribute. It will then inline the styles by scoping them to the target element.