Skip to main content

Live Coding Demo

Wondering how the live coding is implemented on Playground blog? well here are the steps to do with the power of react and Docusarus

  • Install live coding package npm i @docusaurus/theme-live-codeblock
  • Open docusaurus.config.js, go the end and add below
       themes: ['@docusaurus/theme-live-codeblock']
  • create new doc with .md extension
  • include your code in between 3 backticks and type jsx live immediately after opening backtics with a space (``` jsx live)
Live Editor