syntax highlighting: get the most out of tree-sitter

[kristoff-it]

This is the current code that applies syntax highlighting:

zine/zine/src/highlight.zig

Lines 78 to 104 in 4b3efd1

	const cursor = try treez.Query.Cursor.create();
	defer cursor.destroy();
	cursor.execute(lang.query, tree.getRootNode());
	var print_cursor: usize = 0;
	while (cursor.nextMatch()) |match| {
	var idx: usize = 0;
	for (match.captures()) |capture| {
	const capture_name = lang.query.getCaptureNameForId(capture.id);
	const range = capture.node.getRange();
	if (range.start_byte < print_cursor) continue;
	if (range.start_byte > print_cursor) {
	try writer.print("{s}", .{HtmlSafe{ .bytes = code[print_cursor..range.start_byte] }});
	}
	try writer.print(
	\\<span class="{s}">{s}</span>
	, .{
	DotsToSpaces{ .bytes = capture_name },
	HtmlSafe{ .bytes = code[range.start_byte..range.end_byte] },
	});
	print_cursor = range.end_byte;
	idx += 1;
	}
	}

This code runs the highlights.scm query from the tree sitter parser of each language and decorates the output with appropriate class attributes.

This algorithm is a bit too simplistic because it's unable to render overlapping matches, which means that some highlighting information is lost.

A more correct solution would involve buffering changes in order to create a final set of span elements that properly represents all matches.

[kristoff-it]

This is currently hurting our ability to Syntax highlight SuperHTML templates correctly. They look much better in an editor than they do in a rendered code block.