Code Block Examples

Examples

Samples are copied from the Expressive Code docs.

Syntax Highlighting

JavaScript

function greet(name) {
    console.log(`Hello, ${name}!`);
}


greet('World');

Python

def greet(name):
    if not name:
        raise ValueError("Name is required")
    print(f"Hello, {name}!")


try:
    greet('World')
    greet('')  # This will raise an exception
except ValueError as e:
    print(e)

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            color: #333;
        }
        h1 {
            color: #007acc;
        }
    </style>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a more complex HTML example with inline CSS.</p>
    <script>
        document.querySelector('h1').addEventListener('click', () => {
            alert('Hello, World!');
        });
    </script>
</body>
</html>

CSS

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    color: #333;
    margin: 0;
    padding: 0;
}


h1 {
    color: #007acc;
    text-align: center;
    margin-top: 20px;
}


p {
    font-size: 1.2em;
    line-height: 1.5;
    margin: 20px;
}

Rendering ANSI escape sequences

Terminal window
ANSI colors:
- Regular: Red Green Yellow Blue Magenta Cyan
- Bold:    Red Green Yellow Blue Magenta Cyan
- Dimmed:  Red Green Yellow Blue Magenta Cyan


256 colors (showing colors 160-177):
160 161 162 163 164 165
166 167 168 169 170 171
172 173 174 175 176 177


Full RGB colors:
ForestGreen - RGB(34, 139, 34)


Text formatting: Bold Dimmed Italic Underline

Editor & Terminal Frames

Code editor frames

my-test-file.js
console.log('Title attribute example')
src/content/index.html
<div>File name comment example</div>

Terminal frames

Terminal window
echo "This terminal frame has no title"
PowerShell terminal example
Write-Output "This one has a title!"

Overriding frame types

echo "Look ma, no frame!"
PowerShell Profile.ps1
# Without overriding, this would be a terminal frame
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
New-Alias tail Watch-Tail

Text & Line Markers

Marking full lines & 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"

Selecting line marker types (mark, ins, del)

line-markers.js
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

labeled-line-markers.jsx
<button
  role="button"
  {...props}
  value={value}
  className={buttonClassName}
  disabled={disabled}
  active={active}
>
  {children &&
    !active &&
    (typeof children === 'string' ? <span>{children}</span> : children)}
</button>
labeled-line-markers.jsx
<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
--- a/README.md
+++ b/README.md
@@ -1,3 +1,4 @@
+this is an actual diff file
-all contents will remain unmodified
 no whitespace will be removed either

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

Plaintext search strings

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

Regular expressions

console.log('The words yes and yep will be marked.')
Terminal window
echo "Test" > /home/test.txt
Terminal window
The word "yes" will have the letter "s" marked.
This also works for the "p" in "yep".
Terminal window
This block uses `/ye(?:s|p)/`, which causes the full
matching words "yes" and "yep" to be marked.

Word Wrap

Configuring word wrap per block

// Example with wrap
function getLongString() {
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}
// Example with wrap=false
function getLongString() {
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}

Configuring indentation of wrapped lines

// Example with preserveIndent (enabled by default)
function getLongString() {
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}
// Example with preserveIndent=false
function getLongString() {
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}

(Optional) Line Numbers

// This code block will show line numbers
console.log('Greetings from line 2!')
console.log('I am on line 3')
// Line numbers are disabled for this block
console.log('Hello?')
console.log('Sorry, do you know what line I am on?')

Code Block Examples

Author Imiloin License CC BY-NC-SA 4.0

https://imiloin.netlify.app/blog/examples/expressive-code-examples/