Skip to main content

require-theme-live-codeblock-when-live-codeblock-configured

Require @docusaurus/theme-live-codeblock when themeConfig.liveCodeBlock is configured.

Targeted pattern scopeโ€‹

This rule focuses on docusaurus.config.* files.

It reports config that declares:

  • themeConfig.liveCodeBlock

without also configuring:

  • @docusaurus/theme-live-codeblock

What this rule reportsโ€‹

This rule reports live-codeblock theme config that is present without the matching live-codeblock theme module.

Why this rule existsโ€‹

The Docusaurus live-codeblock docs pair the theme module with themeConfig.liveCodeBlock options.

Keeping the theme config without the module makes the site config look enabled while the underlying theme integration is still missing.

โŒ Incorrectโ€‹

export default {
    themeConfig: {
        liveCodeBlock: {
            playgroundPosition: "bottom",
        },
    },
};

โœ… Correctโ€‹

export default {
    plugins: ["@docusaurus/theme-live-codeblock"],
    themeConfig: {
        liveCodeBlock: {
            playgroundPosition: "bottom",
        },
    },
};

Behavior and migration notesโ€‹

This rule provides a suggestion when it can safely add the theme module to a literal plugins array or create a new top-level plugins property.

Live playground previewโ€‹

function LiveCodeBlockConfigDemo() {
    const [position, setPosition] = useState("bottom");

    return (
        <div
            style={{
                border: "1px solid rgb(37 194 160 / 45%)",
                borderRadius: 12,
                padding: 16,
            }}
        >
            <button
                type="button"
                onClick={() =>
                    setPosition((value) => (value === "bottom" ? "top" : "bottom"))
                }
            >
                Playground position: {position}
            </button>
            <p style={{ margin: "0.85rem 0 0" }}>
                The live-codeblock theme is what makes a setting like playgroundPosition meaningful to the docs UI.
            </p>
        </div>
    );
}

render(<LiveCodeBlockConfigDemo />);

Additional examplesโ€‹

โŒ Incorrect โ€” config present with unrelated plugin entries onlyโ€‹

export default {
    plugins: ["@easyops-cn/docusaurus-search-local"],
    themeConfig: {
        liveCodeBlock: {
            playgroundPosition: "top",
        },
    },
};

โœ… Correct โ€” live-codeblock theme module addedโ€‹

export default {
    plugins: [
        "@easyops-cn/docusaurus-search-local",
        "@docusaurus/theme-live-codeblock",
    ],
    themeConfig: {
        liveCodeBlock: {
            playgroundPosition: "top",
        },
    },
};

ESLint flat config exampleโ€‹

import docusaurus2 from "eslint-plugin-docusaurus-2";

export default [docusaurus2.configs.recommended];

When not to use itโ€‹

Do not use this rule if you intentionally keep live-codeblock config in place before enabling the theme module and do not want linting to report that partial setup.

Rule catalog ID: R094

Further readingโ€‹