Why the DOM tree is such complicated?

[cyfung1031]

I know that the tokens are consists of multiple layers.
However, when it is converted to HTML code, it can be flatten.

DOM Tree Structure

Complicated DOM Tree

Flatten DOM Tree

As shown above, there is no visual difference between Flatten

In other highlighting libraries, each line are wrapped, but PrismJS does not.
I guess it is to flatten the DOM tree to make it faster.
However, I also see such complicated DOM Tree which is not usual in other highlighting libraries.

An example of other highlighting libraries:

one layer of div for making lines

one layer of span for making texts

[RunDevelopment]

The nested DOM tree is a byproduct of Prism's recursive highlighting algorithm. The DOM structure just reflects the language definitions (e.g. Markup tag is nested, so the DOM tree it produces also has that nesting).

This is also quite useful because the CSS themes have access to (simple) structural information about the code. This allows for very specific custom highlighting. You won't see this kind of highlighting with Prism's standard themes (they are all quite simple) but we have users that do that.

Regarding the lines: Many syntax highlighters are line-based (e.g. all TextMate-based syntax highlighters) but Prism is not. Prism highlights the whole text in one go. Splitting everything into lines is actually quite challenging.

That being said, a plugin that splits everything into lines is being worked on and will be part of Prism v2.