自动换行

换行以避免水平溢出。

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}

拖动右侧手柄来调整宽度

Implementation

让代码换行的简单方法是使用 white-space: pre-wrap; 样式来设置 <Pre /> 组件。但是，在换行代码时，最好在相同的缩进级别换行。为此，我们可以调整每行的 text-indent：

word-wrap.tsx

import {
  AnnotationHandler,
  InnerLine,
  InnerPre,
  InnerToken,
} from "codehike/code"

export const wordWrap: AnnotationHandler = {
  name: "word-wrap",
  Pre: (props) => <InnerPre merge={props} className="whitespace-pre-wrap" />,
  Line: (props) => (
    <InnerLine merge={props}>
      <div
        style={{
          textIndent: `${-props.indentation}ch`,
          marginLeft: `${props.indentation}ch`,
        }}
      >
        {props.children}
      </div>
    </InnerLine>
  ),
  Token: (props) => <InnerToken merge={props} style={{ textIndent: 0 }} />,
}

将其传递给 Pre 组件的 handlers 属性：

code.tsx

import { wordWrap } from "./word-wrap"

async function Code({ codeblock }: { codeblock: RawCode }) {
  const highlighted = await highlight(codeblock, "github-dark")
  return <Pre code={highlighted} handlers={[wordWrap]} />
}