Reference

Simple code editor

You can add a simple code editor such as this:

python_example.py
index.html
base.css

def say(text):
    print(text)

say('Hello World!')
<div>
  <h1>Hello World!</h1>

  <ul>
    <li>Item</li>
    <li>Item</li>
  </ul>
</div>
body {
  background: hotpink;
}
body {
  /* This file will not be displayed,
  but a div with this content will exist */
  color: lime;
}

Source code

!!! code-editor
    ```{.py .filename-python_example}
    def say(text):
        print(text)

    say('Hello World!')
    ```

    ```html
    <div>
      <h1>Hello World!</h1>

      <ul>
        <li>Item</li>
        <li>Item</li>
      </ul>
    </div>
    ```

    ```{.css .readonly-file .filename-base}
    body {
      background: hotpink;
    }
    ```

    ```{.css .hidden-file .filename-hidden}
    body {
      /* This file will not be displayed,
      but a div with this content will exist */
      color: lime;
    }
    ```

Add Javascript

You can add some Javascript to handle editor content changes:

const editors = document.getElementsByClassName("code-editor");
for (let editor of editors) {
  editor.addEventListener("contentchanged", (ev) => {
    const filename = ev.detail.filename;
    const code = ev.detail.code;
    console.log(`Content of file ${filename} changed to:\n${code}`);
  })
}