Better Admonitions for Bear Blog

Changed website theme I changed my theme, so the admonition boxes look different on this page, but the CSS shown below still gives you the Github style admonition boxes you can see in this example. I wanted to add nice admonition boxes to my Bear Blog, but pasting HTML div structures felt clunky. Even worse, I couldn't use Markdown to add formatting or links to these boxes without resorting to raw HTML, which even more felt like having tag-soup. While adding buttons to my Markdown toolbar helped automate the process, it still didn't feel like a clean solution. Then I discovered how GitHub handles Admonitions using simple Markdown. Since that unfortunately doesn't work in Bear Blog, I hacked together a way to get that same Markdown-first experience. I decided to repurpose the lower-level headings inside a blockquote. This keeps the content in pure Markdown while giving the browser enough "hooks" to style them as Info, Warning, or Caution boxes. How it works To use this, just add the H4, H5, or H6 headline inside your blockquote, and you are done. Below you can see, what you need to type and how it is rendered, based on the CSS you find below. #### Did you know? You can find more tips like this in my archives or by following me on Mastodon. ##### Spoilers ahead! The following section discusses the ending of the book in great detail. Read at your own risk. ###### Wait, before you copy-paste... Always make sure to backup your current CSS theme before applying new styles, just in case! The CSS Add the following CSS to your Bear Blog theme to transform those headings into beautiful, GitHub-style boxes. Why this approach makes sense Yeap, I'm aware that headings have semantic meaning. However, there are several reasons why this is actually a superior solution for a blog: - By using H4-H6, you stay entirely within the Markdown syntax. This allows you to use links, bold text, or even lists inside your boxes, without having to add messy HTML and ending up in even more complex tag-soup. - This solution keeps your Markdown source code clean and readable. You don't have to worry about broken HTML tags or complex snippets in your editor. Following the Bear Blog principle, this helps keeping the writing process as simple and clean as possible. - This approach is a win for both accessibility and portability. Screen readers and RSS readers often ignore custom CSS and rely purely on HTML structure. By using headings, your admonitions become meaningful "landmarks". A user can jump directly to a warning in their screen reader, and an RSS subscriber will see a bold, clear headline instead of a flat block of text that lost its styling. #### TIP If you want to speed things up, my Markdown Power Editor for Bear Blog already has dedicated buttons for these admonitions. It lets you insert the Info, Warning, or Caution syntax with a single click.