Full Walkthrough: Bear Theme Syntax Guide
A comprehensive guide showcasing Markdown syntax and theme features including basic elements, code blocks, tables, and audio player functionality.
This comprehensive guide demonstrates the full range of Markdown syntax and theme features available in this Hugo blog theme. It showcases how basic HTML elements are styled and introduces special features like the audio player.
Text Formatting & Headings
The following sections demonstrate the six levels of section headings available. <h1> is the highest section level while <h6> is the lowest.
H1
H2
H3
H4
H5
H6
Paragraphs & Text Flow
Standard paragraph text flows naturally within the theme. Here’s an example with Lorem Ipsum-style content:
Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.
Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.
Blockquotes & Citations
The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.
Blockquote without attribution
Tiam, ad mint andaepu dandae nostion secatur sequo quae. Note that you can use Markdown syntax within a blockquote.
Blockquote with attribution
Don’t communicate by sharing memory, share memory by communicating.
— Rob Pike1
Tables & Data Display
Tables aren’t part of the core Markdown spec, but Hugo supports them out-of-the-box. Here are examples of different table formatting options:
| Name | Age |
|---|---|
| Bob | 27 |
| Alice | 23 |
Inline Markdown within tables
| Italics | Bold | Code |
|---|---|---|
| italics | bold | code |
Code Blocks & Syntax Highlighting
This theme supports multiple ways to display code, each with its own styling and use cases.
Code block with backticks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>
Code block indented with four spaces
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>
Code block with Hugo’s internal highlight shortcode
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>Lists & Organization
Different list types help organize content hierarchically and provide clear structure for information.
Ordered List
- First item
- Second item
- Third item
Unordered List
- List item
- Another item
- And another item
Nested list
- Fruit
- Apple
- Orange
- Banana
- Dairy
- Milk
- Cheese
Special HTML Elements
The theme properly styles various HTML elements for enhanced typography and user experience.
GIF is a bitmap image format.
H2O
Xn + Yn = Zn
Press Command + Shift + D to end the session.
Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.
Images & Media
This section demonstrates how to add images to your blog posts using Markdown syntax.
Basic image with alt text
What you’ll see: A blue placeholder image with the text “Sample Image” displayed inline with your content.
Image with link
What you’ll see: A green placeholder image that acts as a clickable link to the specified URL.
Image with custom styling
<img src="https://via.placeholder.com/350x200/E74C3C/FFFFFF?text=Styled+Image"
alt="Styled image with border"
style="border: 3px solid #2C3E50; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);" />
What you’ll see: A red placeholder image with a dark border, rounded corners, and a subtle shadow effect.
Image with caption
<figure>
<img src="https://via.placeholder.com/450x250/9B59B6/FFFFFF?text=Figure+Caption" alt="Image with figure caption" />
<figcaption><em>Figure: An image with proper semantic captioning</em></figcaption>
</figure>
What you’ll see: A purple placeholder image wrapped in a semantic figure element with an italicized caption below it.
The last but not the least, examples above use placeholder images for demonstration. In your actual posts, replace the URLs with real image paths from your Hugo static directory (e.g., /images/your-image.jpg) or external sources with proper attribution.
Audio Player Features
This theme includes a custom audio player that integrates seamlessly with blog posts. The audio player features:
- Play/pause button with hover effects
- Progress bar that matches the theme colors
- Current time display
- Volume control and mute button
- Keyboard accessibility
- Responsive design that works on all devices
How to Add Audio to Posts
To include an audio player in any blog post, simply add the audio parameter to your front matter:
title = "My Blog Post"
audio = "/audio/my-audio-file.aac"
The audio player supports common audio formats:
- AAC (.aac)
- MP3 (.mp3)
- WAV (.wav)
Audio Player Styling
The audio player automatically adapts to the theme’s color scheme, including dark mode support. It uses the same design language as the rest of the blog for a cohesive experience.
The player is positioned right after the post metadata (author, read time, date) and before the main content, making it easily discoverable for readers who want to listen to the audio version of your post.
This guide demonstrates how the theme handles various content types and provides a reference for creating rich, well-formatted blog posts with both visual and audio elements.
Comments