2020-11-30 08:07:08 -05:00
---
2021-11-10 01:08:50 -05:00
sidebar_position: 3
2022-05-28 07:07:45 -04:00
slug: /api/themes/@docusaurus/theme-live-codeblock
2020-11-30 08:07:08 -05:00
---
2022-05-28 07:07:45 -04:00
# 📦 theme-live-codeblock
2020-12-30 11:03:25 -05:00
This theme provides a `@theme/CodeBlock` component that is powered by react-live. You can read more on [interactive code editor ](../../guides/markdown-features/markdown-features-code-blocks.mdx#interactive-code-editor ) documentation.
2020-11-30 08:07:08 -05:00
```bash npm2yarn
npm install --save @docusaurus/theme -live-codeblock
```
2021-03-05 08:49:17 -05:00
2021-03-19 06:00:41 -04:00
### Configuration {#configuration}
2021-03-05 08:49:17 -05:00
2021-12-29 21:51:00 -05:00
```js title="docusaurus.config.js"
2021-03-05 08:49:17 -05:00
module.exports = {
plugins: ['@docusaurus/theme-live-codeblock'],
themeConfig: {
liveCodeBlock: {
/**
* The position of the live playground, above or under the editor
* Possible values: "top" | "bottom"
*/
playgroundPosition: 'bottom',
},
},
};
```
