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.
Project Showcase Cards
You can use minimal, responsive cards to showcase your projects. These cards are designed to be clean and unobtrusive while still providing a professional presentation.
Basic Card Structure
Here’s an example of a project card with image on the right and text on the left:
Vibe Blogging Platform
A minimalist blogging platform built with Hugo and Bear theme. Features responsive design, audio support, and clean typography.
How to Use
To create your own project card, use this HTML structure:
<a href="your-project-url" class="project-card">
<div class="project-card-content">
<h3 class="project-card-title">Your Project Name</h3>
<p class="project-card-description">A brief description of your project and its key features.</p>
</div>
<img src="your-image-url" alt="Project preview" class="project-card-image">
</a>
Responsive Behavior
The cards are fully responsive:
- Desktop: Horizontal layout with image on the right
- Mobile: Vertical layout with image below the text
- Hover effects: Subtle border and shadow changes on hover
- Clickable: Entire card acts as a link to your project
Image Guidelines
- Recommended size: 120×80px for desktop, 16:9 aspect ratio for mobile
- Format: JPG, PNG, or WebP
- Optimization: Keep images under 100KB for fast loading
- Placement: Store images in
static/images/folder and reference with/images/filename.jpg
Multiple Cards Example
You can stack multiple cards to create a project gallery:
AI Customer Service Bot
Multilingual chatbot reducing customer service response time by 60%. Built with Python and OpenAI API.
Prompt Engineering Toolkit
Interactive prompt library and testing framework for LLM applications with 200+ curated examples.
The cards integrate seamlessly with your existing theme colors and automatically adapt to both light and dark modes.
API Pricing Display
This theme includes a specialized pricing card system designed for displaying API pricing information, inspired by OpenAI’s pricing structure. These cards are perfect for showcasing different service tiers, model comparisons, or pricing breakdowns.
GPT-Style Pricing Cards
Here’s an example of how to display API pricing using the dedicated pricing card components:
GPT-5
The best model for coding and agentic tasks across industries
Price
GPT-5 mini
A faster, cheaper version of GPT-5 for well-defined tasks
Price
GPT-5 nano
The cheapest version of GPT-5 for summarization and classification tasks
Price
GPT-5 Turbo
A high-speed model for real-time applications and conversational AI
Price
How to Use Pricing Cards
To create your own pricing display, use this HTML structure:
<div class="pricing-grid">
<div class="pricing-card">
<div class="pricing-card-header">
<h3 class="pricing-card-title">Service Name</h3>
<p class="pricing-card-description">Brief description of the service or model capabilities</p>
</div>
<hr class="pricing-card-separator" />
<div class="pricing-section">
<h4 class="pricing-section-title">Price</h4>
<div class="pricing-item">
<span class="pricing-item-label">• Input:</span>
<span class="pricing-item-value">$X.XXX / 1M tokens</span>
</div>
<div class="pricing-item pricing-item-cached">
<span class="pricing-item-label">• Cached input:</span>
<span class="pricing-item-value">$X.XXX / 1M tokens</span>
</div>
<div class="pricing-item">
<span class="pricing-item-label">• Output:</span>
<span class="pricing-item-value">
<span class="pricing-item-highlight">$XX.XXX / 1M tokens</span>
</span>
</div>
</div>
</div>
</div>
Pricing Card Features
The pricing cards include several specialized features:
- Responsive Grid Layout: Automatically adjusts from 3 columns on desktop to single column on mobile
- Hover Effects: Subtle animations and border color changes on hover
- Cached Pricing: Special styling for discounted cached input pricing with italic text
- Highlighted Values: Use
pricing-item-highlightclass to emphasize important pricing tiers - Multiple Sections: Support for additional pricing sections beyond the basic structure
- Dark Mode Support: Automatic adaptation to light and dark themes
Customization Options
You can customize the pricing cards by:
- Adding More Sections: Include additional
pricing-sectiondivs for features, limits, etc. - Highlighting Tiers: Use
pricing-item-highlightfor featured or premium pricing - Custom Descriptions: Add detailed capability descriptions in the header
- Flexible Layout: The grid automatically adjusts to any number of cards
Example Use Cases
These pricing cards are perfect for:
- API Documentation: Display different model tiers and their costs
- Service Comparison: Compare features and pricing across multiple offerings
- Product Tiers: Showcase different subscription levels or usage plans
- Resource Pricing: Display compute, storage, or bandwidth costs
The pricing display integrates seamlessly with your blog’s existing design system and provides a professional way to present pricing information that matches modern API documentation standards.
Comments