mirror of
https://github.com/jambonz/next-static-site.git
synced 2026-10-18 01:14:19 +00:00
120 lines
2.9 KiB
Plaintext
120 lines
2.9 KiB
Plaintext
# Markdown and React
|
|
|
|
You can write normal `.md` files or the more powerful `.mdx` format.
|
|
|
|
Use [MDX](https://mdxjs.com/about) to import and use React components inside your Markdown file:
|
|
|
|
```markdown
|
|
import Callout from 'nextra-theme-docs/callout'
|
|
|
|
### Markdown With React Components
|
|
|
|
<Callout emoji="✅">
|
|
**MDX** (the library), at its core, transforms MDX (the syntax) to JSX.
|
|
It receives an MDX string and outputs a _JSX string_. It does this by parsing
|
|
the MDX document to a syntax tree and then generates a JSX document from that tree.
|
|
</Callout>
|
|
```
|
|
|
|
Generates:
|
|
|
|
import Callout from 'nextra-theme-docs/callout'
|
|
|
|
### Markdown With React Components
|
|
|
|
<Callout emoji="✅">
|
|
**MDX** (the library), at its core, transforms MDX (the syntax) to JSX.
|
|
It receives an MDX string and outputs a _JSX string_. It does this by parsing
|
|
the MDX document to a syntax tree and then generates a JSX document from that tree.
|
|
</Callout>
|
|
|
|
## List
|
|
|
|
1. one
|
|
2. two
|
|
3. three
|
|
|
|
- one
|
|
- two
|
|
- three
|
|
|
|
---
|
|
|
|
# **Hello**, This Is a _Title_ Inside `h1`
|
|
## **Hello**, This Is a _Title_ Inside `h2`
|
|
### **Hello**, This Is a _Title_ Inside `h3`
|
|
#### **Hello**, This Is a _Title_ Inside `h4`
|
|
##### **Hello**, This Is a _Title_ Inside `h5`
|
|
###### **Hello**, This Is a _Title_ Inside `h6`
|
|
|
|
## Code Highlighting
|
|
|
|
Code highlighting with focused lines using
|
|
|
|
````markdown
|
|
```jsx highlight=2,3
|
|
function App() {
|
|
// these 2 lines will be highlighted
|
|
return <App>My JSX Code</App>
|
|
}
|
|
```
|
|
````
|
|
|
|
```jsx highlight=4,8
|
|
import useSWR from 'swr'
|
|
|
|
function Profile() {
|
|
const { data, error } = useSWR('/api/user', fetcher)
|
|
|
|
if (error) return <div>failed to load</div>
|
|
if (!data) return <div>loading...</div>
|
|
return <div>hello {data.name}!</div>
|
|
}
|
|
```
|
|
|
|
Inline code: `let x = 1`.
|
|
Multiple lines: `x += 1`.
|
|
|
|
## Blockquote
|
|
|
|
> Where some people measure progress in answers-right per test or tests-passed per year, we are more interested in Sistine-Chapel-Ceilings per Lifetime.
|
|
>
|
|
> — Alan Kay, A Personal Computer for Children of All Ages
|
|
|
|
And nested quotes:
|
|
|
|
> > Where some people measure progress in answers-right per test or tests-passed per year, we are more interested in Sistine-Chapel-Ceilings per Lifetime.
|
|
> >
|
|
> > — Alan Kay, A Personal Computer for Children of All Ages
|
|
>
|
|
> This is **great**.
|
|
>
|
|
> — Shu Ding.
|
|
|
|
## Table
|
|
|
|
| Syntax | Description | Test Text |
|
|
| :--- | :----: | ---: |
|
|
| Header | Title | Here's this |
|
|
| Paragraph | Text | And more |
|
|
| Strikethrough | | ~~Text~~ |
|
|
|
|
With `next/image`:
|
|
|
|
import Image from 'next/image'
|
|
|
|
| Image |
|
|
| :--- |
|
|
| <Image src="/og.png" alt="Nextra" width={1536/2} height={768/2} layout="intrinsic"/> |
|
|
| `<Image src="/og.png" alt="Nextra" width={1536/2} height={768/2} layout="intrinsic"/>` |
|
|
|
|
## Task List
|
|
|
|
- [x] Write the press release
|
|
- [ ] Update the website
|
|
- [ ] Contact the media
|
|
|
|
---
|
|
|
|
Click the "Edit this page on GitHub" link below to see the code.
|