@lukekaalim/act-markdown

A component library that parses markdown syntax via remark and renders it to html elements in @lukekaalim/act.

⚠️ Security

While obviously theres no intentional way to execute code from markdown, this library is not equipped to handle arbitrary, malformed or (in general) user-generated markdown. It's intended to be fed known and developer-written strings.

This library performs no sanitisation. Use at your own risk.

Install

npm install @lukekaalim/act-markdown

Features

@lukekaalim/act-markdown supports the following markdown features:

• [X] CommonMark
• [ ] Github Flavored Markdown (GFM)
  • [X] Checkboxes
  • [ ] Everything else
• [X] Directives proposal

It does not support:

• Embedded HTML elements

Usage

::::api{name=MarkdownRenderer}

:::type

{
  type: "expression",
  expression: {
    type: "opaque",
    name: "Component",
    referenceURL: "/concepts#Component",
    genericArguments: [
      { type: "object", entries: [
        { key: "markdownText", value: { type: "opaque", name: "string" } },
        { key: "directiveComponents", optional: true, value: { type: "object", entries: [
          { key: "[directiveKey: string]", value: { type: "opaque", name: "Component", referenceURL: "/concepts#Component", genericArguments: [
            { type: "object", entries: [
              { key: "node", value: { type: "opaque", name: "MarkdownASTNode", referenceURL: "https://github.com/syntax-tree/mdast", } }
            ] }
          ] } }
        ] } }
      ] }
    ]
  }
}

:::

import { MarkdownRenderer } from '@lukekaalim/act-markdown';

const markdownText = `
# Heading

This is my first paragraph! Lorum Ipsum or whatever.

![MyCoolPicture](http://example.com/image.jpg)
`

const ExampleComponent = () => {
  return h(MarkdownRenderer, { markdownText })
};

::::