Numerous Pulls Merged

    @docusaurus/theme-live-codeblock
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0-beta.21 • Public • Published

    Docusaurus Live Codeblock

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

    Install

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

    Modify your docusaurus.config.js

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

    Keywords

    none

    Install

    npm i @docusaurus/theme-live-codeblock

    DownloadsWeekly Downloads

    8,483

    Version

    2.0.0-beta.21

    License

    MIT

    Unpacked Size

    33.2 kB

    Total Files

    26

    Last publish

    Collaborators

    • yangshun
    • fb
    • slorber
    • lex111
    • docusaurus-bot