pyjade icon indicating copy to clipboard operation
pyjade copied to clipboard

Inline html does not work

Open moaxey opened this issue 11 years ago • 7 comments

The jade documentation indicates you can include inline html https://github.com/visionmedia/jade#a6-10

Doing same with pyjade results in html being escaped and appearing as html code

Django==1.5.1 pyjade==2.0.2

moaxey avatar Jun 14 '13 06:06 moaxey

Perhaps I'm mistaken or misunderstanding you - I'm not a PyJade dev, just a user - but, isn't that the proper behavior for inline HTML? The pipes are meant so you can put raw html into your templates and not have it be fully interpreted by PyJade. It will, however, still get passed to the underlying template engine, so you can for example still reference context variables eg:

- var page_title = 'Home'
| <title>#{page_title}</title>

Will render to <title>Home</title>

Is that what you mean by inline HTML?

briancappello avatar Jun 14 '13 07:06 briancappello

You are right, that does work, I'm a little embarrassed.

What I am doing is pulling out html fragments from a database via django templatetag, and want the html to pass through to the browser without being escaped.

My example is like this (where display message is a template tag taking an id argument of the message to display)

| #{ 424 | display_message }

moaxey avatar Jun 14 '13 07:06 moaxey

Can you share some implementation details of display_message? I'm just beginning with PyJade too, and only use it with Jinja/Flask, though I have used Django before. That said, take this with a grain of salt. What seems to work for Jinja at least, is passing a callable python object into the template's context, and calling that with another variable from the context:

#{display_message_callable(this_msg_id)}
// no need to escape anything even if display_message_callable returns html; it has reached django's template engine by that point

You might also look into Jade mixins; dunno if they're what you need but I think they're the Jade equivalent to template tags.

briancappello avatar Jun 14 '13 09:06 briancappello

When you write something like #{display_message_callable(this_msg_id)} or | #{ 424 | display_message } is automatically translated to {{display_message_callable(this_msg_id)}} and | {{ 424 | display_message }} when using pyjade Jinja2 compiler.

So instead of doing {{outputString}} in Jinja2, you have to write #{outputString} in pyjade.

Hope this helps! ;)

syrusakbary avatar Jun 14 '13 09:06 syrusakbary

Thankyou for the suggestions, however I still cannot get my html to go to the browser unfiltered.

This is all happening in python/django: Following briancappello suggestion I've made a callable object which I instantiate with the id of the html fragment that is required, and when placed in the jade outputs the correct html

class message(object): def init(self, id): # get the message from database and stores its html representation in self.html def call(self): return self.html

In the view I add the message to the data passed to template

data['message'] = message(123)

In the pyjade template I execute the callable

div #{ message } |#{ message } {{ message }} m = message() #{m} |#{m} {{m}} |{{m}}

Any of those combinations will only return escaped html which appears in the browser as html

Source (simulated to appear correctly in this comment):

<h1>About this application</h1><p>This is user editable text</p> <h1>About this application</h1><p>This is user editable text</p> <h1>About this application</h1><p>This is user editable text</p> <h1>About this application</h1><p>This is user editable text</p> <h1>About this application</h1><p>This is user editable text</p> <h1>About this application</h1><p>This is user editable text</p> <h1>About this application</h1><p>This is user editable text</p> <h1>About this application</h1><p>This is user editable text</p>

Visual appearance (simulated to appear correctly in this comment):

<h1>About this application</h1><p>This is user editable text</p> <h1>About this application</h1><p>This is user editable text</p> <h1>About this application</h1><p>This is user editable text</p> <h1>About this application</h1><p>This is user editable text</p> <h1>About this application</h1><p>This is user editable text</p> <h1>About this application</h1><p>This is user editable text</p> <h1>About this application</h1><p>This is user editable text</p> <h1>About this application</h1><p>This is user editable text</p>

Which is the same result I was getting when implementing same with templatetag.

moaxey avatar Jun 17 '13 01:06 moaxey

this was really bugging me, see, I am trying to write a website, and I wanted to read a post from my database, of course I wanted that post to have links in arbitrary places, so I thought I'd just store the post's text as pure html and put that on the website! In regular jade I would've done something like

section.content!= post.text

however, unfortunately pyjade doesn't allow you to do that (yet).

And this was frustrating me a lot, I even tried to do some sort of html parser, so I would store the post in some weird format, to be read by python and made into some object that jade would read and then output, like, if ["p"] output p= something like that. That is easier said than done, and I later found a slightly better solution, simply have a small javascript function that "unescapes" exactly what I need (and only there of course).

Then of course, just now, I figured I could do this a lot easier and clean, by using django's templating syntax... so now I tried

section.content {{ post.text|safe }}

and that seems to work fine!

Hope this saves someone else in my shoes some trouble and hair pulling.

mattixpet avatar Feb 26 '15 16:02 mattixpet

You can use a filter in your pug/jade file. The filter | n will work.

| n filter ensures they are not escaped.

so if you store your html and you want to render it then you can do

#{post.text | n}

in your pug/jade file.

http://stackoverflow.com/questions/12137421/mako-escaping-issue-within-pyramid

mattychen avatar Dec 07 '16 23:12 mattychen