标记

高亮显示行。

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) : []
}

Implementation

对于块注释：实现 Line 组件，对于内联注释：实现 Inline 组件。使用 annotation.query 作为标记的可选颜色。

code.tsx

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

const mark: AnnotationHandler = {
  name: "mark",
  Line: ({ annotation, ...props }) => {
    const color = annotation?.query || "rgb(14 165 233)"
    return (
      <div
        className=""
        style={{
          borderLeft: "solid 2px transparent",
          borderLeftColor: annotation && color,
          backgroundColor: annotation && `rgb(from ${color} r g b / 0.1)`,
        }}
      >
        <InnerLine merge={props} className="" />
      </div>
    )
  },
  Inline: ({ annotation, children }) => {
    const color = annotation?.query || "rgb(14 165 233)"
    return (
      <span
        className=""
        style={{
          outline: `solid 1px rgb(from ${color} r g b / 0.5)`,
          background: `rgb(from ${color} r g b / 0.13)`,
        }}
      >
        {children}
      </span>
    )
  },
}

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

code.tsx

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

改进建议

改进标记注释的一些想法：

与焦点注释混合使用