📦 theme-side-editor

A Docusaurus theme component that loads a code editor in a split pane.

Usage

Read the Side Editor documentation.

You can also inject the button using MDX. Add the global import at the start of the .mdx file.

import SideEditorButton from '@theme/SideEditorButton';

Then use the SideEditorButton element in your page.

<SideEditorButton editorId="devicescript" text={`console.log("hello")`} />

http://localhost:3000

Configuration

Install the theme

npm

npm install @rise4fun/docusaurus-theme-side-editor

Yarn

yarn add @rise4fun/docusaurus-theme-side-editor

pnpm

pnpm add @rise4fun/docusaurus-theme-side-editor

Add the theme to your theme list.

const config = {
  plugins: [
    ['@rise4fun/docusaurus-theme-side-editor', {}],
  ],
};