Guide / structured HTML

kotlinx.html renderer

Syntax extensions that create custom nodes need corresponding kotlinx.html adapters.

Artifact: io.heapy.kotmark:kotmark-renderer-kotlinx-html:0.1.0
Package: io.heapy.kotmark.renderer.kotlinxhtml

Render into an article

Compose an article with adapters

import io.heapy.kotmark.ext.gfm.tables.tables
import io.heapy.kotmark.ext.math.math
import io.heapy.kotmark.extensions
import io.heapy.kotmark.parser.parser
import io.heapy.kotmark.renderer.kotlinxhtml.adapters.mathAdapter
import io.heapy.kotmark.renderer.kotlinxhtml.adapters.tablesAdapter
import io.heapy.kotmark.renderer.kotlinxhtml.kotlinxHtmlRenderer
import kotlinx.html.article
import kotlinx.html.h1
import kotlinx.html.stream.createHTML

fun renderArticle(title: String, markdown: String): String {
    val extensions = extensions {
        math()
        tables()
    }
    val parser = parser { extensions(extensions) }
    // Each syntax extension needs its matching adapter on the renderer side.
    val renderer = kotlinxHtmlRenderer { adapters(mathAdapter(), tablesAdapter()) }
    val document = parser.parse(markdown)
    return createHTML(prettyPrint = false).article {
        h1 { +title }
        renderer.render(document, this)
    }
}

INPUT · Markdown

Inline $x^2$.

| a | b |
| - | - |
| 1 | 2 |

OUTPUT · HTML

<article><h1>Notes</h1><p>Inline <span class="math math-inline">x^2</span>.</p><table><thead><tr><th>a</th><th>b</th></tr></thead><tbody><tr><td>1</td><td>2</td></tr></tbody></table></article>

Adapter coverage

Core nodes have built-in support. For extension nodes, pass the matching adapter to kotlinxHtmlRenderer; an unhandled custom node is not silently converted to raw HTML.