blob: 666e0557f7d124f4e46bc85b46dc9239b4837719 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
---
import { Markdown } from 'astro/components';
import Layout from '../layouts/main.astro';
import ReactCounter from '../components/ReactCounter.jsx';
import PreactCounter from '../components/PreactCounter.tsx';
import VueCounter from '../components/VueCounter.vue';
import SvelteCounter from '../components/SvelteCounter.svelte';
const title = 'Astro Markdown';
const variable = 'content';
const items = ['A', 'B', 'C'];
---
<Layout content={{ title }}>
<Markdown>
# Introducing {title}
**Astro Markdown** brings native Markdown support to HTML!
> It's inspired by [`MDX`](https://mdxjs.com/) and powered by [`remark`](https://github.com/remarkjs/remark).
The best part? It comes with all the Astro features you expect.
[Other example](./other)
## Embed framework components
<ReactCounter:visible />
<PreactCounter:visible />
<VueCounter:visible />
<SvelteCounter:visible />
## Use Expressions
You can use any {variable} in scope and use JavaScript for templating ({items.join(', ')})
## Oh yeah...
<ReactCounter:visible>
🤯 It's also _recursive_!
### Markdown can be embedded in any child component
</ReactCounter:visible>
## Code
Should work!
```js
import Something from './another';
const thing = new Something();
```
</Markdown>
</Layout>
|