Is there a good reason not to have a mechanism facilitating a title for code blocks?

Most of my use for hugo is making notes-for-future-me…

So I end up having lots of codeblocks with the content of files in them.

What I’d like to be able to do

((… and granted, this may already be a thing, and I’m just blind… ))

is assign a title to a codeblock

so that rather than:

'''shell {linenos=false, hl_lines=1}
LABEL=writable    /     ext4 defaults 0 1
LABEL=system-boot /boot vfat defaults 0 1

I could just do something like:

'''shell {linenos=false, title="/etc/fstab"}
LABEL=writable    /     ext4 defaults 0 1
LABEL=system-boot /boot vfat defaults 0 1

yes, I know I used singlequotes there in lieu of backticks.
I didn’t wanna try and figure out how to escape a code fence in a code fence in a discourse post, and It isn’t really relevant :slight_smile:

additionally, it might be nice if one could select the styling of a code-fenceed blob o text at the codefence scope… IE if one wanted to have blobs of code which represented files, vs commands… and so forcing some to be a specific style and otheres a different style, (or the default style specified in the site config)

but it doesn’t seem like that’s a thing that’s doable at the moment… not specifically chomping at the bit for it, hence mentioning as a casual aside… but it seemed valuable so I thought I’d mention it.

Thanks in advance.

I sincerely hope your day is going awesomely.
Life is short, and beauty is everywhere.

I’m pretty sure it’s doable, butt you need to create your own code block template.

This is minimal example of codeblock render hook:


{{ if transform.CanHighlight .Type }}
  {{/* Supported Chroma Language*/}}
  <div class="highlight">
  {{ with .Attributes.title }}
    <div class="highlight-title"><span>{{ . }}</span></div>
  {{ end }}
  <pre tabindex="0" class="chroma"><code class="language-{{ .Type }}" data-lang="{{ .Type }}">  
  {{- with transform.HighlightCodeBlock . -}}
    {{ .Inner }}
  {{- end -}}

{{ else }}
  {{/* Unsupported Language */}}
  <div class="highlight">
  {{ with .Attributes.title }}
    <div class="highlight-title"><span>{{ . }}</span></div>
  {{ end }}  
    <pre tabindex="0"><code class="language-{{ .Type }}" data-lang="{{ .Type }}">{{ .Inner }}</code></pre>
{{ end }}

  • {{ transform.CanHighlight string }} return boolean, check if code lang supported by chroma
  • {{ transform.HighlightCodeBlock codeBlockContext }}
    • codeBlockContext is current . of render-codeblock.html template context
  • transform.HighlightCodeBlock returns .Inner and .Wrapped
    • .Inner is the highlighted code only
    • .Wrapped is the default codeblock render without custom template

NOTE: i recommend to set markup.highlight.noClasses to false and use external stylesheet, because you will use the .Inner return from transform.HighlightCodeBlock, it’s not included with the injected <pre> tag with style attribute

# config.yaml
    noClasses: false