A code element rendered using standard markdown codeblock syntax.

Features

• Supports standard Markdown codeblock syntax with triple backticks.
• Syntax highlighting for various programming languages.
• Optional line numbers for code readability.
• Copy-to-clipboard functionality for easy code sharing.
• Supports highlighting specific lines or ranges.

Syntax

Basic codeblock syntax (no syntax highlighting):

code here

Codeblock with syntax highlighting (specify language after opening backticks):

```language
code here
```

Codeblock with attributes :

```language {linenos=table hl_lines=["2", "4-5"] showtitle=false showcopy=false title="Example Code"}
code here
```

Examples

Example 1: Simple Codeblock (no syntax highlighting)

```
console.log('Hello, World!');
```

Output:

console.log('Hello, World!');

Example 2: Codeblock with Syntax Highlighting

```javascript
function greet(name) {
    console.log('Hello, ' + name + '!');
}

greet('Hugo');
```

Output:

function greet(name) {
    console.log('Hello, ' + name + '!');
}

greet('Hugo');

Example 3: Codeblock with Line Numbers

Table Style Line Numbers (Default)

```python {linenos=table}
def add(a, b):
    return a + b
```

Output:

1
2

def add(a, b):
    return a + b

Inline Line Numbers

```python {linenos=inline}
def add(a, b):
    return a + b
```

Output:

1def add(a, b):
2    return a + b

Example 4: Codeblock with Highlighted Lines

```python {hl_lines=["2", "4-5"]}
def factorial(n):
    if n == 0:
        return 1
    else:
        return n * factorial(n-1)
```

Output:

def factorial(n):
    if n == 0:
        return 1
    else:
        return n * factorial(n-1)

Example 5: Hide elements

Hide Title

Hide the codeblock header/title:

```python {showtitle=false}
def add(a, b):
  return a + b
```

Output:

def add(a, b):
  return a + b

Hide Copy Button

Hide the copy-to-clipboard button:

```python {showcopy=false}
def add(a, b):
  return a + b
```

Output:

def add(a, b):
  return a + b

Hide Both Title and Copy Button

```python {showtitle=false showcopy=false}
def add(a, b):
  return a + b
```

Output:

def add(a, b):
  return a + b

Example 6 : Custom title

Set a custom codeblock title:

```python {title="main.py"}
def add(a, b):
  return a + b
```

Output:

def add(a, b):
  return a + b

Example 7: Wide Codeblock

Wrap a codeblock in wide partial to extend the width:

{{< wide >}}
```json
{
  "name": "freedom-demo",
  "version": "1.0.0",
  "description": "A Hugo theme demo site",
  "main": "index.js",
  "scripts": {
    "build": "hugo",
    "serve": "hugo server -D"
  },
  "dependencies": {
    "hugo": "^0.101.0"
  }
}
```
{{< /wide >}}

Output:

{
  "name": "freedom-demo",
  "version": "1.0.0",
  "description": "A Hugo theme demo site",
  "main": "index.js",
  "scripts": {
    "build": "hugo",
    "serve": "hugo server -D"
  },
  "dependencies": {
    "hugo": "^0.101.0"
  }
}