syrusakbary / pyjade

Jade template system for Django, Jinja2 and Mako
MIT License
699 stars 122 forks source link

Inline html does not work #107

Open moaxey opened 11 years ago

moaxey commented 11 years ago

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

briancappello commented 11 years ago

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?

moaxey commented 11 years ago

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 }

briancappello commented 11 years ago

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.

syrusakbary commented 11 years ago

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! ;)

moaxey commented 11 years ago

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.

mattixpet commented 9 years ago

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.

mattychen commented 7 years ago

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