BugFix: Correct highlighting of multi-line element (fix #10 and hexojs/hexo#2291)

[seaoak]

Correct highlighting of multi-line element (fix #10 and hexojs/hexo#2291).

This patch is similar to the patch hexojs/hexo#904 that fixed the issue hexojs/hexo#902.
But the API highlightByLine() is no longer supported by highlight.js.
So I use the API highlight() with continuation.

And also add HTML validation to each test case.
If this validation was implemented, the issue #10 might be detected.
For this puropose, add a new devDependencies for html-tag-validator package.
https://www.npmjs.com/package/html-tag-validator
https://github.com/codeschool/htmlTagValidator

[coveralls]

Coverage decreased (-0.2%) to 96.21% when pulling 266b22c on seaoak:feature/correct-highlight-of-multi-line-element into e18c4bd on hexojs:master.

[stevenjoezhang]

The continuation option is deprecated since highlight.js verion 10.7.1

See also #245 highlightjs/highlight.js#2277

[joshgoebel]

The "blessed" way to do line by line highlighting (answer is mine):

https://stackoverflow.com/questions/64280814/how-can-i-correctly-highlight-a-line-by-line-code-using-highlight-js-react

IE, you highlight the whole content in full and then go back over it looking for the line-breaks and rewriting the HTML to open/close tags at the beginning/end of each line. The HTML we generate is very clean (all <> are escaped), so one could do this with a regex to match HTML tags but I'd take a look at the __emitter API (as suggested in my answer) if you don't require 100% API stability guarantees (__emitteris technically a very stable private API, but technically it could break in-between major releases).

If you require 100% API stability then you'd need to parse the resulting HTML and fix it up manually.

Also, FYI: There are many ways to avoid dealing with individual lines entirely with creative use of CSS, though that can't cover all scenarios and I'm not sure about this use case.

[joshgoebel]

There is probably a very minimal approach to parsing the raw HTML that would go something like:

lines = hljs.highlight(code).value.split("\n")
open = []
lines = lines.map((line) => {
  out = openTags(open) + line;
  tags = line.matchAll(HTML_TAG_RE)
  tags = removeAlreadyClosedTags(tags)
  open = tags
  return out + closeTags(tags.length)
});

Also, emitter API "docs" https://github.com/highlightjs/highlight.js/blob/bfb5a59173719a9681e22f1979ad6656d68da78c/src/lib/token_tree.js#L95

[stevenjoezhang]

@joshgoebel Thanks for your suggestion, I implemented this function (parse the resulting HTML and fix it up) using a stack: #246