Inline code error #177
Description
Inline code doesn't show in this case:
<CH.Section>
```js pages/posts/[slug].js
import { allPosts } from "contentlayer/generated"
import { useMDXComponent } from "next-contentlayer/hooks"
export async function getStaticPaths() {
const paths: string[] = allPosts.map(
(post) => post.url
)
return { paths, fallback: false }
}
export async function getStaticProps({
params,
}) {
const post = allPosts.find(
(post) =>
post._raw.flattenedPath ===
params.slug
)
return { props: { post } }
}
// focus(1:13)
const PostLayout = ({ post }) => {
const MDXContent = useMDXComponent(
post.body.code
)
return (
<article style={{ width: 600 }}>
<h1>{post.title}</h1>
<MDXContent />
</article>
)
}
export default PostLayout
//
```
Then we finally render the post.
We use the _`useMDXComponent`_ hook [from Contentlayer](focus://2). It transforms the _`post.body.code`_ into a React component.
</CH.Section>