syntax highlighting is broken when using `Code` and `Pre` directly instead of ```

[tonyxiao]

import { Pre, Code } from 'nextra/components'

# Another Page

<Pre
  filename="demo.js"
  data-language="js"
  data-theme="default"
  hasCopyCode
>
  {/* {MyComponentSource} */}
  <Code className="language-javascript">
  let a = 1 console.log(a)
  </Code>
</Pre>

```js filename="demo.js" {3} copy
let a = 1

console.log(a)

![CleanShot 2023-12-04 at 02 38 55@2x](https://github.com/shuding/nextra/assets/696842/17e65d9e-afe3-48df-a243-266adf034517)

On a side note, how do achieve line highlighting using the `jsx` component syntax rather than the markdown syntax?

[tonyxiao]

Found a workaround but it is a ton of code! Would love something shorter.

import MyComponentSource from '!!raw-loader!../test.ts'import { MDXRemote } from 'next-mdx-remote' 
import { compileMdx } from 'nextra/compile'
import { useSSG } from 'nextra/ssg'
import { useMDXComponents } from 'nextra/mdx'

export const getStaticProps = async () => {
  const mdx = await compileMdx(['```js {3,5-8}' ,MyComponentSource ,'```'].join('\n'), { defaultShowCopyCode: true }) // 2
  return {
    props: {
      ssg: mdx.result // 3
    },
    // Revalidate at most once every 1 hour
    revalidate: 60 * 60
  }
}

export const Content = () => {
  const compiledSource = useSSG() // 4
  const components = useMDXComponents()
  return <MDXRemote compiledSource={compiledSource} components={components} /> // 5-6
}

<Content />

[dimaMachina]

there is no mention that syntax highlighting will work with Pre and Code elements

Nextra use Shiki that do syntax highlighting at the build time

https://nextra.site/docs/guide/syntax-highlighting#with-dynamic-content

[tonyxiao]

@dimaMachina but there a reproduction of the issue. See the screenshot above. The code using Pre is not highlighted.

[dimaMachina]

It's not highlighted because it's not processed by shiki, only markdown code blocks (```) are processed by shiki

[tonyxiao]

Ah I see. What would you recommend to achieve the desired effect of highlighting code inside Pre? The use case is i'm using raw-loader to load a .ts file from disk and want to put it inside a code block but unable to put it inside the triple backtick directly because there are no interpolation possible. That's why I'm trying to use Pre inside but running into the issue where Pre doesn't highlight.

[dimaMachina]

maybe you are looking for https://github.com/kevin940726/remark-code-import (didn't tried with nextra but should works I guess)

[dimaMachina]

you need to pass this plugin in similar way as I described in this page https://nextra.site/docs/guide/advanced/table#setup

[tonyxiao]

Confirmed that the remark-code-import plugin works! Thanks!