Django Templates: How to display html code?

Question

I'm trying to display some HTML markup in a blog, and would like to know if there is a way to wrap a section of my Django template directly, without putting it into a context variable.

For example, I would like to output a bunch of code, some of it JavaScript, and some of it HTML, and some of it CSS. If I enter in the code directly into my Django template, and wrap it in some pre tags:

<pre>
  /* Here is the markup I want to display: */
   ... lots of HTML
</pre>

the HTML tags are rendered.

Of course, to display:

I should use

&lt;

and to display

I should use

&gt;

I tried adding the Django tag {% autoescape on %} around the code section, but it had no effect because I'm not rendering a context variable.

I would like to know if there is an easier way than replacing every occurrence of < with < and every occurrence of > with >

I also know that if I put the code that I want to display into a context variable, then in my template, just displaying that context variable would automatically escape the code.

But I would rather just be able to directly cut and paste the code I want to display into my template. Is there a way to do this and display the HTML tags (i.e.

<h1> Heading Level 1 </h1>

without writing it in my template as:

&lt;h1&gt; Heading Level 1 &lt;/h1&gt;

Consider using a WYSIWYG editor like TinyMCE. It will automaticallt convert < to <. — xyres
– xyres, Commented Jun 22, 2014 at 8:50

Sławek Kabik · Accepted Answer · 2014-06-22 08:53:19Z

2

You have to use xmp tags.

<xmp>
    <h1>Testing Html</h1> 
</xmp>

answered Jun 22, 2014 at 8:53

Sławek Kabik

6991 gold badge8 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

xyres Over a year ago

Hell, that's awesome! And I didn't know it even existed.

eric Over a year ago

Doesn't work for me when i try to display code for showing a button that submits via POST request.

Jeremy Over a year ago

Per the mozilla docs the xmp element is deprecated. developer.mozilla.org/en-US/docs/Web/HTML/Element/xmp

Le Minaw · Accepted Answer · 2020-11-05 16:09:56Z

2

This question is old, but it pops on search engines and no answer is correct imo.

Sławek Kabik's is deprecated, Smit Patel's is overly complicated (it bloats views).

In order to do what OP asked for, you have to use the force_escape built-in filter in a {% filter %} tag.

Example:

<pre>
  <code>
    {% filter force_escape %}
      <span class="hello">Anything HTML really</span>
    {% endfilter %}
  </code>
</pre>

Output:

<pre>
  <code>
    &lt;span class=&quot;hello&quot;&gt;Anything HTML really&lt;/span&gt;
  </code>
</pre>

answered Nov 5, 2020 at 16:09

Le Minaw

8957 silver badges17 bronze badges

1 Comment

Sanyam Khurana Over a year ago

That's genius! Thanks! I've tried autoescape, safe_html etc. but nothing was working.

Smit Patel · Accepted Answer · 2022-07-07 01:33:13Z

2

NOTE: Before you try to implement manually, please have a look at ckeditor. ckeditor documentation if this is not what you are looking for, then only proceed with answer.

Just Wrap your variable inside following Django template tag.

{% autoescape off %}
    {{your_variable_here}}
{% endautoescape %}

put HTML code in "your_variable_here" variable And Django Will Display It as HTML. All HTML Tags will Work.

EDIT: Sorry, I missed important part to mention. in views do this

from django.template.loader import render_to_string
rendered = render_to_string('my_template.html', {'foo': 'bar'})

and pass this rendered string to template variable and render the given template inside other template by putting lines

{% autoescape off %}
    {{rendered}}
{% endautoescape %}

edited Jul 7, 2022 at 1:33

answered Mar 4, 2020 at 9:24

Smit Patel

635 bronze badges

Collectives™ on Stack Overflow

Django Templates: How to display html code?

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related