Annotations doesn't seems to work when importing code from a file into a codeblock

[aromko]

Hey, I'm trying to use annotations when importing code from a file. It works in the old version but in the new version it seems that I'm missing something.

I tried this:

<CH.Code style={{ height: 500 }}>

`tsx TabsActionExample.tsx use-v1
// !focus(14:22)
!from ./_components/TabsActionExample.tsx
`

`tsx Link.tsx
// from ./_components/Link.tsx
`

</CH.Code>

This leads to:

When I remove // !focus(14:22) the code is loaded.

What am I doing wrong?

[pomber]

you are using v1.0.0, right? yes, currently you can only have the !from inside the codeblock. you can put annotations inside the imported file if it helps, but the idea is to make it more flexible soon, allowing annotations, extra code, extra froms.

related #401

[aromko]

Yeah. sorry I'm trying to upgrade to the new version.

[pomber]

no problem, let me know any other issue you have

[aromko]

So you mean I can use the annotations in the .tsx files? e.g

const App = () => (
  // !focus(14:22)
  <MarigoldProvider theme={theme} className="h-[340px]">
    <Tabs defaultActiveTab="description">
...

That doesn't seems to work and I think I don't want it into my components :-D So I need to wait until it is supported :-/

[aromko]

@pomber Are they plans to support !from outside a codeblock like in the old version in the near future?

[pomber]

@pomber Are they plans to support !from outside a codeblock like in the old version in the near future?

you mean annotations outside of the imported files right? if not, provide an example of what you need. I'll work on some !from improvements soon.

[aromko]

Yes, exactly. Nice to hear. I'm waiting for it to continue migration 😁

[aromko]

Hey @pomber. How is the status here? Still waiting for this feature to finally migrate to the latest version 🙂

[chailandau]

Hey @pomber we are also running into this -- any updates on this?

[chailandau]

For folks having similar issues, using this as a stopgap and its working great -- hopefully it helps others as well.

// src/components/codehike/annotations/utils.ts

import type { RawCode } from "codehike/code";

export function getFocusInfo(codeblock: RawCode): string {
  // Handle both formats:
  // - focus=5:9 (range)
  // - focus=17 (single line)

  const focusMatch = /.*focus=(\d+(?::\d+)?)/.exec(codeblock.meta);
  if (!focusMatch) return codeblock.value;

  const focusRange = focusMatch[1];
  const focusComment = `# !focus(${focusRange})\n`;
  return focusComment + codeblock.value;
}

// src/components/codehike/code/index.tsx

...
import { getFocusInfo } from "@/components/codehike/annotations/utils";

// we are processing the focus comment as part of the code snippet now, so it works
 return (
    <CodeSnippet
      code={getFocusInfo(codeblock)}
    />
...

[github-actions[bot]]

This issue has been fixed but not yet released.

Try it in your project before the release with:

npm i https://pkg.pr.new/codehike@510

Or wait for the next release.

[github-actions[bot]]

🚀 Released in [email protected] 🚀

If this was helpful, consider sponsoring Code Hike. Your contribution helps sustain open-source work.

Thanks for using Code Hike!