Code drawers

3 min

Code drawers are a great way to show code examples in a three-column layout.

Here's one:‘‘‘

A code drawer

let x, y, z;  // Statement 1
x = 5;        // Statement 2
y = 6;        // Statement 3
z = x + y;    // Statement 4

document.getElementById("demo").innerHTML =
"The value of z is " + z + ".";

Here's another one.

Another code drawer

let x, y, z;  // Statement 1
x = 5;        // Statement 2
y = 6;        // Statement 3
z = x + y;    // Statement 4

document.getElementById("demo").innerHTML =
"The value of z is " + z + ".";

And a screenshot while editing:

Code drawers

Markdown

Use the following Markdown to generate code drawer blocks:

### Test codedrawer

::::codedrawer{title="a code drawer"}
:::codeblocktabs-examples
```php
// Some wordpress plugi
 // Add our plugin's option page to the WP admin menu.
  public function add_plugin_options_page() {
    add_options_page(
      'Example Plugin Settings',
      'Example Plugin Settings',
      'manage_options',
      'ex',
      [$this, 'render_admin_page']
    );
  }
```
```go
// Next should be used only inside middleware.
// It executes the pending handlers in the chain inside the calling handler.
// See example in GitHub.
func (c *Context) Next() {
    c.index++
    for c.index < int8(len(c.handlers)) {
        c.handlers[c.index](c)
        c.index++
    }
}
```
```javascript
// demo js
```
:::
:::codeblocktabs-responses
```json
// 404 -  not found
{
  requireFingerprintScope: true,
  maxMachines: 1,
  concurrent: false,
  floating: false,
  protected: true,
  strict: true
}
```
:::
::::

Find other blocks

Discover new ways and blocks to create stunning and functional documentation pages.

Check out all blocks

&#xNAN; Need help? ⬇️

Use the blue chat bubble from bottom right corner.

Or try AI Chat (from search box) for quick answers.

&#xNAN; Your opinion matters

Use the below feedback form, anonymously.

Or ask a question in Q&A section and our team or AI will give you a solution.