blob: b6843f3a58c54e58a0a458c1927878cfdadac0da (
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
57
58
59
60
61
62
63
|
---
// Component Imports
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';
// Component Script:
// You can write any JavaScript/TypeScript that you'd like here.
// It will run during the build, but never in the browser.
// All variables are available to use in the HTML template below.
const title = 'Astro Markdown';
const variable = 'content';
const items = ['A', 'B', 'C'];
// Full Astro Component Syntax:
// https://github.com/snowpackjs/astro/blob/main/docs/core-concepts/astro-components.md
---
<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 client:visible />
<PreactCounter client:visible />
<VueCounter client:visible />
<SvelteCounter client:visible />
## Use Expressions
You can use any {variable} in scope and use JavaScript for templating ({items.join(', ')})
## Oh yeah...
<ReactCounter client:visible>
🤯 It's also _recursive_!
### Markdown can be embedded in any child component
</ReactCounter>
## Code
Should work!
```js
import Something from './another';
const thing = new Something();
```
</Markdown>
</Layout>
|
