Markdown Style Guide

This post shows how common markdown elements render in Lucent. Useful as a visual regression check when customizing the theme.

Text#

Plain paragraph with bold, italic, bold italic, strikethrough, inline code, a link to Hugo (external links open in a new tab automatically), and a footnote¹.

Blockquote#

The best way to predict the future is to invent it.

Nested markdown works inside quotes too.

Lists#

1. First ordered item
2. Second ordered item
   • Nested unordered item
   • Another one
3. Third

• Task list: done
• Task list: not yet

Table#

Code#

Inline code and fenced blocks:

def fib(n: int) -> int:
    """Return the n-th Fibonacci number."""
    a, b = 0, 1
    for _ in range(n):
        a, b = b, a + b
    return a  # iterative beats recursive here

With highlighted lines:

const items = await fetchItems();
const total = items.reduce((sum, i) => sum + i.price, 0); // ← highlighted
console.log(`Total: ${total}`);

Diff blocks:

- const theme = "plain";
+ const theme = "lucent";

Image#

Click to zoom — images are lazy-loaded and get a lightbox:

Horizontal rule#

Keyboard & mark#

Press Ctrl + K to search. You can also highlight text with <mark>: like this.