Code Box

The Code Box component displays syntax-highlighted code blocks with a language label header and a copy-to-clipboard button. It uses a dark background (Arch Black) with light text.

Code Box

Python

def find_and_clear_notebooks(directory):
    """
    Find all Jupyter notebooks in the given directory
    and its subdirectories, and clear their output.

    Parameters:
    directory (str): The directory to search for Jupyter notebooks.
    """
    for root, _, files in os.walk(directory):
        for file in files:
            if file.endswith(".ipynb"):
                notebook_path = os.path.join(root, file)
                print(f"Processing notebook: {notebook_path}")
                clear_notebook_output(notebook_path)

<div class="cmp-code">
  <div class="cmp-code__container util-color-light-gray">
    <div class="obj-grid">
      <div
        class="obj-grid__12-12 util-background-sanford util-color-white util-pad-horiz-lg util-pad-vert-xs"
      >
        <span
          class="util-margin-bottom-none util-margin-top-xs cmp-code__language-name"
        >
          Python
        </span>
        <button
          class="util-background-sanford util-color-light-gray util-pad-vert-xs util-pad-horiz-sm"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            fill="none"
            viewBox="0 0 24 24"
            class="util-margin-right-xs"
          >
            <path
              fill="currentColor"
              fill-rule="evenodd"
              d="M7 5a3 3 0 0 1 3-3h9a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-2v2a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-9a3 3 0 0 1 3-3h2zm2 2h5a3 3 0 0 1 3 3v5h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-9a1 1 0 0 0-1 1zM5 9a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1v-9a1 1 0 0 0-1-1z"
              clip-rule="evenodd"
            ></path>
          </svg>
          Copy Code
        </button>
      </div>
      <div class="obj-grid__12-12 util-pad-left-lg">
        <pre><code class="language-python">def find_and_clear_notebooks(directory):
    &quot;&quot;&quot;
    Find all Jupyter notebooks in the given directory
    and its subdirectories, and clear their output.

    Parameters:
    directory (str): The directory to search for Jupyter notebooks.
    &quot;&quot;&quot;
    for root, _, files in os.walk(directory):
        for file in files:
            if file.endswith(&quot;.ipynb&quot;):
                notebook_path = os.path.join(root, file)
                print(f&quot;Processing notebook: {notebook_path}&quot;)
                clear_notebook_output(notebook_path)</code></pre>
      </div>
    </div>
  </div>
</div>

CSS Classes

Class	Description
`.cmp-code`	Outer wrapper with light gray background
`.cmp-code__container`	Inner container with black background and rounded corners
`.cmp-code__language-name`	Language label text in the header bar

Header Bar

The header uses .util-background-sanford for the language label bar, containing:

The language name on the left
A “Copy Code” button on the right with a clipboard icon