代码示例

这些是您可以使用 Code Hike 构建的代码块组件示例。

您可以在每个示例页面中找到说明和实现。请随意复制、粘贴、修改和组合它们，为您的项目创建完美的代码块。

标注

在代码块内添加标注。

content.md

```js
const lorem = ipsum(dolor, sit)
// !callout[/amet/] This is a callout
const [amet, consectetur] = [0, 0]
lorem.adipiscing((sed, elit) => {
  if (sed) {
    amet += elit
  }
})
```

const lorem = ipsum(dolor, sit)
const [amet, consectetur] = [0, 0]
This is a callout
lorem.adipiscing((sed, elit) => {
  if (sed) {
    amet += elit
  }
})

See 标注 implementation.

类名

为代码片段添加类名。

content.md

```js
function lorem(ipsum, dolor = 1) {
  // !className line-through
  const sit = ipsum == null ? 0 : ipsum.sit
  dolor = sit - amet(dolor)
  // !className[/sit/] bg-red-700 rounded-lg px-1
  return sit ? consectetur(ipsum) : []
}
```

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit
  dolor = sit - amet(dolor)
  return sit ? consectetur(ipsum) : []
}

See 类名 implementation.

代码提及

悬停文本时高亮相应的代码。

content.mdx

<HoverContainer>

The [base case](hover:one) returns 1.

```cpp
int factorial(int n) {
  if (n == 0) {
    // !hover one
    return 1;
  } else {
    // !hover two
    return n * factorial(n - 1);
  }
}
```

The [recursive case](hover:two) multiplies something.

</HoverContainer>

The base case returns 1.

int factorial(int n) {
  if (n == 0) {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
}

The recursive case multiplies something.

悬停提及内容

See 代码提及 implementation.

收起

折叠和展开代码块。

content.md

```js
// !collapse(1:4)
function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : 1
  dolor = sit - amet(dolor)
  return sit ? consectetur(ipsum) : []
}

// !collapse(1:4) collapsed
function ipsum(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : 1
  dolor = sit - amet(dolor)
  return sit ? consectetur(ipsum) : []
}
```

  const sit = ipsum == null ? 0 : 1
  dolor = sit - amet(dolor)
  return sit ? consectetur(ipsum) : []
}

}

点击函数签名来收起/展开函数内容

See 收起 implementation.

复制按钮

为代码块添加复制按钮。

content.md

```js
function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit
  dolor = sit - amet(dolor)
  return sit ? consectetur(ipsum) : []
}
```

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit
  dolor = sit - amet(dolor)
  return sit ? consectetur(ipsum) : []
}

See 复制按钮 implementation.

差异

显示插入和删除的行。

content.md

```js
function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit
  // !diff -
  dolor = ipsum - sit
  // !diff +
  dolor = sit - amet(dolor)
  return sit ? consectetur(ipsum) : []
}
```


function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit
-
  dolor = ipsum - sit
+
  dolor = sit - amet(dolor)
  return sit ? consectetur(ipsum) : []
}

See 差异 implementation.

文件名

在代码块中显示标题或文件名。

content.md

```js index.js
function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : 1
  dolor = sit - amet(dolor)
  return sit ? consectetur(ipsum) : []
}
```

index.js

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : 1
  dolor = sit - amet(dolor)
  return sit ? consectetur(ipsum) : []
}

See 文件名 implementation.

焦点

聚焦代码块。使未聚焦的代码变暗。确保在溢出时聚焦的代码可见。

当您想要根据用户的交互改变代码块焦点时很有用。

content.md

```js
function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit
  dolor = sit - amet(dolor)
  return sit ? consectetur(ipsum) : []
}

function ipsum(ipsum, dolor = 1) {
  return dolor
}

// !focus(1:5)
function dolor(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit
  dolor = sit - amet(dolor)
  return sit ? consectetur(ipsum) : []
}
```

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit
  dolor = sit - amet(dolor)
  return sit ? consectetur(ipsum) : []
}

function ipsum(ipsum, dolor = 1) {
  return dolor
}

function dolor(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit
  dolor = sit - amet(dolor)
  return sit ? consectetur(ipsum) : []
}

You can also change the focus annotations on a rendered codeblock:

See 焦点 implementation.

折叠

折叠内联内容。

content.md

```jsx
// !fold[/className="(.*?)"/gm]
function Foo() {
  return (
    <div className="bg-red-200 opacity-50">
      <span className="block">hey</span>
    </div>
  )
}
```

function Foo() {
  return (
    <div className="">
      <span className="">hey</span>
    </div>
  )
}

点击 ... 来展开 className

See 折叠 implementation.

脚注

为您的代码添加脚注。

content.md

```rb
# !ref Library import
require 'sinatra'

# !ref URL mapping
get '/hi' do
  "Hello World!"
end
```

require 'sinatra'

get '/hi' do
  "Hello World!"
end

Library import
URL mapping

See 脚注 implementation.

语言切换器

当您需要在代码块中切换语言时，添加一个语言选择器。

content.mdx

<CodeSwitcher>

```java !!
public class Main {
  public static int factorial(int n) {
    if (n == 0) {
      return 1;
    } else {
      return n * factorial(n - 1);
    }
  }
}
```

```cpp !!
int factorial(int n) {
  if (n == 0) {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
}
```

```scala !!
object Main {
  def factorial(n: Int): Int = {
    if (n == 0) {
      return 1
    } else {
      return n * factorial(n - 1)
    }
  }
}
```

```py !!
def factorial(n):
  if n == 0:
    return 1
  else:
    return n * factorial(n - 1)
```

```matlab !!
function result = factorial(n)
  if n == 0
    result = 1;
  else
    result = n * factorial(n - 1);
  end
end
```

```js !!
function factorial(n) {
  if (n === 0) {
    return 1
  } else {
    return n * factorial(n - 1)
  }
}
```

```kotlin !!
fun factorial(n: Int): Int {
  return if (n == 0) {
    1
  } else {
    n * factorial(n - 1)
  }
}
```

```go !!
func factorial(n int) int {
  if n == 0 {
    return 1
  } else {
    return n * factorial(n - 1)
  }
}
```

```swift !!
func factorial(n: Int) -> Int {
  if n == 0 {
    return 1
  } else {
    return n * factorial(n: n - 1)
  }
}
```

```rust !!
fn factorial(n: i32) -> i32 {
  if n == 0 {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
}
```

```fsharp !!
let rec factorial n =
  if n = 0 then
    1
  else
    n * factorial (n - 1)
```

</CodeSwitcher>

public class Main {
  public static int factorial(int n) {
    if (n == 0) {
      return 1;
    } else {
      return n * factorial(n - 1);
    }
  }
}

从下拉菜单中选择不同的语言来查看代码块的变化。

See 语言切换器 implementation.

行号

显示行号。

content.md

```js
function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : 1
  dolor = sit - amet(dolor)
  return sit ? consectetur(ipsum) : []
}
```

1function lorem(ipsum, dolor = 1) {
2  const sit = ipsum == null ? 0 : 1
3  dolor = sit - amet(dolor)
4  return sit ? consectetur(ipsum) : []
5}

See 行号 implementation.

链接

为代码片段添加链接。

content.md

```js
function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit
  dolor = sit - amet(dolor)
  // !link[/ipsum/] https://example.com
  return sit ? consectetur(ipsum) : []
}
```

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit
  dolor = sit - amet(dolor)
  return sit ? consectetur(ipsum) : []
}

ipsum 是一个指向 example.com 的链接

See 链接 implementation.

标记

高亮显示行。

content.md

```js
function lorem(ipsum, dolor = 1) {
  // !mark
  return dolor
}

function ipsum(lorem, dolor = 1) {
  // !mark(1:2) gold
  const sit = lorem == null ? 0 : lorem.sit
  dolor = sit - amet(dolor)
  // !mark[/sit/] pink
  return sit ? consectetur(lorem) : []
}
```

function lorem(ipsum, dolor = 1) {
  return dolor
}

function ipsum(lorem, dolor = 1) {
  const sit = lorem == null ? 0 : lorem.sit
  dolor = sit - amet(dolor)
  return sit ? consectetur(lorem) : []
}

See 标记 implementation.

标签页

在标签页中显示多个代码块。

content.mdx

<CodeWithTabs>

```js !!tabs main.js
function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit
  dolor = sit - amet(dolor)
  return sit ? consectetur(ipsum) : []
}
```

```css !!tabs styles.css
body {
  margin: 0;
  padding: 0;
}
```

</CodeWithTabs>

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit
  dolor = sit - amet(dolor)
  return sit ? consectetur(ipsum) : []
}

See 标签页 implementation.

标记过渡

在标记级别为代码块之间的过渡添加动画效果。

content.md

```scala
object Main {
  def factorial(n: Int): Int = {
    if (n == 0) {
      return 1
    } else {
      return n * factorial(n - 1)
    }
  }
}
```

```python
def factorial(n):
    if n == 0:
        return 1
    else:
        return n * factorial(n - 1)
```

object Main {
  def factorial(n: Int): Int = {
    if (n == 0) {
      return 1
    } else {
      return n * factorial(n - 1)
    }
  }
}

See 标记过渡 implementation.

工具提示

一个工具提示注释，其中工具提示内容可以是任何 MDX 内容。

content.mdx

<CodeWithTooltips>

```js !code
// !tooltip[/lorem/] description
function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit
  dolor = sit - amet(dolor)
  // !tooltip[/consectetur/] inspect
  return sit ? consectetur(ipsum) : []
}
```

## !!tooltips description

### Hello world

Lorem ipsum **dolor** sit amet `consectetur`.

Adipiscing elit _sed_ do eiusmod.

## !!tooltips inspect

```js
function consectetur(ipsum) {
  const { a, b } = ipsum
  return a + b
}
```

</CodeWithTooltips>

function (ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit
  dolor = sit - amet(dolor)
  return sit ? (ipsum) : []
}

悬停（或聚焦）lorem 和 consectetur 标记以查看相应的工具提示。

See 工具提示 implementation.

转译

有时您有一个代码块，希望将其与不同语言的版本一起显示。可能是 TypeScript 和 JavaScript，或者 Sass 和 CSS，或者您可能想要将 cURL 命令转换为不同语言的 SDK 调用。

如果您使用 React 服务器组件并且有一个转译代码的函数，您可以在组件内部调用该函数。

以下是一个示例，展示如何将 TypeScript 代码块转译为 JavaScript，然后在标签页中显示两个版本：

content.md

```ts
interface Greeter {
  greet(): string
}

function sayHello(greeter: Greeter) {
  console.log(greeter.greet())
}
```

interface Greeter {
  greet(): string
}

function sayHello(greeter: Greeter) {
  console.log(greeter.greet())
}

See 转译 implementation.

TypeScript

使用 TypeScript Twoslash 在您的代码块中包含 TypeScript 编译器的信息。

content.md

```ts
const hi = "Hello"
const msg = `${hi}, world`
//    ^?

// @errors: 2588
msg = 123
```

const  = "Hello"
const  = `${}, world`
const msg: "Hello, world"

 = 123
Cannot assign to 'msg' because it is a constant.

See TypeScript implementation.

自动换行

换行以避免水平溢出。

content.md

```js
function lorem(ipsum, dolor, sit) {
  ipsum.amet(
    { consectetur: [0, 1] },
    {
      adipiscing: elit.sed,
      eiusmod: "lorem ipsum dolor sit amet",
      sit,
    },
  )
}
```

1function lorem(ipsum, dolor, sit) {
2  ipsum.amet(
3    { consectetur: [0, 1] },
4    {
5      adipiscing: elit.sed,
6      eiusmod: "lorem ipsum dolor sit amet",
7      sit,
8    },
9  )
10}

拖动右侧手柄来调整宽度

See 自动换行 implementation.