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!

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>

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>

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>

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 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 login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.

Issues with Unicode Characters

Prettier messes up the  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 login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.