docs: pass CodeBlock/highlight code + lang in as props, parameter

[karlhorky]

Description

Pass in:

1. code and language via props for <CodeBlock> component
2. language via 2nd highlight() function parameter

Linked Issues

--

Additional context

--

[netlify]

✅ Deploy Preview for shiki-matsu ready!

Name	Link
🔨 Latest commit	0cd190a
🔍 Latest deploy log	https://app.netlify.com/sites/shiki-matsu/deploys/6757b38266ee6c0008d14eca
😎 Deploy Preview	https://deploy-preview-862--shiki-matsu.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for shiki-next ready!

Name	Link
🔨 Latest commit	0cd190a
🔍 Latest deploy log	https://app.netlify.com/sites/shiki-next/deploys/6757b382c799590008cce1e5
😎 Deploy Preview	https://deploy-preview-862--shiki-next.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[antfu]

Could you help to fix the lint? Thanks

[karlhorky]

@antfu Sure thing - what do you think of the style in this commit:

• da2d7da

I guess the only problem here is the extra indentation at the start of each code line in the template string. Maybe we would want to introduce dedent or similar on the code block...?

dedent is what I used here:

• https://github.com/karlhorky/mdx-tricks#interpolation-in-code-blocks

export default async function CodeBlock(props: Props) {
  const out = await codeToHast(dedent(props.children), {
    lang: props.language,
    theme: 'dark-plus',
  });

But totally understand if you don't want to introduce new dependencies.

If we shouldn't add any more dependencies, I would probably suggest disabling the react/jsx-curly-brace-presence lint rule for that case I guess... 🤔 Having the code outside of a JSX expression feels unwieldy.

[antfu]

It's just some demo examples; I think it's fine either way, but I would think it's better not to involve too many concepts all at once. It shouldn't be hard for developers to catch up and fix it, it's a problem unrelated to Shiki so I think it's better to not mention that. I changed it to array join to workaround that.

[karlhorky]

Sounds good, thanks for the review, edit and merge!