Rich Content and Shortcodes

Posted on January 1, 2010  •  3 minutes  • 442 words

This page is a living cookbook of content features available in this site. It combines standard Markdown, Hugo built-in shortcodes, and custom shortcodes in one place so future posts are fast to author.

Markdown Basics

Text formatting

You can use bold, italic, strikethrough, and inline code like dotnet build.

Lists

1. Ordered list item
2. Another ordered list item
3. One more ordered list item

• Unordered list item

• Another unordered item

• Yet another item

• Task list complete item

• Task list pending item

Blockquote

Good writing is clear thinking made visible.

You can include Markdown inside blockquotes.

Table

Footnote

Footnotes are useful for side notes in longer posts.¹

Code Blocks

Fenced code block

public static int Add(int a, int b)
{
    return a + b;
}

Hugo highlight shortcode

This is useful when you want line numbers and highlighted lines.

1
2
3
4

public static int Add(int a, int b)
{
    return a + b;
}

Multi-tab code blocks (custom pattern)

This site does not have a built-in tabs shortcode right now, but you can still create clean tabbed code snippets with rawhtml.

        
.card {
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  padding: 1rem;
  background: #f9fafb;
}
        
      

        
<div class="card">
  <h3>Sample Card</h3>
  <p>This is HTML shown in a tab.</p>
</div>
        
      

To separate tab content, each tab needs three matching values:

• input id (example: tab-css)
• label for (example: for="tab-css")
• panel id used by CSS selector (example: #panel-css)

Copy/paste source:

{{< rawhtml >}}
<!-- Insert the HTML/CSS tab block here -->
{{< /rawhtml >}}

Built-in Hugo Shortcodes

Gist

Source:

{{< gist LanceMcCarthy 63815c41569ad877f24121be679d3638 >}}

YouTube privacy-enhanced embed

Source:

{{< youtube ZJthWmvUzzc >}}

Vimeo simple embed

Source:

{{< vimeo_simple 48912912 >}}

Custom Shortcodes In This Site

Twitter simple shortcode

Source:

{{< twitter_simple 1085870671291310081 >}}

Bluesky simple shortcode

View this post on Bluesky

Source:

{{< bluesky_simple id="3ljf67zzyok2s" handle="lance.boston" >}}

Raw HTML shortcode

Use this when you need custom HTML/CSS/JS in a post.

Source:

{{< rawhtml >}}
<div>Custom content</div>
{{< /rawhtml >}}

Build timestamp shortcode

Build timestamp: 2026-04-06 20:38 UTC

Source:

{{< build_timestamp >}}

Math (KaTeX)

Inline math: $E=mc^2$

Block math:

$$ \int_0^1 x^2,dx = \frac{1}{3} $$

This page enables math with front matter:

math: true

Authoring Notes

• Use <!--more--> to control the summary split.
• Use fenced code blocks for quick snippets.
• Use highlight shortcode when you need line numbers or line emphasis.
• Use rawhtml for custom widgets like tabbed code examples.
• Add new custom shortcodes under layouts/shortcodes to keep content clean.