📦 theme-live-codeblock

This theme provides a @theme/CodeBlock component that is powered by react-live. You can read more on interactive code editor documentation.

npm

npm install --save @docusaurus/theme-live-codeblock

Yarn

yarn add @docusaurus/theme-live-codeblock

pnpm

pnpm add @docusaurus/theme-live-codeblock

Configuration

docusaurus.config.js

module.exports = {
  plugins: ['@docusaurus/theme-live-codeblock'],
  themeConfig: {
    liveCodeBlock: {
      /**
       * live playground 위치를 에디터의 위 또는 아래로 설정합니다.
       * 설정할 수 있는 값: "top" | "bottom"
       */
      playgroundPosition: 'bottom',
    },
  },
};