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.jsaddEventListener("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>