Does anyone have a good pattern for links embedded in prose?

[nicksloan]

I have a paragraph of text that has a couple links in the middle of it. I've come up with two ideas so far, and I don't love either one:

p {
    """
        This is the start of a very long paragraph of text. It is so long in fact
        that I want to wrap it across lines so that it is more readable in my 
    """
    a(.href("https://vscode.dev/")) { "text editor" }
    """
    . But there are some things that I don't like about how I have to format
    text in code.
    """
}

p { HTMLRaw(
    """
        This is the start of a very long paragraph of text. It is so long in fact
        that I want to wrap it across lines so that it is more readable in my
        \(a(.href("https://vscode.dev/")) { "text editor" }.render()). But there
        are some things that I don't like about how I have to format the text
        in code.
    """
) }

In the first example, I have to worry about an invisible space character after the word "my" to ensure that there is a space between it and "text". I could use an   but I don't want a non-breaking space, and I don't want to have to contextually use special formatting for spaces. The markup also really disrupts the flow of the prose in that example.

I like the second example better, except that I am calling render on the a element myself.

I don't want to have to do additional processing on strings with something like markdown, but that would improve the experience of editing prose.

Open to other thoughts here. I'm sure there is some clever idea that I'm missing.

---

Adding a few more examples I thought of while I was chatting with my coworker:

p {
    "This is the start of a very long paragraph of text. It is so long in fact "
     "that I want to wrap it across lines so that it is more readable in my "
      a(.href("https://vscode.dev/")) { "text editor" }
     ". But there are some things that I don't like about how I have to format "
    "the text in code."
}

I don't like the proliferation of quotes generally, but I do like that they make trailing whitespace visible. I also like getting rid of the RawHTML, which will make this approach more broadly applicable.

In the next example, the element still interrupts the flow, but adding a view modifier to handle the whitespace makes that aspect much nicer:

p {
    """
        This is the start of a very long paragraph of text. It is so long in fact
        that I want to wrap it across lines so that it is more readable in my
    """

    a(.href("https://vscode.dev/")) { "text editor" }
        .whitespace(.leading)

    """
    . But there are some things that I don't like about how I have to format
    text in code.
    """
}

Finally:

p { HTMLRaw(
    """
        This is the start of a very long paragraph of text. It is so long in fact
        that I want to wrap it across lines so that it is more readable in my
        <a href="https://vscode.dev/">text editor</a>. But there
        are some things that I don't like about how I have to format the text
        in code.
    """
) }

This loses the safety of Elementary, but we might not always need that. I like this better than markdown because it has the same risk of being malformed, but doesn't require additional processing.