# What happened to inline code highlighting?

**URL:** <https://discourse.gohugo.io/t/what-happened-to-inline-code-highlighting/44342>\
**Category:** support\
**Created:** [May 13, 2023, 6:38am UTC](https://discourse.gohugo.io/t/what-happened-to-inline-code-highlighting/44342 "2023-05-13T06:38:56Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![blueprismo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/blueprismo/32/19428_2.png) [@blueprismo](https://discourse.gohugo.io/u/blueprismo)\
**Post date:** [May 13, 2023, 6:38am UTC](https://discourse.gohugo.io/t/what-happened-to-inline-code-highlighting/44342/1 "2023-05-13T06:38:56Z")

</div>

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

````plaintext
```
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:

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

```

Any ideas?  
Thanks a lot in advance 🙂

---

<div class="post-metadata">

**Author:** ![iaeiou](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/iaeiou/32/15332_2.png) [@iaeiou](https://discourse.gohugo.io/u/iaeiou)\
**Post date:** [May 13, 2023, 7:24am UTC](https://discourse.gohugo.io/t/what-happened-to-inline-code-highlighting/44342/2 "2023-05-13T07:24:40Z")

</div>

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](https://roneo.org/markdown/#code) to quickly test every markdown features ([Source code](https://raw.githubusercontent.com/RoneoOrg/markdown/main/README.md))

All the best,  
Yann

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [May 13, 2023, 3:17pm UTC](https://discourse.gohugo.io/t/what-happened-to-inline-code-highlighting/44342/3 "2023-05-13T15:17:57Z")

</div>

Markdown provides three methods to render code:

| Method | Syntax highlighting |
| --- | --- |
| [Indented code blocks](https://spec.commonmark.org/0.30/#indented-code-blocks) | Not possible |
| [Fenced code blocks](https://spec.commonmark.org/0.30/#fenced-code-blocks) | Enabled by default |
| [Inline](https://spec.commonmark.org/0.30/#code-spans) (code spans) | Must use shortcode |

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

```plaintext
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

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

```

Then you can do:

```auto
Something {{< h go >}}fmt.Println(a){{< /h >}} inline.

```

---

<div class="post-metadata">

**Author:** ![blueprismo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/blueprismo/32/19428_2.png) [@blueprismo](https://discourse.gohugo.io/u/blueprismo)\
**Post date:** [May 13, 2023, 6:47pm UTC](https://discourse.gohugo.io/t/what-happened-to-inline-code-highlighting/44342/4 "2023-05-13T18:47:48Z")

</div>

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

```yaml
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](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/3X/0/d/0d29dd0eed319f9abc9f1a2ba2f2cba9aac5a035.png)

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

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [May 13, 2023, 6:58pm UTC](https://discourse.gohugo.io/t/what-happened-to-inline-code-highlighting/44342/5 "2023-05-13T18:58:57Z")

</div>

> [@blueprismo](#):
>
> I know it worked some time ago.

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

```auto
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.