a personal site

Remixing Bear Hug features to use markdown

I've been using Bear Hug's fun note styles and wave-y seperator on this blog. But I keep getting pulled out of the writing process once I put a bunch of html on the page.

I came across Better Admonitions for Bear Blog, which lists out a fascinating way to pass through custom CSS to markdown's built-in quote parsing. Using this approach, it's simple to remix Bear Hug's notes in a pure markdown and css way. We can do something like:

> #### Blue Note

> ##### Orange Note

> ###### Red Note

And it will render as:

Blue Note

Orange Note
Red Note

The code for this is adaptable for all six headings, but here it is with three:

blockquote:has(h4), blockquote:has(h5), blockquote:has(h6) {
    padding-top: 0em !important;
    padding-bottom: 1em;
    padding-left: 1.2em;
    padding-right: 1.2em;
    margin-left: 0px;   
    border-radius: 0 !important;
    text-align: left !important;
    font-family: var(--font-face) !important;
    font-size: 0.9em !important;
    width: 100%;
    display: block;
    font-style: normal;
  }

blockquote h4, blockquote h5, blockquote h6 {
    text-transform: uppercase;
    font-weight: 700 !important;
    display: flex;
    align-items: center;
    font-size: 0.8em;
    opacity: 0.75;
    padding-top: 1.2em;
}


/* Note (H4) */
blockquote:has(h4) {
  border-left: 2px solid var(--link-color);
  background: color-mix(in srgb, var(--link-color) 5%, transparent);
}


/* Orange (H5) */
blockquote:has(h5) { 
  border-left: 2px solid lightsalmon;
  background: color-mix(in srgb, lightsalmon 5%, transparent);

}

/* Red (H6) */

blockquote:has(h6) { 
  border-left: 2px solid red;
  background: color-mix(in srgb, red 5%, transparent);
}

These styles can probably altered further to allow for correct placement of things like pre tags etc.1

Curves

Bear Hug also has really cool curve separators that you can call using:
<div class="curve"></div>

You could style the default horizontal rule (--- in markdown) to look like that, but I prefer to keep it intact in case I do want a standard separator.

We can use a similar approach to the one above to get a custom markdown curve, called by typing >~~~ on its own line:



blockquote:has(.highlight), div {
  display: block;
  width: 8rem;
  height: 0.5rem;
  margin-block: 1.6em;
  margin-inline: auto;
  background-color: var(--link-color) !important;
  color: var(--link-color) !important;
  opacity: 0.8;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8'><path d='M0 4 Q30 0 60 4 T120 4' fill='none' stroke='black' stroke-width='2'/></svg>") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8'><path d='M0 4 Q30 0 60 4 T120 4' fill='none' stroke='black' stroke-width='2'/></svg>") center / contain no-repeat;
}
blockquote:has(.highlight) .highlight{
    background-color: var(--link-color) !important;
    color: var(--link-color) !important;
}

Pullquotes

OK this one's a little weird and markdown purists may disapprove, but I still thought I'd try it.2 In Bear Hug, you can do make something a pullquote by wrapping it in <div class="pullquote"></div>. In hack-ey markdown, a pullquote can be: ># *Your quote here*. This renders as:

Your quote here

The code for this:

blockquote:has(h1 em), blockquote:has(h1 em) h1 { 
  font-size: 1.2em !important;
  font-weight: 100;
  line-height: 1.4;
  color: var(--text-color);
  text-align: center;
  margin-block: 2rem;
  padding-inline: 10%;
  border: none;
  font-style: italic;
}

But why?

Is any of this actually any easier than just using html? Probably not.

The way markdown in Bear works, you also can typically put markdown in an html element. For instance this:

<div>

###### h6 text
*paragraph* **text**

</div>

Will render successfully as:

h6 text

paragraph text

So... you probably don't really need any of this. I've implemented it on my blog because I got sick of going in and out of markdown on my workout page's training log.

None of this really saves too much time. But I do love typing >~~~.

  1. On the topic of altering css: for as long as I live I will never truly understand the css !important flag. The placement of this was complete trial and error. Someone better at css than I can probably simplify these styles quite a bit. Or an LLM, but I am hesitant.↩

  2. Watch out markdown purists, Matt Cone over at Markdown Guide has a whole list of these hacks (which I discovered after writing this post... but hey, no idea is truly original).↩

#bear #tech