Django SQL debug template with SQL code highlighting and line breaks for legibility.

sql_debug.html

{% if debug %}
<div class="sql_debug">
  <div class="showhide">
    {{ sql_queries|length }} quer{{ sql_queries|pluralize:"y,ies" }}
    {% ifnotequal sql_queries|length 0 %}
    (<a href="#" onclick="var s=document.getElementById('queries').style;s.display=s.display=='none'?'':'none';this.innerHTML=this.innerHTML=='show'?'hide':'show';">show</a>)
    {% endifnotequal %}
  </div>
  <div id="queries" style="display:none">
    {% for query in sql_queries %}
        <p><b>{{ forloop.counter }})</b> {{ query.time }}s
        <pre><code class="lang-sql">{{ query.sql|escape }}</code></pre></p>
    {% endfor %}
  </div>
</div>
<!-- code highlight for SQL queries -->
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/styles/default.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<style>
.sql_debug{float:left;max-width:800px}
.sql_debug .showhide{cursor:pointer;margin-top:25px}
.sql_debug .hljs-keyword:before{content:'\A'}
.sql_debug pre .hljs-keyword:nth-of-type(1):before{content:''}
.sql_debug pre,.hljs{background:none;padding:0;margin:0;border:0}
</style>
{% endif %}