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 + ".";
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 + "."; 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 + "."; 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
# Program to find the sum of all numbers stored in a list
# List of numbers
numbers = [6, 5, 3, 8, 4, 2, 5, 4, 11]
# variable to store the sum
sum = 0
# iterate over the list
for val in numbers:
sum = sum+val
print("The sum is", sum)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.
Need help? ⬇️
Use the blue chat bubble from bottom right corner.
Or try AI Chat (from search box) for quick answers.
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.
Have a question?
Our super-smart AI, knowledgeable support team and an awesome community will get you an answer in a flash.
To ask a question or participate in discussions, you'll need to authenticate first.