Outputting indented lists in DataviewJS

[pashamkhan]

The Broader Project

I’ve been trying to create a DataviewJS script that will create a tree of the sections and arguments of an essay if the writer puts inline metadata into the essay inline like [arg:: Introduction].

The Goal

I’ve succeeded in getting it to grab the arg fields and make a bullet list, but what I’m trying to do next is to get DataviewJS to recognise a field as lower-level (to be indented within the list) if their value begins with one or more "$"s. For instance, a sentence in the introductory paragraph might be tagged [arg:: $Problem], and the “Problem” will appear indented under “Introduction” in the list produced by DataviewJS. This way I’ll be able to have an indented, structured tree of the essay.

The Problem

Keeping in mind that I’m a noob with DataviewJS, somehow I can’t get it to have tabs indent list items. Instead their behaviour in the rendered list is to show the tabbed text as code (see image below).

This is my DataviewJS code:

const x = dv.current().arg;
x.forEach((y,i) => {
	const matches = y.match(/^(\$+)/);
	const count = matches ? matches[1].length : 0;
	let tabs = "\t".repeat(count);
	return dv.span(`${tabs}- ${y}`);
});

and here is what it outputs:

Any idea how I can do this (preferably using Markdown rather than HTML)?