Skip to content
Docs Engine
Visit Docs Engine on GitHub
Set theme to dark (⇧+D)

Code block examples

Code blocks inside Docs Engine Markdown offer a variety of custom presentation mechanisms. This page contains practical examples for inspiration.

Learn more about using code blocks inside Markdown.


JavaScript with filename and highlight

hello-worker.js
addEventListener("fetch", event => {
event.respondWith(handleRequest(event.request))
})
async function handleRequest(request) {
return new Response(`Hello worker!`, {
status: 200
})
}

Terminal commands/output

# Install Wrangler, and tell it who you are
~/ $
npm install -g @cloudflare/wrangler
~/ $ wrangler config

# Create and publish a “Hello World” Worker
~/ $
wrangler generate hello
~/ $ cd hello
~/hello $ wrangler subdomain world
~/hello $ wrangler publish
Published https://hello.world.workers.dev

CSS code with highlighted lines

:root {
--color-rgb: 8, 10, 60;
--color: rgb(var(--color-rgb));
}
.Class {
box-sizing: border-box;
width: calc(80vw - 2em);
padding: 1em;
color: var(--color);
--bg-alpha: .5;
background-color: rgba(var(--color-rgb), var(--bg-alpha));
}
@supports (backdrop-filter: blur(1em)) {
.Class {
--bg-alpha: .1;
backdrop-filter: saturate(200%) blur(1.25em);
}
}

Markdown code

# Markdown header
This is a paragraph with __bold__ and _italics_ contained within it.
- This is a list item.
- This is another list item with a [link](https://example.com) in it.
This is the end.

HTML with embedded JS/CSS

<!DOCTYPE html>
<html theme="light">
<head>
<meta charSet="utf-8"/>
<meta httpEquiv="x-ua-compatible" content="ie=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script>
(() => {
getThemeFromStorage = () => {
let storedTheme
const query = window.matchMedia("(prefers-color-scheme: dark)")
const queryTheme = query.matches ? "dark" : "light"
try {
const theme = JSON.parse(localStorage.theme)
const themeIsValid = ["dark", "light"].includes(theme.theme)
const themeWasRecentlySet = theme.updated > +new Date - (30 * 60 * 1000)
if (themeIsValid && themeWasRecentlySet) {
storedTheme = theme.theme
}
} catch (error) {}
return storedTheme || queryTheme
}
document.documentElement.setAttribute("theme", getThemeFromStorage())
})()
</script>
<style>
html {
-webkit-font-smoothing: antialiased;
background: #fff;
color: #000;
}
html[theme="dark"] {
background: #000;
color: #fff;
}
:root {
--color-rgb: 8, 10, 60;
--color: rgb(var(--color-rgb));
}
.Class {
box-sizing: border-box;
width: calc(80vw - 2em);
padding: 1em;
color: var(--color);
--bg-alpha: .5;
background-color: rgba(var(--color-rgb), var(--bg-alpha));
}
@supports (backdrop-filter: blur(1em)) {
.Class {
--bg-alpha: .1;
backdrop-filter: saturate(200%) blur(1.25em);
}
}
</style>
</head>
<body>
<!-- ... -->
</body>
</html>