pre-work
- Many documentation websites for programming languages and frameworks often use code editors like CodeMirror, Monaco Editor (which powers VS Code), or Ace Editor to embed interactive code examples. These are popular choices for web-based code editing.
Available options
- code sandbox embed: https://codesandbox.io/docs/learn/sandboxes/embedding
pros:
- we can maintain an account and add all code in one place codesandbox
- get the embed URL and use it as an iframe in the documentation
cons:
- it’s in beta stage
- the documentation claims that the inline editing is not currently supported on these embeds.But this seems working in react.dev website
- code pen embed : https://blog.codepen.io/documentation/embedded-pens/
pros:
- Looks good
- same points as above
cons:
- need to check on pricing: free with default theme but embeding theme charges
- code mirror: CodeMirror