Add option to use default Chroma lexer for code fences with no language

I’d like to make a proposal/PR for a new config option in hugo/markup/highlight. It would address #8913 and possibly #8824: Code fences with no language ``` are handled differently from ```plain code fences, causing a bit of extra work in Markdown prep.

The code fence with no language doesn’t pass through Chroma, meaning the output is just:

<pre tabindex="0"><code>horses never run in the wind
</code></pre>

Whereas the output with ```plain is:

<div class="highlight">
  <pre
    tabindex="0"
    style="
      background-color: #fff;
      -moz-tab-size: 4;
      -o-tab-size: 4;
      tab-size: 4;
    "
  ><code class="language-plain" data-lang="plain"><span style="display:flex;"><span>horses, in fact, do love to run in the wind. The previous code block is incorrect.
</span></span></code></pre>
</div>

This isn’t a bug; the simpler behavior when there’s no language specified is defined in CommonMark. However, since Hugo already extends the syntax highlighting behavior using Chroma, I think there should be an option to effectively alias ``` to ```plain.

The problem, as I’ve encountered it, is that on the blog I maintain, most people just write ``` for plain code blocks, expecting it to be put into the same type of code block. Applying styles directly to the <pre> block is too general and could mess up <pre> blocks that have nothing to do with syntax highlighting, but using a more specific selector like .blog-content pre would be too specific; it’s nice to apply styling to div.highlight and it’d be better to not manually review every blank code block to maker sure it has a plain tag.

I’d like to add an AlwaysUseChromaLexer highlight config option, which could be enabled to assume that ``` should “alias” to ```plain. Any thoughts before I make a proposal in the repo? I’m happy to make the PR if this gets approved.

You can handle this already with a code block render hook. See documentation.

1 Like