Markdown Text

Markdown text is supported in the AnnotatedText component. You can use the MarkdownTextAdapter to render plain text.

The positions of the annotations are based on the absolute text, so markdown is stripped out when calculating the positions of the annotations.

f.e. abc **test** def will have the annotation on the text test at position 4-8.

Internally it uses markdown-it to format the text, so you can use all the features of markdown-it to format the text.

Use

import { createAnnotatedText, MarkdownTextAdapter } from "@ghentcdh/annotated-text";

const textAnnotation = createAnnotatedText(id,
  {
    lineAdapter: MarkdownTextAdapter(),
  })
  .setLines(plainText.lines)
  .setAnnotations(plainText.annotations);

Example

The original text, rendered as flat text:

Rendered as markdown text: