code-hike / codehike

Marvellous code walkthroughs
https://codehike.org
MIT License
4.51k stars 140 forks source link

Inline code error #177

Closed pomber closed 2 years ago

pomber commented 2 years ago

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>

image

github-actions[bot] commented 2 years ago

:rocket: Issue was released in v0.5.1 :rocket: