title: Django template rendering HTML parameter as text
body: <p>I created a Django template that requires parameters from a Django view. One of the parameters is a bit of html that displays a gantt chart.  Instead of rendering the parameter as proper html, it is rendering it as text.  </p>
  
  <p>Why is it treating the parameter contents as text instead of recognizing the <code>&lt;script&gt;</code> and <code>&lt;div&gt;</code> tags?</p>
  
  <p>The html in the parameter I'm passing to the Django view looks like this:</p>
  
  <pre><code>        &lt;script language="Javascript" type="text/javascript"&gt;
             window.onload = function() {
             var MyVar = [
              {label: "Label-less", times:[{"starting_time":1420228800000,"ending_time":1420257600000}, {"starting_time":1420264800000, "ending_time":1420293600000}, ]},
              ];
  
             function drawtimeline_MyVar() {
                var chart = d3.timeline()
                .showBorder()
                .stack() // toggles graph stacking
                ...
                *(code removed here for size purposes)*
                ...
               var svg = d3.select("#DIV_MyVar").append("svg").attr("width", 1000)
               .datum(MyVar).call(chart);
                }
  
  
          //Call the function
          drawtimeline_MyVar();
          }
  
         &lt;/script&gt;
  
         &lt;div&gt;
             &lt;h3&gt;Mehe&lt;/h3&gt;
             &lt;div id="DIV_MyVar"&gt;&lt;/div&gt;
         &lt;/div&gt;
         &lt;div id="DIV_MyVar_hover" class="hoverDiv"&gt;
             &lt;div class="coloredDiv"&gt;&lt;/div&gt;
                &lt;table border=1 cellpadding=10&gt;
                    &lt;tr&gt;
                      &lt;td&gt;
                        &lt;p&gt;Task ID: &lt;/p&gt;&lt;div id="name"&gt;&lt;/div&gt;
                      &lt;/td&gt;
                    &lt;/tr&gt;
                &lt;/table&gt;
  
         &lt;/div&gt;
  </code></pre>
  
  <p>And the parameter, <strong>comm_request</strong>, is used at the bottom of the template like this:</p>
  
  <pre><code>&lt;html&gt;
  
    &lt;head&gt;
      &lt;title&gt;Search Results&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;script src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://d3js.org/d3.v3.min.js" charset="utf-8"&gt;&lt;/script&gt;
      &lt;script language="Javascript" type="text/javascript" src="./Review/d3-timeline-master/src/d3-timeline.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
      {{ JSLIB }}
      &lt;/script&gt;
      &lt;STYLE type="text/css"&gt;
          .axis path,
          .axis line {
            fill: none;
            stroke: black;
            shape-rendering: crispEdges;
          }
          .axis text {
            font-family: sans-serif;
            font-size: 10px;
      &lt;/STYLE&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="container"&gt;
      &lt;div class="page-header"&gt;
          &lt;h1&gt;
              &lt;p class="text-center"&gt;Much Results&lt;/p&gt;
          &lt;/h1&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="container"&gt;
      &lt;h3&gt;&lt;p class="text-center"&gt;Charts&lt;/p&gt;&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="container"&gt;
      &lt;h4 class="text-center"&gt;
          Gantt Chart
      &lt;/h4&gt;
  &lt;/div&gt;
  {{ comm_requests }}
  &lt;/body&gt;
  &lt;/html&gt;    
  </code></pre>