Fold

Fold inline content.

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>
  )
}

Click on the ... to unfold the className

Implementation

fold.tsx

"use client"
import { AnnotationHandler } from "codehike/code"
import { useState } from "react"

export const InlineFold: AnnotationHandler["Inline"] = ({ children }) => {
  const [folded, setFolded] = useState(true)
  if (!folded) {
    return children
  }
  return (
    <button onClick={() => setFolded(false)} aria-label="Expand">
      ...
    </button>
  )
}

And then add the handler to your Code component:

code.tsx

import { RawCode, Pre, highlight, AnnotationHandler } from "codehike/code"
import { InlineFold } from "./fold"

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

const fold: AnnotationHandler = {
  name: "fold",
  Inline: InlineFold,
}