Блог

Я использую next-многомерное-удаленное

в многомерном файле

 - Use `RAND()` in
 

в компоненте реакции

 import { MDXRemote } from 'next-mdx-remote'
import { serialize } from 'next-mdx-remote/serialize'

const content = await serialize(content, {
  mdxOptions: {
    remarkPlugins: [],
    rehypePlugins: [],
  },
  scope: frontmatter,
}),

<MDXRemote {...content} components={{
  code: ({ children }: { children: ReactNode }) => (
    <code className="bg-gray-50 dark:bg-gray-800" children={children} />
  ),
}} />
 

Результат, вывод HTML

 <li>
  Use 
  <code>
    RAND()
  </code> 
  in
</li>
 

Так и должно быть <code class="bg-gray-50 dark:bg-gray-800"> , но этого не происходит.

Я не уверен, почему, и другие подобные теги <p class="..."> работают просто отлично.

Поскольку вы используете один обратный код (встроенный код), вы должны использовать inlineCode его для таргетинга. code / pre целевые блоки кода, в которых используются тройные обратные галочки.

 <MDXRemote {...content} components={{
    inlineCode: ({ children }: { children: ReactNode }) => (
        <code className="bg-gray-50 dark:bg-gray-800" children={children} />
    )
}} />