The amount of <span> elements can impact rendering performance #70
Description
Prerequisites
- Put an X between the brackets on this line if you have done all of the following:
- Reproduced the problem in Safe Mode: https://flight-manual.atom.io/hacking-atom/sections/debugging/#using-safe-mode
- Followed all applicable steps in the debugging guide: https://flight-manual.atom.io/hacking-atom/sections/debugging/
- Checked the FAQs on the message board for common solutions: https://discuss.atom.io/c/faq
- Checked that your issue isn't already filed: https://github.com/issues?utf8=✓&q=is%3Aissue+user%3Aatom
- Checked that there is not already an Atom package that provides the described functionality: https://atom.io/packages
Description
I'm using this package separately from Atom, for syntax highlighting code snippets in markdown files. I've noticed that when I switched from Highlight.js/Prism to Highlights, my page rendering performance reduced.
This appears to be due to the number of <span> elements Highlights generates. In addition to the ones that have class attributes with token names, there are also a lot of <span> elements generated which don't have any class attribute.
When I tried stripping just the classless <span> tags, the rendering performance was now instant again.
Steps to Reproduce
const Highlights = require("highlights")
const highlighter = new Highlights()
const html = highlighter.highlightSync({
fileContents: 'answer = 42',
scopeName: 'source.ruby',
})
console.log(html)<pre class="editor editor-colors">
<div class="line">
<span class="source ruby">
<span>answer </span>
<span class="keyword operator assignment ruby">
<span>=</span>
</span>
<span> </span>
<span class="constant numeric ruby">
<span>42</span>
</span>
</span>
</div>
</pre>Expected behavior:
That highlighting produces only the tags that are necessary.
Actual behavior:
Highlighting produces many <span> tags that are not needed (the script above produces 4 such tags).
Versions
Highlights 3.1.4