docusaurus/packages/docusaurus-theme-live-codeblock
Alexey Pyltsyn f13448d5e1
chore(v2): upgrade dependencies + require Node 12 (#4223)
* chore(v2): upgrade dependencies

* Set minimum Node.js version to 12.13

* Fix test

* Upgrade copy-text-to-clipboard

* Bump Node versions

* Update .nvmrc

* mark cacheTime as forbidded field

* Downgrade jest to v25.2.7

* Increase Node version for Windows CI

* Test fix

* Attempt to fix Windows CI

* Downgrade execa

* fix async test errors

* Upgrade execa

Co-authored-by: slorber <lorber.sebastien@gmail.com>
2021-02-18 15:12:42 +01:00
..
src feat(v2): Extract/translate hardcoded labels from classic theme (#4168) 2021-02-03 20:06:26 +01:00
package.json chore(v2): upgrade dependencies + require Node 12 (#4223) 2021-02-18 15:12:42 +01:00
README.md docs(v2): Add READMEs to v2 packages (#4034) 2021-01-14 17:16:26 +01: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>
  );
}
```