Code Hike v1.0*: new markdown API

*under development and open for feedback

MDX file
# Hello world



Lorem ipsum
JSX output
function MDXContent() {

  return (

    <>

      <h1>Hello world</h1>

      <p>Lorem ipsum</p>

    </>

  )

}

Scroll down

Code Hike v1.0 will introduce a <Hike/> component that enables the definition of content with a complex structure in plain markdown.

The processed content is then passed as props to a custom React component that you define.

Any plain content inside <Hike/> will be passed inside the children prop.

Any header that starts with ! defines a new section. The word after ! will be the name of the section, in this case steps.

Sections are passed to the layout component as arrays grouped by name.

The rest of the header becomes the query property.

The content of the section is passed in the children property.

You can nest sections using deeper headers.

Here, ### !steps one and a half will be inside ## !steps one 1.

You can have sections with different names too.

Code blocks are also processed, and passed to the component as code sections.

Notes

  • You will be able to copy-paste common layouts from the Code Hike website (a la shadcn/ui) and customize them to your needs.
  • Code Hike will also provide components and utilities, the building blocks for your layouts.
  • The layout component can be a React Server Component (that runs at build-time), this gives us a lot of flexibility to manipulate the content data before rendering it.
  • It will be possible to use it without React Server Components. Code Hike will pre-process the content data before passing it to the layout component (for example, syntax highlighting code blocks). But this loses some flexibility.

Feedback

This is a work in progress, and I'd love to hear your feedback. The most useful feedback right now is giving me more use cases so I can build more proofs of concept that will help define:

  • the shape of the content data object
  • the building blocks provided by Code Hike
  • the reference layouts
  • the markdown API

So, what kind of layouts would you like to be able to create with this API? You can open a discussion in this repo, any feedback is welcome.

Follow @pomber for updates. Send me a DM if you are interested in early access.