Alert Shortcode Lookalike

tags: shortcode alert special-block attr_html

Description/Summary

ox-hugo Issue #119 Below doesn’t export to an alert shortcode, but the exported Markdown contains HTML that resembles the shortcode code (Courtesy: hugo-academic theme): <div class="alert alert-{{ .Get 0 }}"> {{ .Inner }} </div> There are few ways to mimic that. CSS # Source for alert CSS Note 1 The ox-hugo test site is not using FontAwesome, so using the unicode symbols 🛈 and ⚠ instead. Note 2 Also, due to the limitation that Markdown text cannot be simply wrapped in div, a hack is used, that requires using an empty div pair.

Content

ox-hugo Issue #119

Below doesn’t export to an alert shortcode, but the exported Markdown contains HTML that resembles the shortcode code (Courtesy: hugo-academic theme):

<div class="alert alert-{{ .Get 0 }}">
  {{ .Inner }}
</div>

There are few ways to mimic that.

CSS #

Source for alert CSS

Note 1

The ox-hugo test site is not using FontAwesome, so using the unicode symbols 🛈 and ⚠ instead.

Note 2

Also, due to the limitation that Markdown text cannot be simply wrapped in div, a hack is used, that requires using an empty div pair. So that requires overriding a bit of the default CSS from the theme.

CSS Override for Academic theme #

In summary, these overrides over the theme CSS would suffice:

/* Because of the empty div hack, the first paragraph will be the
   second child in the div. So use "p:nth-child(2)" instead of the
   original "p:first-child". */
div.alert p:nth-child(2)::before {
    position: absolute;
    top: -0.5rem;
    left: -2rem;
    font-family: 'FontAwesome';
    font-size: 1.5rem;
    color: #fff;
    content: '\f05a';
    /* Use below if not using FontAwesome */
    /* content: '🛈'; */
    width: 1.5rem;
    text-align: center;
}

div.alert-warning p:nth-child(2):before {
    content: '\f071';
    /* Use below if not using FontAwesome */
    /* content: '⚠'; */
}

Alert using Special Block #

Alert using only #+attr_html #

This will work only if the message is a single paragraph.

Page (Debug)

Page Params (Debug)

File Object (Debug)