# docusaurus-theme-live-codeblock

> Docusaurus live code block component.

Latest version **2.0.0-alpha.70.2** (published 2021-04-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install docusaurus-theme-live-codeblock
pnpm add docusaurus-theme-live-codeblock
yarn add docusaurus-theme-live-codeblock
bun add docusaurus-theme-live-codeblock
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: no vulnerabilities; high maintenance score; popular repo; extremely popular.

Warnings: low downloads; no types; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 2.0.0-alpha.70.2 |
| Published | 2021-04-27 |
| First published | 2021-03-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=12.13.0 |
| Dependencies | 6 |
| Unpacked size | 8.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 66364 |
| Maintainers | kotomi |

## Links

- npm: https://www.npmjs.com/package/docusaurus-theme-live-codeblock
- Repository: https://github.com/facebook/docusaurus
- Homepage: https://github.com/facebook/docusaurus#readme
- Issues: https://github.com/facebook/docusaurus/issues
- npm.io page: https://npm.io/package/docusaurus-theme-live-codeblock

## Dependencies (6)

- [clsx](https://npm.io/package/clsx.md) ^1.1.1
- [react-live](https://npm.io/package/react-live.md) ^2.2.3
- [@philpl/buble](https://npm.io/package/@philpl/buble.md) ^0.19.7
- [@docusaurus/core](https://npm.io/package/@docusaurus/core.md) 2.0.0-alpha.70
- [parse-numeric-range](https://npm.io/package/parse-numeric-range.md) ^1.2.0
- [prism-react-renderer](https://npm.io/package/prism-react-renderer.md) ^1.1.1

## Recent versions

- 2.0.0-alpha.70.2 (latest) — 2021-04-27
- 2.0.0-alpha.70.1 — 2021-03-01
- 2.0.0-alpha.70 — 2021-03-01

## README

# Docusaurus Live Codeblock

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

Install

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

Modify your `docusaurus.config.js`

```diff
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>
      );
    }
    ```

---
_Source: https://npm.io/package/docusaurus-theme-live-codeblock · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._