@xprng/markdown

An image like (with src attribute) component to load and render markdown code.

Installation

npm install @xprng/markdown marked shiki

The package peer-depends on marked for parsing markdown, Shiki for syntax highlighting, and Angular.

Usage

import { Markdown } from "@xprng/markdown";

Binding markdown code

<xpr-markdown content="# Markdown" />
<xpr-markdown [content]="markdownContent" />

Loading markdown from a URL

<xpr-markdown src="https://example.com/README.code" />
<xpr-markdown [src]="markdownUrl" />

Nested state components

You can use nested components to display loading and error states.

<xpr-markdown src="https://example.com/README.code">
  <xpr-loading-state>loading...</xpr-loading-state>
  <xpr-error-state>error loading markdown</xpr-error-state>
</xpr-markdown>

The state components are imported from the @xprng/common package.

Highlighted content blocks

See @xprng/content for more details about languages and themes supported.

Set a theme on a component:

<xpr-markdown src="https://example.com/README.code" theme="github-dark" />