This is a comprehensive style gallery demonstrating all common markup elements used on the Latacora website. This post serves multiple purposes:

1. Visual review of styling for headings, lists, blockquotes, and other elements
2. Testing unlisted post functionality (#276)
3. Demonstrating heading sizes and table of contents (#266)
4. Quick reference for content authors

Headings #

The following demonstrates all heading levels:

Heading 1 #

This is the largest heading level, typically reserved for the page title (set in front matter).

Heading 2 #

Major section headings use H2. These appear in the table of contents.

Heading 3 #

Subsection headings use H3. These provide structure within major sections.

Heading 4 #

Further subdivision uses H4. Less commonly used but available.

Heading 5 #

Even more specific subsections can use H5.

Heading 6 #

The smallest heading level is H6, rarely needed in practice.

Paragraphs and text formatting #

This is a regular paragraph with bold text, italic text, and bold italic text. You can also use inline code for technical terms, commands, or code snippets within sentences.

Paragraphs are separated by blank lines. This is the second paragraph, demonstrating the default spacing between paragraphs.

You can use strikethrough text to indicate deletions or corrections. Highlighted text can draw attention to important points (if supported by the theme).

Lists #

Unordered lists #

Basic unordered list:

• First item
• Second item
• Third item
• Fourth item

Nested unordered list:

• Top level item
  • Nested item 1
  • Nested item 2
    • Deeply nested item
    • Another deeply nested item
  • Back to second level
• Another top level item
  • With nested content
    • And deeper nesting

Ordered lists #

Basic ordered list:

1. First step
2. Second step
3. Third step
4. Fourth step

Nested ordered list:

1. Major step one
   1. Sub-step 1a
   2. Sub-step 1b
2. Major step two
   1. Sub-step 2a
      1. Detailed step 2a-i
      2. Detailed step 2a-ii
   2. Sub-step 2b
3. Major step three

Mixed lists #

You can combine ordered and unordered lists:

1. First numbered item
   • Bulleted sub-item
   • Another bulleted sub-item
2. Second numbered item
   • More bullets
     1. Nested numbers
     2. Within bullets

Task lists #

GitHub-flavored Markdown supports task lists:

• Incomplete task
• Completed task
• Another incomplete task
  • Completed subtask
  • Incomplete subtask

Blockquotes #

Simple blockquote:

This is a blockquote. It’s typically used for quotations, callouts, or emphasized text that needs to stand apart from the main content.

Nested blockquote:

This is the outer quote.

This is a nested quote within the first quote.

It can contain multiple paragraphs.

Back to the outer quote level.

Blockquote with formatting:

You can use bold, italic, and code within blockquotes.

• Even lists
• Work within
• Blockquotes

# And code blocks
def hello():
    print("Hello from a blockquote!")

Code blocks #

Inline code: Use git status to check your working directory.

Fenced code block without syntax highlighting:

This is a plain code block
No syntax highlighting
Just monospace text

Python with syntax highlighting:

def fibonacci(n):
    """Calculate the nth Fibonacci number."""
    if n <= 1:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)

# Example usage
for i in range(10):
    print(f"F({i}) = {fibonacci(i)}")

JavaScript with syntax highlighting:

// Event listener for theme toggle
document.getElementById("theme-toggle").addEventListener("click", () => {
  const currentTheme = document.documentElement.getAttribute("data-theme");
  const newTheme = currentTheme === "dark" ? "light" : "dark";

  document.documentElement.setAttribute("data-theme", newTheme);
  localStorage.setItem("theme", newTheme);
});

Shell commands:

# Clone the repository
git clone https://github.com/latacora/latacora.github.io.git

# Navigate to the directory
cd latacora.github.io

# Run the development server
bb dev

Clojure code:

(defn greet
  "Greet a person by name."
  [name]
  (str "Hello, " name "!"))

(greet "World")
;; => "Hello, World!"

Tables #

Basic Markdown Tables #

Simple table:

Table with alignment:

Larger example markdown table:

Tables with Tailwind Column Widths #

To control column widths precisely, use HTML tables with Tailwind classes. Here are various approaches:

Fixed Width Columns #

Use w-{size} utilities to set specific pixel/rem widths:

Fractional Width Columns #

Use w-1/{n} utilities for proportional widths:

Mixed Width Columns #

Combine auto-width with specific widths for flexible layouts:

Minimum Width Columns #

Use min-w-{size} to ensure columns don’t get too narrow:

Comparison: Full-Width vs. Auto-Width Tables #

Full-width table with w-full on the table element:

Auto-width table with w-auto on the table element:

Advanced Example: Data Table with Precise Widths #

Key Tailwind classes for table column widths:

• w-{size}: Fixed width (e.g., w-32, w-48, w-64, w-96)
• w-1/{n}: Fractional width (e.g., w-1/2, w-1/3, w-1/4, w-2/3, w-3/4)
• w-auto: Auto width based on content
• w-full: 100% width
• min-w-{size}: Minimum width (e.g., min-w-[8rem], min-w-[200px])
• max-w-{size}: Maximum width (e.g., max-w-xs, max-w-md, max-w-lg)

Usage notes:

1. Apply width classes to <th> or <td> elements, not the table itself (unless controlling overall table width)
2. Use w-full on the <table> element for full-width tables
3. Use w-auto on the <table> element for content-sized tables
4. Combine with other Tailwind utilities for borders, padding, alignment, etc.
5. For arbitrary values not in Tailwind’s scale, use bracket notation: min-w-[200px]

Links and Images #

Links #

External link to Latacora

Internal link to home

Link with title

Reference-style link: Latacora and GitHub

Images #

Standard image with alt text:

Image with title:

Horizontal rules #

Horizontal rules can separate major sections:

Different syntax for the same result:

And another variation:

Math (KaTeX) #

The site automatically enables KaTeX when LaTeX math is detected.

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

Display math:

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

Matrix example:

Technical note about matrices: The matrix above is wrapped in a <div> tag to prevent markdown’s goldmark processor from consuming the backslashes before KaTeX sees them. In LaTeX, \\ creates line breaks in matrices, but markdown treats backslashes as escape characters. By wrapping the math in raw HTML (which works because unsafe = true in hugo.toml), the LaTeX syntax passes through unchanged to KaTeX. Without the wrapper, you would need to double-escape as \\\\, which is less readable.

Unlisted post behavior #

In production builds:

• This post should NOT appear in blog lists
• This post SHOULD be accessible via direct URL: /blog/2024/01/15/test-unlisted-post/

In development mode (bb dev):

• This post SHOULD appear in blog lists (for easy access during development)
• This post SHOULD be accessible via direct URL

HTML in Markdown #

Since the site uses goldmark in unsafe mode, you can embed HTML:

print("Even code blocks!")

End of Style Gallery - This comprehensive demonstration should help review all styling elements across the Latacora website.