Dv.el/dv.span/dv.paragraph: How to make specific word in string larger than rest?

[ReaderGuy42]

Say I have a DataviewJS Query including a dv.paragraph:

dv.paragraph("# In 2020 I read " + BookCount + " books")

That outputs the amount of books I read in that year. I've figured out that including the # will turn the text into header sized, but how do increase the word for just the variable (BookCount)?

I'm playing around with it and tried something like this:

dv.span("##### In 2020 I read ") + dv.el("b", "# "+ BookCount)

and while that does make BookCount larger, it's now on separate lines.

Is there a way to have this all in one line?

Thanks :)

[tabrez-syed]

You could use .innerHTML property to have more control over the html

let root = dv.el("div", "", { cls: "card" }); root.innerHTML = "<span style="(your css here)">In 2020 I read <b>"+BookCount+"</b></span>"

[ReaderGuy42]

What exactly is my css supposed to be here? Not sure I understand that.

[tabrez-syed]

oh! Anything you want to style the text. You could just use the for the number and take out the style tag as well.
let root = dv.el("div", "", { cls: "card" }); root.innerHTML = "<span>In 2020 I read <b>"+BookCount+"</b></span>"

[ReaderGuy42]

Thanks :) Now I just have to figure out the formatting.