(how can I get an aside?)

I’ve been avoiding using hugo shortcodes as much as possible because I’m not committed to always using hugo.

References:

{{- $type := default "note" (.Get "type") -}}
<aside class="DocsMarkdown--aside" role="note" data-type="{{ $type }}">
  {{- with .Get "header" }}
    <div class="DocsMarkdown--aside-header">{{- safeHTML . -}}</div>
  {{- end -}}

  {{- .Inner | .Page.RenderString (dict "display" "block") -}}
</aside>

via CloudFlare

{{/*
Asides show up as a colored box. Most things (headings, figures, iframes etc.)
can be placed inside a box and display well, but make sure to check the final result
especially on mobile.
class = notice/success/warning
will give blue/green/red box
*/}}
{{ $_hugo_config := `{ "version": 1 }` }}
{{- $class := .Get 0 | default "notice" -}}
{{- $markdown := .Inner | markdownify -}}
<aside class="{{ $class }}">
  {{ if not ( findRE "<[h|p][^>]*>" $markdown ) }}
    <p>{{ $markdown }}</p>
  {{ else }}
    {{ $markdown }}
  {{ end }}
</aside>

via discoverthree-js

But what I really want to start is just something like:

<aside class="irt-aside">
  {{ .Inner | markdownify }}
</aside>

via Ottowa civic tech (their css)

Test of {{% aside %}} some multiline content with mark down {{% /aside %}}:

It was!

But I have no styling for an aside tag.

There are fancier ways to

Or maybe your theme, like the one I use (etch), already gathers resources from the assets folder and you can replace the head.html partial

Relevant section of original file:

    {{ $resources := slice -}}
    {{ $resources = $resources | append (resources.Get "css/main.css") -}}
    {{ $resources = $resources | append (resources.Get "css/min770px.css") -}}
    {{ $dark := .Site.Params.dark | default "auto" -}}
    {{ if not (eq $dark "off") -}}
        {{ $resources = $resources | append (resources.Get "css/dark.css" | resources.ExecuteAsTemplate "dark.css" .) -}}
    {{ end -}}

    {{ if .Site.Params.highlight -}}
        {{ $resources = $resources | append (resources.Get "css/syntax.css") -}}
    {{ end -}}

    {{ $resources = $resources | append (resources.Get "css/aside.css") -}}
    {{ $css := $resources | resources.Concat "css/style.css" | minify }}
    {{ printf `<link rel="stylesheet" href="%s">` $css.RelPermalink | safeHTML }}

So I moved a copy of the head.html to my local partials folder and right above the call to concat and minify added:

    {{ $resources = $resources | append (resources.Get "css/aside.css") -}}

If you’ve already customized your main css, consider just throwing the new aside spec in there. Fewer changed files to track after an update. I don’t think the theme I chose is getting updates anymore, so I’m not worried about that.

I don’t really have time to swap in CSS brain so for now I mostly cribbed off of this theme’s code fence CSS. Unlike the example I did not add a class to my shortcode partial.

main#content aside {
    /* VSCode auto completed this, sure! */
    font-family: system-ui, -apple-system, 
    BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 
    Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

main#content aside {
    font-size: 0.96em;
    padding: 0 5px;
}

main#content aside {
    display: block;
    overflow-x: auto;
    /*font-size: 14px;
    font-size: 1.4rem;*/
    margin: 0px 20px;
    padding: 1.5rem 1.5rem;
    /*line-height: 1.4;*/
    border: 1px solid #b1b1b1;
    border-radius: 1px;
}

Not quite ready for production, but progress.