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. Try it:

git clone --single-branch -b hugo-forum-topic-55368 https://github.com/jmooring/hugo-testing hugo-forum-topic-55368
cd hugo-forum-topic-55368
hugo server
2 Likes

Wow, I had never tried using render hooks. This works perfectly! I’ll link to this discussion on those issues, since no one ever suggested that solution and they just went stale eventually. At least #8913 should probably be closed now.

1 Like

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.