Markdown
MDX
Nextraでは、pagesディレクトリ下のすべての.mdxファイルはMDXでレンダリングされます。これは、Reactコンポーネントをサポートする高度なMarkdown形式です。
例えば、このようにMDXファイル内でReactコンポーネントをインポートして使用できます。
MDX
## Hello MDX
import { useState } from 'react'
export function Counter({ children }) {
const [count, setCount] = useState(0)
return (
<button onClick={() => setCount(prev => prev + 1)}>
{children}
{count}
</button>
)
}
<Counter>**Clicks**: </Counter>生成されるもの
基本的なMDXに加えて、Nextraにはいくつかの高度なMarkdown機能も組み込まれています。
GitHub Flavored Markdown
GFMは、GitHubが作成したMarkdownの拡張機能で、取り消し線、タスクリスト、テーブルなどのサポートが追加されています。
取り消し線
削除済み
Markdown
~~removed~~タスクリスト
- プレスリリースを作成する
- ウェブサイトを更新する
- メディアに連絡する
Markdown
- [x] Write the press release
- [ ] Update the website
- [ ] Contact the mediaテーブル
| 構文 | 説明 | テストテキスト |
|---|---|---|
| ヘッダー | タイトル | ここにこれがあります |
| 段落 | テキスト | などなど |
| 取り消し線 |
Markdown
| Syntax | Description | Test Text |
| :------------ | :---------: | ----------: |
| Header | Title | Here's this |
| Paragraph | Text | And more |
| Strikethrough | | ~~Text~~ |自動リンク
https://nextjs.dokyumento.jpにアクセスしてください。
Visit https://nextjs.dokyumento.jp.カスタム見出し ID
フォーマット## 見出し [#カスタム-id]を使ってカスタム見出しIDを指定できます。例えば
Markdown
## Long heading about Nextra [#about-nextra]この例では、デフォルトの#long-heading-about-nextraの代わりに、#about-nextraが見出しリンクとして使用されます。