highlight.js
highlight.js copied to clipboard
(markdown) snake_case term causes italics in rest of file
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:
Here's how GitHub renders the same markdown:
What are the actual markdown rules around this? When it encounters the _ how would it know that is not the beginning of italics?
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.
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:
The same block is rendered on the default GitHub rendering correctly:
It is disrupting because it can happens quite often when using the GFM syntax.
Expected:
:no_entry:
I'm not italic.
I put up a small PR to fix this: #4342