Markdown
Markdown lets you write markdown in .astro files. If you’re an avid markdown user, you’ll love this component.
Use Markdown directly in Astro files
No need to manually add <p> tags or convert apostrophes into quotes. Markdown does this for you automatically.
<Markdown>Don't worry, be happy!</Markdown>Don’t worry, be happy!Don’t worry, be happy!
Include paragraphs too
Markdown supports the standard Markdown syntax you expect.
If you write Markdown content with a new line between paragaphs, you will get <p> tags along with the bells and whistles you added.
<Markdown> ## This is my heading
And this is a paragraph with some **bold** text and *italics*.</Markdown><h2 id="this-is-my-heading">This is my heading</h2><p> And this is a paragraph with some <strong>bold</strong> text and <em>italics</em>.</p>This is my heading
And this is a paragraph with some bold text and italics.
No indentation woes
Your content won’t be converted into <pre> tags even if you indent 4 spaces or more. Just make sure they start with the same indentation!
<Markdown> ## This is my heading
And this is a paragraph with some **bold** text and *italics*.</Markdown><h2 id="this-is-my-heading">This is my heading</h2><p> And this is a paragraph with some <strong>bold</strong> text and <em>italics</em>.</p>This is my heading
And this is a paragraph with some bold text and italics.
Basic Usage
Markdown gives you the ability to write markdown in an .astro file.
---import { Markdown } from '@splendidlabz/astro'---<Markdown> ## Markdown Heading 2
You can write **markdown** *content* inside this component.</Markdown><h2 id="markdown-heading-2">Markdown Heading 2</h2><p> You can write <strong>markdown</strong> <em>content</em> inside this component.</p>Markdown Heading 2
You can write markdown content inside this component.
Inline Markdown Content
If you want Markdown to create content without a <p> wrapper, write your content in Markdown without a new line.
<Markdown>Hello world</Markdown>Hello worldHello world
Usage with Prettier
If you use Prettier, you’ll need to ignore the Markdown block because Prettier tends to mangle markdown content — causing them to be incorrect.
<!-- prettier-ignore --><Markdown> Paragraph 1
Paragraph 2</Markdown><!-- After prettier, without ignoring --><Markdown>Paragraph 1 Paragraph 2</Markdown>Basic Usage
Markdown gives you the ability to write markdown in an .astro file.
---import { Markdown } from '@splendidlabz/astro'---<Markdown> ## Markdown Heading 2
You can write **markdown** *content* inside this component.</Markdown><h2 id="markdown-heading-2">Markdown Heading 2</h2><p> You can write <strong>markdown</strong> <em>content</em> inside this component.</p>Markdown Heading 2
You can write markdown content inside this component.
Inline Markdown Content
If you want Markdown to create content without a <p> wrapper, write your content in Markdown without a new line.
<Markdown>Hello world</Markdown>Hello worldHello world
Usage with Prettier
If you use Prettier, you’ll need to ignore the Markdown block because Prettier tends to mangle markdown content — causing them to be incorrect.
<!-- prettier-ignore --><Markdown> Paragraph 1
Paragraph 2</Markdown><!-- After prettier, without ignoring --><Markdown>Paragraph 1 Paragraph 2</Markdown>Please purchase a license to view this content
This content is part of our premium documentation. To access it, you'll need to have an active license for one of these products.
If you already have a license, please login to access this content.
Issues with Unicode Characters
Prettier messes up the <!-- prettier-ignore --> block if you have unicode characters like emojis and emdashes before the block.
<!-- prettier-ignore --><Markdown> Markdown block that contains unicode characters 🤗</Markdown>
<!-- prettier-ignore --><Markdown> Second Markdown block.</Markdown><!-- prettier-ignore --><Markdown> Markdown block that contains unicode characters 🤗</Markdown>
<!-- prettier-ignore --><arkdown> Second Markdown block.</This issue unfortunately stems from Astro or Prettier’s formatter and there’s nothing we can do about it.
You can, however, avoid this issue by using HTML entities (like —) instead of their unicode characters. (Nothing we can do about emojis though).
Issues with Unicode Characters
Prettier messes up the <!-- prettier-ignore --> block if you have unicode characters like emojis and emdashes before the block.
<!-- prettier-ignore --><Markdown> Markdown block that contains unicode characters 🤗</Markdown>
<!-- prettier-ignore --><Markdown> Second Markdown block.</Markdown><!-- prettier-ignore --><Markdown> Markdown block that contains unicode characters 🤗</Markdown>
<!-- prettier-ignore --><arkdown> Second Markdown block.</This issue unfortunately stems from Astro or Prettier’s formatter and there’s nothing we can do about it.
You can, however, avoid this issue by using HTML entities (like —) instead of their unicode characters. (Nothing we can do about emojis though).
Please purchase a license to view this content
This content is part of our premium documentation. To access it, you'll need to have an active license for one of these products.
If you already have a license, please login to access this content.