Wiki source code of Converts from Markdown to HTML fully client-side
Last modified by Manuel Leduc on 2026/02/05 17:22
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | The snippet below presents how to parse Markdown content and convert it to HTML. | ||
| 2 | You can follow the steps mentionned in the snippet's comments. | ||
| 3 | |||
| 4 | {{code language="typescript"}} | ||
| 5 | import { Container } from "inversify"; | ||
| 6 | import type { UniAstToHTMLConverter } from "@xwiki/cristal-uniast-html"; | ||
| 7 | import type { MarkdownToUniAstConverter } from "@xwiki/rendering-uniast-markdown"; | ||
| 8 | |||
| 9 | async function markdownToHTML( | ||
| 10 | source: string, | ||
| 11 | container: Container, | ||
| 12 | ): Promise<string> { | ||
| 13 | // Mardown to uniast to html | ||
| 14 | // Step 1: resolve the markdown parser | ||
| 15 | const md = container.get<MarkdownToUniAstConverter>( | ||
| 16 | "MarkdownToUniAstConverter", | ||
| 17 | ); | ||
| 18 | |||
| 19 | // Step 2: parse the markdown to get a uniast object | ||
| 20 | const uniAst = await md.parseMarkdown(source); | ||
| 21 | |||
| 22 | if (uniAst instanceof Error) { | ||
| 23 | throw uniAst; | ||
| 24 | } | ||
| 25 | |||
| 26 | // Step 3: resolve the html serializer | ||
| 27 | const html = container.get<UniAstToHTMLConverter>("UniAstToHTMLConverter"); | ||
| 28 | // Step 4: serialize the uniast object to HTML | ||
| 29 | const toHtml = html.toHtml(uniAst); | ||
| 30 | if (toHtml instanceof Error) { | ||
| 31 | throw toHtml; | ||
| 32 | } | ||
| 33 | return toHtml; | ||
| 34 | } | ||
| 35 | {{/code}} |
