docusaurus/packages/docusaurus-theme-live-codeblock
Sébastien Lorber c84d779627
chore: backport retro compatible commits for the Docusaurus v2.3 release (#8585)
Co-authored-by: stnor <stefan@selessia.com>
Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
Co-authored-by: sebastienlorber <lorber.sebastien@gmail.com>
Co-authored-by: Sébastien Lorber <slorber@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Matija Sirk <matija.sirk@kopit.si>
Co-authored-by: AHMET BAYHAN BAYRAMOGLU <49499275+ABB65@users.noreply.github.com>
Co-authored-by: Stefan Norberg <stefan@norberg.org>
Co-authored-by: Josh Goldberg <git@joshuakgoldberg.com>
Co-authored-by: Muhammad Hammad <33136628+mhnaeem@users.noreply.github.com>
Co-authored-by: Denis Al-Khelali <denis.al-khelali@itechart-group.com>
Co-authored-by: Balthasar Hofer <lebalz@outlook.com>
Co-authored-by: Danny Kim <0916dhkim@gmail.com>
Co-authored-by: Frieder Bluemle <frieder.bluemle@gmail.com>
Co-authored-by: John Reilly <johnny_reilly@hotmail.com>
Co-authored-by: Robert Lawrence <62929526+r-lawrence@users.noreply.github.com>
Co-authored-by: Sadegh Karimi <sadegh.krmi@gmail.com>
Co-authored-by: Lachlan Heywood <lachieh@users.noreply.github.com>
Co-authored-by: mturoci <64769322+mturoci@users.noreply.github.com>
Co-authored-by: 宋锦丰 <36468758+SJFCS@users.noreply.github.com>
Co-authored-by: Nguyễn Thành Nam <namnguyenthanh.work@gmail.com>
Co-authored-by: Dongjoon Lee <djunnni@gmail.com>
Co-authored-by: Thomas.CA <44041651+Thomascogez@users.noreply.github.com>
Co-authored-by: Riccardo <riccardo.odone@gmail.com>
Co-authored-by: Lane Goolsby <lanegoolsby@yahoo.com>
Co-authored-by: Mariusz Krzaczkowski <m.krzaczkowski@yetiforce.com>
Co-authored-by: Matija Sirk <sirkmatija@gmail.com>
Co-authored-by: Jiří <zmrhal.j@gmail.com>
2023-01-27 17:02:15 +01:00
..
src feat(live-codeblock): add support for noInline to interactive code blocks (#7514) 2022-06-02 10:34:20 +02:00
.npmignore misc: make copyUntypedFiles work for watch mode (#7445) 2022-05-18 19:18:32 +08:00
package.json chore: backport retro compatible commits for the Docusaurus v2.3 release (#8585) 2023-01-27 17:02:15 +01:00
README.md docs(v2): Add READMEs to v2 packages (#4034) 2021-01-14 17:16:26 +01:00
tsconfig.client.json refactor: make each tsconfig explicitly declare module and include/exclude (#7443) 2022-05-18 12:48:28 +08:00
tsconfig.json chore: upgrade to TS 4.7, compile with NodeNext (#7586) 2022-06-15 19:15:11 +02:00

Docusaurus Live Codeblock

You can create live code editors with a code block live meta string.

Install

npm i @docusaurus/theme-live-codeblock # or yarn add @docusaurus/theme-live-codeblock

Modify your docusaurus.config.js

module.exports = {
  ...
+ themes: ['@docusaurus/theme-live-codeblock'],
  presets: ['@docusaurus/preset-classic']
  ...
}

Example:

```jsx live
function Clock(props) {
  const [date, setDate] = useState(new Date());
  useEffect(() => {
    var timerID = setInterval(() => tick(), 1000);

    return function cleanup() {
      clearInterval(timerID);
    };
  });

  function tick() {
    setDate(new Date());
  }

  return (
    <div>
      <h2>It is {date.toLocaleTimeString()}.</h2>
    </div>
  );
}
```