This post tests all markdown rendering capabilities of the theme.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Text Formatting

This is bold text and this is italic text.

This is bold and italic text.

This is strikethrough text.

This is underlined text (HTML).

This is highlighted text (HTML).

This is ^superscript^ and this is ~subscript~ (if supported).


External link to Google

Internal link to About page

Link with title

Autolink: https://www.example.com

Email link: email@example.com


Lists

Unordered List

Ordered List

  1. First item
  2. Second item
    1. Nested item 2.1
    2. Nested item 2.2
  3. Third item

Task List

Definition List

Term 1
Definition for term 1
Term 2
Definition for term 2
Another definition for term 2

Blockquotes

This is a simple blockquote.

This is a multi-line blockquote.

It spans multiple paragraphs.

This is a nested blockquote.


Code

Inline Code

Use console.log() to print to the console.

The printf() function in C is used for formatted output.

Inline code with backticks: `code`

Code Blocks

JavaScript

JAVASCRIPT
// JavaScript example
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

const result = fibonacci(10);
console.log(`Fibonacci(10) = ${result}`);
Click to expand and view more

Python

PYTHON
# Python example
def quicksort(arr):
    if len(arr) <= 1:
        return arr
    pivot = arr[len(arr) // 2]
    left = [x for x in arr if x < pivot]
    middle = [x for x in arr if x == pivot]
    right = [x for x in arr if x > pivot]
    return quicksort(left) + middle + quicksort(right)

numbers = [3, 6, 8, 10, 1, 2, 1]
print(quicksort(numbers))
Click to expand and view more

Bash

BASH
#!/bin/bash
# Bash script example
for i in {1..5}; do
    echo "Iteration $i"
done

# Function definition
greet() {
    echo "Hello, $1!"
}

greet "World"
Click to expand and view more

Go

GO
package main

import "fmt"

func main() {
    // Go example
    messages := make(chan string)

    go func() {
        messages <- "Hello from goroutine!"
    }()

    msg := <-messages
    fmt.Println(msg)
}
Click to expand and view more

Rust

RUST
// Rust example
fn main() {
    let numbers = vec![1, 2, 3, 4, 5];

    let sum: i32 = numbers.iter().sum();
    let product: i32 = numbers.iter().product();

    println!("Sum: {}, Product: {}", sum, product);
}
Click to expand and view more

SQL

SQL
-- SQL example
SELECT
    users.name,
    COUNT(orders.id) AS order_count,
    SUM(orders.total) AS total_spent
FROM users
LEFT JOIN orders ON users.id = orders.user_id
WHERE users.created_at > '2024-01-01'
GROUP BY users.id
HAVING COUNT(orders.id) > 5
ORDER BY total_spent DESC
LIMIT 10;
Click to expand and view more

JSON

JSON
{
  "name": "markdown-test",
  "version": "1.0.0",
  "dependencies": {
    "lodash": "^4.17.21",
    "axios": "^1.6.0"
  },
  "scripts": {
    "build": "hugo --minify",
    "dev": "hugo server -D"
  }
}
Click to expand and view more

YAML

YAML
# Hugo configuration example
baseURL: "https://example.com"
languageCode: "en-us"
title: "My Blog"
theme: "hugo-narrow"

params:
  author: "Santiago"
  description: "A personal blog"

menu:
  main:
    - name: "Home"
      url: "/"
      weight: 1
    - name: "Posts"
      url: "/posts/"
      weight: 2
Click to expand and view more

Plain Text (No Highlighting)

PLAINTEXT
This is a plain text code block.
No syntax highlighting applied.
    Preserves whitespace and indentation.
Click to expand and view more

LaTeX / Math Formulas

Inline Math

The quadratic formula is $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$.

Einstein’s famous equation: $E = mc^2$

The derivative of $f(x) = x^2$ is $f’(x) = 2x$.

Euler’s identity: $e^{i\pi} + 1 = 0$

Block Math (Display Mode)

The Gaussian integral:

$$\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$$

Maxwell’s equations in differential form:

$$\nabla \cdot \mathbf{E} = \frac{\rho}{\varepsilon_0}$$

$$\nabla \cdot \mathbf{B} = 0$$

$$\nabla \times \mathbf{E} = -\frac{\partial \mathbf{B}}{\partial t}$$

$$\nabla \times \mathbf{B} = \mu_0 \mathbf{J} + \mu_0 \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t}$$

The Schrödinger equation:

$$i\hbar\frac{\partial}{\partial t}\Psi(\mathbf{r},t) = \hat{H}\Psi(\mathbf{r},t)$$

A matrix example:

$$\mathbf{A} = \begin{pmatrix} a_{11} & a_{12} & a_{13} \ a_{21} & a_{22} & a_{23} \ a_{31} & a_{32} & a_{33} \end{pmatrix}$$

Summation and product notation:

$$\sum_{i=1}^{n} i = \frac{n(n+1)}{2}$$

$$\prod_{i=1}^{n} i = n!$$


Tables

Simple Table

Header 1 Header 2 Header 3
Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6
Cell 7 Cell 8 Cell 9

Aligned Table

Left Aligned Center Aligned Right Aligned
Left Center Right
Text Text Text
More More More

Complex Table

Feature Support Notes
Bold Yes Use **text**
Italic Yes Use *text*
Code Yes Use `code`
Links Yes Use [text](url)
Images Yes Use ![alt](url)
LaTeX Partial Depends on theme configuration

Images

Random Nature Image
Random placeholder image

Image with Caption (HTML)

Random Cityscape
This is a caption for the image

Horizontal Rules

Three different ways to create horizontal rules:





Footnotes

Here is a sentence with a footnote1.

Another sentence with a different footnote2.

You can also use named footnotes3.


Abbreviations

The HTML specification is maintained by the W3C.

*[HTML]: Hyper Text Markup Language *[W3C]: World Wide Web Consortium


Emoji (if supported)

😄 🚀 👍 ❤️ ⭐

Or using Unicode directly: 😀 🚀 👍 ❤️ ⭐


Keyboard Keys

Press Ctrl + C to copy.

Press Cmd + Shift + P to open the command palette.


Collapsible Sections (HTML)

Click to expand

This content is hidden by default.

  • You can include lists
  • And other markdown content
  • Inside the details tag
PYTHON
print("Even code blocks work!")
Click to expand and view more

Alerts / Admonitions (GitHub-style)


Escaping Characters

These characters need escaping: * _ ` # [ ] ( ) { } . ! \ |

Literal asterisks: *not bold*

Literal backticks: `not code`


HTML Elements

This is a custom HTML block with inline styles.

This is an HTML blockquote with a citation.


Conclusion

This post covers most markdown features. If any feature doesn’t render correctly, it may need additional theme configuration or Hugo shortcodes.


  1. This is the first footnote. ↩︎

  2. This is the second footnote with more content. ↩︎

  3. This is a named footnote. ↩︎

Copyright Notice

Author: Hugo Narrow

Link: http://localhost:1313/posts/markdown-rendering-test/

License: CC BY-NC-SA 4.0

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Please attribute the source, use non-commercially, and maintain the same license.

Start searching

Enter keywords to search articles

↑↓
ESC
⌘K Shortcut