块

您可以使用特殊语法装饰 Markdown 元素，Code Hike 会将它们转换为对象并作为属性传递给您的组件。

这让您可以为 Markdown 内容添加结构，然后使用 React 组件以任何您想要的方式渲染它。

content.mdx

import { MyComponent } from "./my-component"

<MyComponent>

The two towers

## !mordor Barad-dûr

The Dark Tower

Sauron's fortress

## !isengard Orthanc

Saruman's stronghold

</MyComponent>

my-component.jsx

export function MyComponent(props) {
props = {
  children: <p>The two towers</p>,
  mordor: {
    title: "Barad-dûr",
    children: (
      <>
        <p>The Dark Tower</p>
        <p>Sauron's fortress</p>
      </>
    ),
  },
  isengard: {
    title: "Orthanc",
    children: <p>Saruman's stronghold</p>,
  },
}
  ...
}

Code Hike transforming decorated markdown into props

第一个标题开头的 !mordor 装饰器告诉 Code Hike 将此标题与下一个 !isengard 标题之间的内容分组。该内容组成为一个块对象，您可以在组件中使用它。

图片、代码块和段落

除了标题之外，您还可以为图片、代码块和段落添加 ! 装饰器。

content.mdx

import { MyComponent } from "./my-component"

<MyComponent>

The Fellowship of the Ring

!author Tolkien

![!cover Gandalf](/gandalf.jpg "a wizard")

```js !riddle mellon.js
speak("friend")
```

## !moria western gate

Speak, friend, and enter

</MyComponent>

my-component.jsx

export function MyComponent(props) {
props = {
  children: <p>The Fellowship of the Ring</p>,
  author: "Tolkien",
  cover: {
    alt: "Gandalf",
    url: "/gandalf.jpg",
    title: "a wizard",
  },
  riddle: {
    lang: "js",
    meta: "mellon.js",
    value: 'speak("friend")',
  },
  moria: {
    title: "western gate",
    children: <p>Speak, friend, and enter</p>,
  },
}
  ...
}

Decorated paragraphs, images, and codeblocks

列表

您可以使用 !! 而不是 ! 来将具有相同装饰器的所有块列在一个数组中。

content.mdx

import { MyComponent } from "./my-component"

<MyComponent>

The Brandybuck Brunch

## !!breakfasts first

Grilled mushrooms

## !!breakfasts second

Apple pancakes

</MyComponent>

my-component.jsx

export function MyComponent(props) {
props = {
  children: <p>The Brandybuck Brunch</p>,
  breakfasts: [
    {
      title: "first",
      children: <p>Grilled mushrooms</p>,
    },
    {
      title: "second",
      children: <p>Apple pancakes</p>,
    },
  ],
}
  ...
}

Using !! for lists

这同样适用于图片、代码块和段落。

嵌套

您可以使用不同级别的标题来创建嵌套块。

content.mdx

import { MyComponent } from "./my-component"

<MyComponent>

The Rings of Power

## !master

The One Ring

### !!rings Elves

Three rings

### !!rings Dwarves

Seven rings

### !!rings Men

Nine rings

</MyComponent>

my-component.jsx

export function MyComponent(props) {
props = {
  children: <p>The Rings of Power</p>,
  master: {
    title: "",
    children: <p>The One Ring</p>,
    rings: [
      {
        title: "Elves",
        children: <p>Three rings</p>,
      },
      {
        title: "Dwarves",
        children: <p>Seven rings</p>,
      },
      {
        title: "Men",
        children: <p>Nine rings</p>,
      },
    ],
  },
}
  ...
}

Using header levels for nesting

模式验证

您可以使用 zod 模式来验证来自 MDX 的内容。

npm install zod

这有两个好处：

类型安全的 Markdown：如果内容与模式不匹配，您会看到错误
更好的工具支持：您将在编辑器中获得自动完成和类型检查

content.mdx

import { MyComponent } from "./my-component"

<MyComponent>

The Fellowship of the Ring

!author Tolkien

![!cover Gandalf](/gandalf.jpg "a wizard")

```js !riddle mellon.js
speak("friend")
```

## !!breakfasts first

Grilled mushrooms

## !!breakfasts second

Apple pancakes

</MyComponent>

my-component.tsx

import { z } from "zod"
import {
  parseProps, Block, CodeBlock, ImageBlock
} from "codehike/blocks"

const Schema = Block.extend({
  author: z.string(),
  cover: ImageBlock.optional(),
  riddle: CodeBlock,
  breakfasts: z.array(Block),
})

export function MyComponent(props) {
  const data = parseProps(props, Schema)
const data: {
  title: string
  children?: ReactNode
  author: string
  cover?: {
    alt: string
    url: string
    title: string
  }
  riddle: {
    lang: string
    meta: string
    value: string
  }
  breakfasts: {
    title: string
    children?: ReactNode
  }[]
}
  ...
}

Using schemas for markdown validation and typing

根级块

您可以直接在 Markdown/MDX 文件的根级使用装饰元素。

content.md

The Brandybuck Brunch

## !!breakfasts first

Grilled mushrooms

## !!breakfasts second

Apple pancakes

page.jsx

import { parseRoot } from "codehike/blocks"
import MDX from "./content.md"

const Schema = Block.extend({
  breakfasts: z.array(Block),
})

export default function Page() {
  const data = parseRoot(MDX, Schema)
  ...
}

Using decorated elements in plain markdown

组件块

即将推出

示例

代码工具提示示例展示了如何在组件级别使用块。

滚动编码示例展示了如何在页面级别使用块进行布局。