Enhancement: Determine syntax highlighting based on filename on Codeblocks

[brianespinosa]

It would be great if when defining a codeblock and putting a filename, that our codeblocks could determine the language for syntax highlighting based on the filename alone.

This of course might be challenging if codeblocks are looking for these frontmatter values in an array.

[pomber]

Do you mean

``` hello.py
print("Hello, world!")
```

should be highlighted as python? Or you have something different on your mind?

[brianespinosa]

@pomber yes, that is 100% what I am thinking.

[pomber]

can you find/build a map from filename to language? I'll be happy to add the logic to the code

[brianespinosa]

This might be more than we need relative to available language syntax highlighting... but I think we might be able to start with this? https://gist.github.com/ppisarczyk/43962d06686722d26d176fad46879d41

[pomber]

With codehike v1 and React Server Components it can be done like this:

import { Pre, highlight } from "codehike/code"

export async function Code({ codeblock }) {
  const filename = codeblock.lang
  const extension = filename.split(".").pop() || codeblock.lang
  const highlighted = await highlight(
    { ...codeblock, lang: extension },
    "github-dark",
  )
  return <Pre code={highlighted} />
}

MDX example:

```index.js
console.log("hi")
```