Your first example is essentially how it works on the Stripe docs platform. However, it requires a couple of custom components, including a CodeBlock component

Your first example is essentially how it works on the Stripe docs platform. However, it requires a couple of custom components, including a CodeBlock component that renders code within code fences, and a component which understands how to display the user's API key. These are both very Stripe-specific, so it doesn't make sense to open source them. If you render the site to static HTML, though, you will have to do something more like a last-minute search-and-replace. Instead of rendering raw HTML, you could render the entire site to either the Markdoc AST or Markdoc renderable tree, which are both serializable. That's the approach that I use on my personal site [0], which implements a system similar to ContentLayer. [1] [0] https://github.com/nkohari/nate.io/blob/master/build/ContentPlugin.ts https://github.com/nkohari/nate.io/blob/master/build/Content... [1] https://www.contentlayer.dev/ https://www.contentlayer.dev/