Combining plain text and tags

[joepie91]

I currently have some code that would conceptually look like this:

doctype html
html(lang="en")
  body
    div.test
      .
        Test content
      div Some other content

However, this is a parsing error. The following would work:

doctype html
html(lang="en")
  body
    div.test.
      Test content
      <div>Some other content</div>

But this means I can't use Jade for my added content (the Some other content element). Is there a way to mix multi-line "plain text blocks" and regular Jade tags?

For further context: I am working with the codebase of the pdf.js viewer, which is large, written in HTML, and changes with some regularity - this means that it's not feasible for me to continuously 'convert' the HTML into Jade. I'd much prefer some way to mix plain text and Jade tags - it's still not perfect, but at least somewhat maintainable.

[ForbesLindesay]

It might not be a bad idea to add something like the syntax you suggest, but for your example you can also do:

doctype html
html(lang="en")
  body
    div.test
      | Test content
      div Some other content

or

doctype html
html(lang="en")
  body
    div.test.
      Test content
      #[div Some other content]

[joepie91]

Right. While that would work in that specific example, it would quickly become problematic when either a) the plaintext part consists of a lot of lines, or b) the non-plaintext part consists of a complex structure. That's more or less the usecase I was thinking of with this suggestion.

[TimothyGu]

@joepie91 said:

either a) the plaintext part consists of a lot of lines, or b) the non-plaintext part consists of a complex structure.

I assume that you meant that the a) is problematic with the piped text syntax, and b) the tag interpolation syntax.

In practice however, the pipe syntax isn't that problematic even for a lot of lines. One can simply use a regex to add a pipe to multiple lines, for example in vim ex mode

:'<,'>s/^\(\s*\)/\1| /

The tag interpolation syntax is designed for only small, usually inline elements.

[joepie91]

@TimothyGu Right. That should've been "and" in my previous comment, rather than "or". The combination of the two is a problem.

Here is an awfully hacky example of the problem I'm encountering. The base HTML comes from upstream, and there is no way for me to make inline changes in it using Jade - I need to replicate some parts of the document structure in Jade, just to be able to mix Jade tags and plaintext from the original document. Pipes for every line are obviously not a reasonable option here.

[groenroos]

+1 for this. I'm mixing Jade with inline PHP and the pipes are becoming a pain.

[ForbesLindesay]

@joepie91 that example just looks like you haven't bothered to convert the html into jade. I don't see any problems that would prevent you from doing so. If you need to include large snippets of html within your jade, why not use include and keep them in a separate file?

[joepie91]

@ForbesLindesay Because I'm making modifications to a large blob of HTML from upstream, that may change with some regularity. These aren't includes, they're part of the structure of the document itself, and there can be modifications at multiple levels of the hierarchy.

The markup from upstream is far too large and complex to constantly have to convert things to Jade. My experiences with automated conversion tools have not been very good so far. This would be a relatively simple solution to that problem.