What happened to inline code highlighting?

support
1

Hello everyone!

I was trying to set up a new hugo webpage, but somehow I discovered that the inline blocks of code `like this one` do not apply the same styles as with triple backtick code fence

```
like this
```

with out specifying any language (only three backticks).

I used hugo some while ago, and I remember the inline single backtick was working alright, now it just bolds the text around, and as I can see in the rendered html, the <code> blocks are generated without any class, whereas in the triple backtick code fence, it’s generated with:

<code class="language-sh" data-lang="sh">
</code>

Any ideas?
Thanks a lot in advance :slight_smile:

2

Hi @blueprismo and welcome here,

the way Hugo handles code highlighting depends on multiple parameters, like the settings in your config files (config.toml, config.yml or markup.yml).

You should share the content of this file, or even better, a complete git repo to allow others to check.
Additional hint: I’m using this cheatsheet to quickly test every markdown features (Source code)

All the best,
Yann

3

Markdown provides three methods to render code:

Method Syntax highlighting
Indented code blocks Not possible
Fenced code blocks Enabled by default
Inline (code spans) Must use shortcode

The ability to highlight code spans was introduced in v0.101.0. Using the built-in shortcode:

Something {{< highlight go "hl_inline=true, style=github" >}}fmt.Println(a){{< /highlight >}} inline.

Yes, that’s rather verbose. If you need to frequently highlight code spans, create your own shortcode.

layouts/shortcodes/h.html

{{ $opts := dict "hl_inline" true "style" "github" }}
{{ highlight .Inner (.Get 0) $opts }}

Then you can do:

Something {{< h go >}}fmt.Println(a){{< /h >}} inline.
2 Likes
4

Hello everyone and thanks for your kind and fast response.
My configuration regarding markdown is the following:

markup:
  highlight:
    anchorLineNos: false
    codeFences: true
    guessSyntax: true
    lineAnchors: ""
    lineNoStart: 1
    lineNos: false
    lineNumbersInTable: true
    noClasses: true
    noHl: false
    tabWidth: 4

I don’t have it published yet as I’m developing it, I can do that if needed.
I attach a screenshot with two inline markdown code
One line is highlighted by my mouse.
The other one is the NgOnInit.

image
image1864×368 67.8 KB

I have read in the doc that Inline code should be used with shortcodes, but that’s a bit rudimentary having the native markdown inline backticks. I know it worked some time ago.
Thanks in advance

5

I can assure you that this code span in this markdown…

something `fmt.Println(a)` inline

…was never syntax highlighted by Hugo.

Perhaps you were/are using a theme with a JavaScript highlighter. If so, you’ll need to raise an issue with the theme author.