Marked

Parse a string as markdown

This component is still under development. Please only use the snippets provided below to avoid breaking changes.

View the official docs here

The Marked component utilized the Marked js library to parse text as markdown. An inline property is available if you don’t wish to generate <p> tags.

Examples

Basic Example (block)

bold italic styles generated by markdown, a <p> tag is generated for each <Marked> component

Astro file

---
import { Marked } from 'astro-bootstrap';
const string = 'a `<p>` tag is generated for each `<Marked>` component';
---
<Marked inline>**bold** *italic* styles generated by markdown,</Marked>
{' '}
<Marked inline set:html={string}></Marked>

Inline parsing

No <p> tag generation.

bold italic styles generated by markdown, no <p> tag is generated

Astro file

---
import { Marked } from 'astro-bootstrap';
const string = 'no `<p>` tag is generated';
---

<p>
  <Marked inline>**bold** *italic* styles generated by markdown,</Marked>
  {' '}
  <Marked inline set:html={string} />
</p>

API

Marked

import { Marked } from 'astro-bootstrap'

Name	Type	Default	Description
children ^required	string		The code which will be parsed as markdown. A string variable must be parsed as unsafe HTML using `set:html`
inline	boolean		Enabled inline parsing, which disabled the generation of `<p>` tags.