highlight.js icon indicating copy to clipboard operation
highlight.js copied to clipboard

(markdown) snake_case term causes italics in rest of file

Open danvk opened this issue 5 months ago • 2 comments
trafficstars

Describe the issue

If you have an unescaped term in snake_case in a Markdown file, it puts highlight.js into "italic mode" when it should not. GitHub-Flavored Markdown (GFM) and others seem to not italicize underscores in the middle of a word.

Which language seems to have the issue?

  • markdown

Are you using highlight or highlightAuto?

  • highlight

Sample Code to Reproduce

https://jsfiddle.net/mn15jwg7/

Header_under

    code listing; italic

More text, still italic.

Here's how highlight.js renders it on the playground. Note how the _ puts it into Italic mode and it never leaves, even in subsequent blocks:

Image

Here's how GitHub renders the same markdown:

Image

danvk avatar Jun 08 '25 15:06 danvk

What are the actual markdown rules around this? When it encounters the _ how would it know that is not the beginning of italics?

joshgoebel avatar Jun 08 '25 17:06 joshgoebel

The closest thing to a formal Markdown spec is CommonMark: https://github.com/commonmark/commonmark-spec?tab=readme-ov-file

Here's a playground link with this test case.

So far as I can tell, they italicize something only if both the leading and trailing _ are on a word boundary.

This Markdown Guide says:

Markdown applications don’t agree on how to handle underscores in the middle of a word. For compatibility, use asterisks to bold and italicize the middle of a word for emphasis.

I think it would make sense to be conservative here. Better to miss out on italicizing the middle of a word than to unexpectedly italicize the entire rest of a document.

danvk avatar Jun 08 '25 17:06 danvk

I agree that in-world underscore should not trigger italics/emphasis. We have encountered this issue too on pub.dev:

A README.md file contained the following code block:

```
├── .dart_eval
│   └── bindings
│       └── flutter_eval.json.
├── pubspec.yaml
└── lib
    └── hot_update.dart
```

highlightjs detected the language as markdown and updated its DOM as follows:

<pre><code data-highlighted="yes" class="hljs language-markdown">├── .dart<span class="hljs-emphasis">_eval
│   └── bindings
│       └── flutter_</span>eval.json.
├── pubspec.yaml
└── lib
<span class="hljs-code">    └── hot_update.dart
</span></code></pre>

and rendered as:

Image

The same block is rendered on the default GitHub rendering correctly: Image

isoos avatar Jul 28 '25 08:07 isoos

It is disrupting because it can happens quite often when using the GFM syntax.

demo reproduction.

Expected:

:no_entry:
I'm not italic.

Dsaquel avatar Nov 10 '25 22:11 Dsaquel

I put up a small PR to fix this: #4342

danvk avatar Nov 11 '25 20:11 danvk