Astro External Link Component

Astro External Link Component .

Requires @astro/mdx to add components.

---
const props = Astro.props;
---
<a href={props.href} target='_blank' rel='noopener'>
  <slot />
</a>

note: TODO add class prop.

Heading Tags

H1 heading

H2 heading

H3 heading

H4 heading

H5 heading

H6 heading

# h1 heading

## h2 heading

### h3 heading

#### h4 heading

##### h5 heading

###### h6 heading

Inline Code

<code>

`<code>`

Anchor Links

Emojis!

[Emojis!](https://emojipedia.org/)

Link with title attribute

[Link with title attribute](https://www.google.com "Google's Homepage")

Footnote

Here’s a sentence with a footnote. ¹

[^1]

The footnote corresponds to the bottom of the page.

Paragraph Title

Lorem ipsum dolor 💀 sit amet, consectetur adipiscing elit. Aenean luctus eu turpis sed bibendum. Suspendisse potenti. Praesent finibus quam ac eros tincidunt cursus. Nunc lacus leo, elementum vel finibus eu, aliquet quis odio. Proin semper libero eget maximus ullamcorper. Nunc malesuada felis lacus, a posuere libero porttitor viverra. Aenean molestie neque efficitur quam dapibus, eget placerat metus maximus. In vulputate elit eget dui vestibulum elementum.

Phasellus id erat risus H2O. Praesent ullamcorper tortor sed ipsum vehicula fermentum. Curabitur id pellentesque libero, sed malesuada nisl. Pellentesque eleifend tempor condimentum. Integer massa magna, iaculis et lectus sed, convallis elementum massa. Pellentesque a gravida elit. Phasellus iaculis sem et commodo feugiat.

Italic

_Lorem ipsum_

Bold

**consectetur adipiscing**

Strikethrough

~~posuere~~

or?

H~2~O

Blockquote

This is a blockquote This is a blockquote This is a blockquote This is a blockquote

> This is a blockquote
> This is a blockquote
> This is a blockquote
> This is a blockquote

Ordered List

1. Ordered List
2. Ordered List
3. Ordered List
4. Ordered List

note: This is not the default browser style for <ol></ol>.

1. Ordered List
1. Ordered List
1. Ordered List
1. Ordered List

Unordered List

• Unordered List
• Unordered List
  • Unordered List
  • Unordered List

- Unordered List
- Unordered List
  - Unordered List
  - Unordered List

or

* Unordered List
* Unordered List
  * Unordered List
  * Unordered List

Table

| Syntax    | Description |
| --------- | ----------- |
| Header    | Title       |
| Paragraph | Text        |

note: TODO - style the default table and add resssssponsivenessssss.

Horizontal Rule

---

Code Fence

```js
{
    "firstName": "John",
    "lastName": "Smith",
    "age": 25
}
```

If you want to code fence a code fence you have to add more code fence to the code fence.

Term Definition List

term: definition

That doesn’t seem to work?

Checklist [markdown thing]

• Write the press release
• Update the website
• Contact the media

- [x] Write the press release
- [x] Update the website
- [ ] Contact the media

Corresponding Footnote

[^1]: This is the footnote.

Somehow the code fence and the display flipped. I think the markdown places it at the bottom of the page.