content: Handle code block spans with multiple CSS classes

[rajveermalviya]

Fixes: #933

Flutter	Web

[PIG208]

nit: can use dom.Element.classes here, so we don't need to call .split(' ') ourselves later

[rajveermalviya]

Thanks for the review @PIG208! Pushed a new revision, PTAL :)

[PIG208]

LGTM!

[gnprice]

Thanks @rajveermalviya for taking care of this, and @PIG208 for the previous review!

Generally this looks great. Small comments below, most of them nits.

[gnprice]

In the parser we should stick to className, avoiding classes 🙂 — see #497.

[gnprice]

nit: tighten formatting by putting part of the initializer on the first line, after the =

[gnprice]

Suggested change

	// The general form for Pygments nodes with multiple classes observed
	// are, that the first class is the standard token class and trailing
	// tokens are non-standard tokens. Zulip web client only styles the
	// standard tokens classes. Same is done here, only standard token
	// class names are emitted.
	// Empirically, when a Pygments node has multiple classes, the first
	// class names a standard token type and the rest are for non-standard
	// token types specific to the language. Zulip web only styles the
	// standard token classes and ignores the others, so we do the same.

The "are emitted" confused me: we don't emit any class names here, right? We consume class names, and may emit a CodeBlockSpanType value.

[gnprice]

super nit: indent the string continuations deeper so they don't look like part of the same series as the list element below

Suggested change

	'<div class="codehilite" data-code-language="YAML">'
	'<pre><span></span><code><span class="p p-Indicator">-</span>'
	'<span class="w"> </span>'
	'<span class="l l-Scalar l-Scalar-Plain">item</span>\n'
	'</code></pre></div>', [
	CodeBlockNode([
	'<div class="codehilite" data-code-language="YAML">'
	'<pre><span></span><code><span class="p p-Indicator">-</span>'
	'<span class="w"> </span>'
	'<span class="l l-Scalar l-Scalar-Plain">item</span>\n'
	'</code></pre></div>', [
	CodeBlockNode([

This is similar to what we do with if conditions. You can also see it in action on the similar examples codeBlockHighlightedShort and codeBlockHighlightedMultiline above.

[gnprice]

nit: put this just after the two codeBlockHighlighted… examples, so it's not separated from them by all the unimplemented code-block examples

[rajveermalviya]

Thanks for the reviews @PIG208, @gnprice!
@gnprice Pushed a new revision, PTAL.

[gnprice]

Thanks for the revision! Looks good, with just one comment below on something I missed earlier.

[gnprice]

Rereading, I realized this name is misleading: "code block node" should correspond CodeBlockNode, since we have such an identifier; but the HTML element that corresponds to one of those is the whole div.codehilite. The things that have multiple classes are the span great-grandchildren of that, which correspond to CodeBlockSpanNode.

I think "code block span" is a fine term for these.

So that applies to this example's name and description, and to the commit message.

[rajveermalviya]

Thanks for the review @gnprice. Revision pushed.

[gnprice]

Thanks! All looks good — merging.