Code Block Examples

Apr 1, 2025 — Coding

All code blocks are powered by Expressive Code (opens in a new window). Please read its documentation to learn more.

Regular syntax highlighting:

/**
 * Returns a date in the format "MMM DD, YYYY"
 */
export function defaultDateFormat(date: Date): string {
  return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })
}

A single line item in the shell:

npx secco init

Titles for code blocks:

/**
 * Returns a date in the format "YYYY"
 */
export function yearDateFormat(date: Date): string {
  return date.toLocaleDateString('en-US', { year: 'numeric' })
}

For the automatic terminal frames (e.g. when shell is used) titles look like this:

npx secco init

Mark full lines and line ranges:

// Line 1 - targeted by line number
// Line 2
// Line 3
// Line 4 - targeted by line number
// Line 5
// Line 6
// Line 7 - targeted by range "7-8"
// Line 8 - targeted by range "7-8"

Use other line marker types (mark, ins, del):

function demo() {
  console.log('this line is marked as deleted')
  // This line and the next one are marked as inserted
  console.log('this is the second inserted line')

  return 'this line uses the neutral default marker type'
}

Adding labels to line markers:

<button
  role="button"
  {...props}
  value={value}
  className={buttonClassName}
  disabled={disabled}
  active={active}
>
  {children &&
    !active &&
    (typeof children === 'string' ? <span>{children}</span> : children)}
</button>

Adding long labels on their own lines:

<button
  role="button"
  {...props}

  value={value}
  className={buttonClassName}

  disabled={disabled}
  active={active}
>

  {children &&
    !active &&
    (typeof children === 'string' ? <span>{children}</span> : children)}
</button>

Using diff-like syntax:

this line will be marked as inserted
this line will be marked as deleted
this is a regular line

Combining syntax highlighting with diff-like syntax:

function thisIsJavaScript() {
  // This entire block gets highlighted as JavaScript,
  // and we can still add diff markers to it!
  console.log('Old code to be removed')
  console.log('New and shiny code!')
}

Marking individual text inside lines:

function demo() {
  // Mark any given text inside lines
  return 'Multiple matches of the given text are supported';
}

Collapsible sections:

5 collapsed lines
// All this boilerplate setup code will be collapsed
import { someBoilerplateEngine } from '@example/some-boilerplate'
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'

const engine = someBoilerplateEngine(evenMoreBoilerplate())

// This part of the code will be visible by default
engine.doSomething(1, 2, 3, calcFn)

function calcFn() {
  // You can have multiple collapsed sections
3 collapsed lines
  const a = 1
  const b = 2
  const c = a + b

  // This will remain visible
  console.log(`Calculation result: ${a} + ${b} = ${c}`)
  return c
}

4 collapsed lines
// All this code until the end of the block will be collapsed again
engine.closeConnection()
engine.freeMemory()
engine.shutdown({ reason: 'End of example boilerplate code' })

Line numbers:

1
// This code block will show line numbers
2
console.log('Greetings from line 2!')
3
console.log('I am on line 3')