npm install svelte-asciidocThis library takes a blob of AsciiDoc text renders it as a collection of Svelte components that can be customized. Similar to https://github.com/oxidecomputer/react-asciidoc and https://github.com/pablo-abc/svelte-markdown (but don’t use Markdown ever again in your life, please, use just AsciiDoc).
<script>
import SvelteAsciidoc from 'svelte-asciidoc'
</script>
<div>
<SvelteAsciidoc
source={`
= hello world
this is _some_ *asciidoc* text^2^!
`}
/>
</div>Now suppose you want to make bold text also look bluey. Create a new component CustomBold.svelte:
<strong style="color: blue"><slot /></strong>and then pass it to SvelteAsciidoc:
<script>
import SvelteAsciidoc from 'svelte-asciidoc'
+import CustomBold from './CustomBold.svelte'
</script>
<div>
<SvelteAsciidoc
+ naturalRenderers: {strong: CustomBold}
source={`
= hello world
this is _some_ *asciidoc* text^2^!
`}
/>
</div>You can also apply the default asciidoctor.css stylesheet and it should work with the default classes this library generates.
See src/routes/+page.svelte for another usage example.
See src/lib/renderers for all higher-level customizable components and their default implementations (these must be specified with the parameter customRenderers={}, while naturalRenderers={} is for simple stuff like a, em, sup, sub, strong).