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

feature
1

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:

`/etc/fstab`:
'''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.
:wolf:W

2

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

3

This is minimal example of codeblock render hook:

layouts/_default/_markup/render-codeblock.html

{{ 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 -}}
  </code></pre></div>

{{ 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>
  </div>
{{ 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
markup:
  highlight:
    noClasses: false
3 Likes