https://github.com/mariotoffia/htmx-extensions
Repository for htmx extensions such as asciidoctor rendering
https://github.com/mariotoffia/htmx-extensions
asciidoc asciidoctor extension htmx htmx-extension javascript
Last synced: 7 months ago
JSON representation
Repository for htmx extensions such as asciidoctor rendering
- Host: GitHub
- URL: https://github.com/mariotoffia/htmx-extensions
- Owner: mariotoffia
- License: apache-2.0
- Created: 2024-10-03T05:05:01.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-10T06:57:13.000Z (12 months ago)
- Last Synced: 2025-03-15T14:23:31.947Z (7 months ago)
- Topics: asciidoc, asciidoctor, extension, htmx, htmx-extension, javascript
- Language: JavaScript
- Homepage:
- Size: 13.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.adoc
- License: LICENSE
Awesome Lists containing this project
README
= htmx-extensions
Repository for my htmx extensions
== htmx-asciidoc
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.
[source,html]
----
Load AsciiDoc
----
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_.
[source,html]
----
// <1>
// <2>
// <3>
----
<1> Add some default _asciidoc_ styles.
<2> Since it is a _HTMX_ extension, load it after _HTMX_ itself.
<3> 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.
=== Custom Asciidoctor Binding
You may publish the Asciidoctor instance on the window object, the _htmx-asciidoc_ extension will pick this up first. Then it will try to find the 3.x style asciidoc module, lastly the 2.x style global _Asciidoctor_ object.