Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

What's the best way for "inline" elements? #736

Closed
lydell opened this Issue Aug 13, 2012 · 7 comments

Comments

Projects
None yet
4 participants

lydell commented Aug 13, 2012

I'm quite new to Jade, and I need some advice. Let's say that you're writing the text of a p tag, and you need to emphasize a word. How shall I do it? Here are the ways I could think of:
Plain old ugly html:

p Cats are <em>cute</em> animals.

Splitting on several lines:

p Cats are
    em cute
    | animals.

Markdown:

:markdown
  Cats are _cute_ animals.

I do like markdown, but it feels like I will include that :markdown filter on a lot of places - is that bad?
But what if the em element needs an id, class or some other attribute?
Plain old ugly html:

p Cats are <em id="mySpecialEm">cute</em> animals.

Splitting on several lines:

p Cats are
    em#mySpecialEm cute
    | animals.

Markdown:

:markdown
  Cats are <em id="mySpecialEm">cute</em> animals.

The thing is, I don't like writing ugly html, I don't like splitting sentences on several lines. I do like markdown, but not having to use plain ugly html in there. The question is how often that happens, though, or if I should suggest/develop something for jade or markdown, like:

p Cats are em#mySpecialEm.someClass(attribute='value'){cute} animals.
:markdown
  Cats are _cute_[mySpecialEm] animals.

  \[myspecialem]: #mySpecialEm.someClass(attribute='value')

How do you do things like this? Am I overdoing this?

Contributor

kizu commented Aug 13, 2012

I think the best option would be if we could use jade in interpolations, so that would become more like your first suggestion:

p Cats are #{em#mySpecialEm.someClass(attribute='value') cute} animals.

the only thin place can be if there'd be multiline Jade in interpolation, but I think that it could work too:

p Cats are #{
  em.#mySpecialEm.someClass
    strong very
    | cute
  } animals

Or, maybe, when there is the #{ with newline construction, it would behave like the normal Jade block:

p.
  Cats are #{
    em.#mySpecialEm.someClass
      strong very
      | cute
  animals

With that it would be really easier to write such inline elements.

lydell commented Aug 14, 2012

Good idea for interpolating Jade. However, I think we should keep it simple and not allow multiline Jade interpolation. In your two multiline examples, removing the #{ and } makes it valid Jade that would do the same thing, and as I said, I don't like splitting sentences over many lines.

But how should the parser know if it's JavaScript or Jade? What about using !{} and #{} for JavaScript (as it is now), and introduce perhaps ${} for interpolating Jade?

Contributor

tj commented Aug 14, 2012

-1 from me this is overkill IMO

lydell commented Aug 15, 2012

Well this issue started as a question and then moved into a suggestion/request direction. Perhaps we should move back to the question direction? How do you do "inline" elements in the middle of sentences?

Owner

ForbesLindesay commented Jan 9, 2013

To answer one of the initial questions. No using markdown all over the place in jade is fine because all of the markdown stuff is run at compile time. So once cached, there's no extra work required to handle markdown vs. regular jade.

As for in-lining I think it's overkill. If you want long strings of text with lots of little formatted bits, use markdown. If you have short bits of text like this that are occasionally awkward, at least they're not too long. If most of what you're doing is tags and IDs and divs and stuff then it's clearer in plain markdown.

Owner

ForbesLindesay commented Jan 9, 2013

P.S. I'll leave #777 open for now as it tracks this issue anyway.

lydell commented Jan 10, 2013

Thanks, @ForbesLindesay, that's good advice!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment