Labeling block quotes

Pardon if this has been addressed—couldn’t find it in the archives.

Some versions of Markdown allow labeling of block quotes, a la Obsidian:

>[!Quote]

When I post from Obsidian to Micro.blog using the Micro.publish plugin, the labels show as plain text. I’ve seen labeled blocks in posts on this forum, so I’m guessing it’s possible, but I can’t find a reference to the syntax.

Any pointers?

Hugo uses Goldmark, I do not see any options around labeled quotes (which I’m not even sure what that renders to in HTML).

1 Like

Cool–I’ll dig into the Goldmark and CommonMark docs to see if I can figure something out. If not, it’s not a big deal–block quotes work fine, just not the labels. The only formatting tools I see in the micro.blog editor are bold, italic, and links, so I wasn’t expecting a lot of options.

Labeled block quotes is one of those Markdown features that is implemented only in some flavors and can vary in syntax or available labels across even the flavors that support it. I might be able to strip them out in the micro.publish Obsidian plugin or just use a linter to remove them before I publish.

Thanks for sharing that because I didn’t even know labelled block quotes were a thing. Curious what the use case is for them?

We keep the Micro.blog editor toolbar extremely sparse to avoid clutter. It does make discovery a little harder… We used to link to the Markdown reference and we should probably add that link back.

Ah-- what you’re talking about is not called a labeled quote block, but rather a callout. Callouts are not supported in goldmark directly, and while there is a goldmark extension for them, it does not come installed by default for goldmark or the version that comes along with Hugo so you will not be able to use it with Micro.blog.

~~However, blockquotes do have render hooks, so you could add a custom renderhook to your blog. Blockquote render hooks | Hugo ~~

That will not work with the callout syntax from Obsidian, however.

Alerts/callouts are supported as of 0.132, but micro.blog only supports 0.117 right now.

Just looked at the current CommonMark spec and the GFM spec.

  • There is an extensive discussion of nested blockquotes, blank lines, and laziness, but none of labels.
  • There are extensive discussions of labels in links, but not in blockquotes.
  • tl;dr Labeled blockquotes are not part of the CommonMark or GFM specs.

@manton Labeled blockquotes are helpful marking blocks as callouts, tips, safety issues, etc. Sometimes the label is rendered as text, and sometimes there is an added pictograph.

  • Yep, Obsidian does call them Callouts.
  • Zettlr also supports them–here is an example from their documentation.
  • Typora supports them as well—that is my go-to standalone Markdown editor.
  • Zettlr does everything including the kitchen sink, but Typora has a more minimal and stylish interface. I’m a geek, but I spent about eight years in graphic design, and I dig stylish.

I’ve been using micro.blog mostly as a simple way to post my thoughts on the web, and I haven’t dug too deeply into Hugo or formatting, other than to tweak the heading CSS on a standard theme. I’ll look at the render hooks reference, but as I’m not a web developer (I do IT support as a day job), I may not be able to effectively use the information. :stuck_out_tongue_winking_eye:

The render hooks won’t work either-- they were added at the same time as adding supports for callouts-- so you’ll have to wait for Micro.blog to support Hugo 0.132, at which point this will work natively.

1 Like

Where can I find the current version of Hugo in use? Is there an official blog account or announcements page? Like I said, I haven’t dug into micro.blog too deeply, but I can generally figure out tech stuff if someone points me to the right documentation.

Thanks for your help thus far—I was pretty much clueless. :roll_eyes:

@manton Catching on—I see you’re the founder. Thanks for responding to my newbie questions. :+1:t2: I appreciate the peaceful aesthetic you’ve created here.

I’ve read through the welcome page and TOC, and I just found the news feed. I think I’ve got a good start to having a clue.

kt

If you click on Design on the web version of Micro.blog you’ll see the hugo version on the top of that page. Right now 0.117 is the default and newest available.

Manton is also (essentially) the sole developer. So he’s the only one who’s going to fix things up for you eventually if they’re broken. The rest of us are just users.

1 Like

@jsonbecker Thanks for the background and the Hugo information. I was picking up that micro.blog is a bit of a micro.operation. :wink: Nothing wrong with that, but it’s good to know context.

FWIW, I happened on micro.blog because it was supported natively by Ulysses, which is the app that finally showed me I could write. I still have a FB account, but I avoid using it except for a few select groups. IG is a little better, but Zuckerberg is still involved. My Twitter account is long gone.

In the past I’ve mucked around in the Design tab a bit to tweak CSS, and I’ll take a deeper dive now.

Sounds like a good time for us to add the latest version of Hugo. I’m going to add it as an option today. It will be opt-in on the Design page, though, because I think some older themes still work better with the older version of Hugo.

Glad you discovered Micro.blog through Ulysses! Great app.

1 Like

I’ve added Hugo 0.140 to Micro.blog and I’m noticing a couple problems right away. The biggest is that .Site.Pages has been replaced with .Site.RegularPages. This will require tweaks to almost all themes for the home page and Archive page to work.

Oh that’s a big change. I hate Hugo’s versioning. It makes it utterly impossible to keep up with a sense of safety. I appreciate you making multiple versions available.

@manton Thanks for doing that! I tried posting block quotes (callouts) with a [!Quote] label, and Hugo seems to simply ignore the label. That works fine for me–at least they aren’t displaying as plain text now. I’ll look at the Hugo docs to see if there are particular callout types they recognize, or if I need to add those to my CSS.

@jsonbecker I agree—you’d think they could have kept it more backward compatible.

Just checked, and yep, it broke my archive. If I revert to 0.117, that fixes my archive but breaks callouts. It also throws a theme error (on the Design tab). I may be able to fix that by reloading the theme from the default–I’ve made all my changes in the custom CSS.

Quote is not a supported alert type.

Hugo supports:

> [!NOTE]
> Useful information that users should know, even when skimming content.

> [!TIP]
> Helpful advice for doing things better or more easily.

> [!IMPORTANT]
> Key information users need to know to achieve their goal.

> [!WARNING]
> Urgent info that needs immediate user attention to avoid problems.

> [!CAUTION]

And you almost certainly need to add your own CSS to style it.

This is the template that it will use to render:

{{ $emojis := dict
  "caution" ":exclamation:"
  "important" ":information_source:"
  "note" ":information_source:"
  "tip" ":bulb:"
  "warning" ":information_source:"
}}

{{ if eq .Type "alert" }}
  <blockquote class="alert alert-{{ .AlertType }}">
    <p class="alert-heading">
      {{ transform.Emojify (index $emojis .AlertType) }}
      {{ with .AlertTitle }}
        {{ . }}
      {{ else }}
        {{ or (i18n .AlertType) (title .AlertType) }}
      {{ end }}
    </p>
    {{ .Text }}
  </blockquote>
{{ else }}
  <blockquote>
    {{ .Text }}
  </blockquote>
{{ end }}

So you can use to style a blockquote with the classes generated there.

1 Like

Yep—I saw that in the documentation after I posted.

I haven’t messed with templates yet. I take it that the code you posted is a template and not CSS—I need to read up on what i18n is. If I’m understanding correctly, I could add “quote” to the dictionary, then define CSS for alert-quote. I’d also need to define an emoji—is Emojify particular to Hugo or the templating language, or is it an external procedure call? FWIW, https://emojify.net is mildly amusing.

Found it: transform.Emojify | Hugo

The $emojis dictionary maps the alert type onto the appropriate emoji, using the standard Unicode names:

https://emojipedia.org

I’m not finding any quote emoji, but I could use the speech balloon: :speech_balloon: or speech bubble :left_speech_bubble: or the open book :open_book: