Code Blocks

Add syntax-highlighted code blocks with line highlighting, filenames, diff output, and 100+ languages in Hugo Markdown.

Basic Code Block

Wrap code in triple backticks with an optional language identifier:

```python
def hello():
    print("Hello, world!")
```

def hello():
    print("Hello, world!")

Common languages are highlighted automatically. Some popular examples:

For non-standard languages, you may need to enable them in your configuration.

Highlight specific lines to draw attention:

```python {2}
def hello():
    print("Hello, world!")  # This line is highlighted!
    return True
```

def hello():
    print("Hello, world!")  # This line is highlighted!
    return True

```js {1, 3-5}

This highlights line 1 and lines 3 through 5.

Use single backticks for inline code:

Run `npm install` to install dependencies.

Run npm install to install dependencies.

If your code contains backticks, use double backticks:

Use `` `code` `` for inline code.

Add a title to your code block to show the filename:

```python title="hello.py"
def hello():
    print("Hello!")
```

hello.py

def hello():
    print("Hello!")

Show additions and removals with the diff language:

```diff
- const old = "before";
+ const new = "after";
  const unchanged = "same";
```

- const old = "before";
+ const new = "after";
  const unchanged = "same";

Ownable uses Expressive Code for code blocks, which provides syntax highlighting, line highlighting, code titles, and more out of the box.