highlight JSON client-side for the swh web api

swh/web/common/swh_templatetags.py

@@ -10,11 +10,6 @@ from docutils.writers.html4css1 import Writer, HTMLTranslator
 from inspect import cleandoc
 
 from django import template
-from django.utils.safestring import mark_safe
-
-from pygments import highlight
-from pygments.lexers import JsonLexer
-from pygments.formatters import HtmlFormatter
 
 register = template.Library()
 
@@ -85,8 +80,3 @@ def urlize_header_links(text):
     """
     return re.sub(r'<(/api/.*|/browse/.*)>', r'<<a href="\1">\1</a>>',
                   text)
-
-
-@register.filter
-def highlight_json(text):
-    return mark_safe(highlight(text, JsonLexer(), HtmlFormatter()))

swh/web/templates/apidoc.html

 {% extends "layout.html" %}
 {% load swh_templatetags %}
+{% load static %}
 {% block title %}{{ heading }} – Software Heritage API {% endblock %}
+{% block header %}
+<script src="{% static 'js/highlightjs/dist/highlight.pack.js' %}"></script>
+<script>
+  hljs.initHighlightingOnLoad();
+</script>
+<link rel="stylesheet" href="{% static 'css/highlightjs/github.css' %}">  
+{% endblock %}
 {% block content %}
 <nav class="bread-crumbs">
   <ul>
@@ -35,7 +43,9 @@
     {% endfor %}
   {% endif %}
     <h3>Body</h3>
-    {{ response_data | highlight_json | urlize_api_links | safe }}
+    <pre>
+      <code class="json">{{ response_data | urlize_api_links | safe }}</code>
+    </pre>
 </div>
 {% endif %}
 <hr/>

swh/web/templates/content.html

 {% extends "layout.html" %}
+{% load static %}
+
+{% block header %}
+<script src="{% static 'js/highlightjs/dist/highlight.pack.js' %}"></script>
+<script src="{% static 'js/highlightjs-line-numbers/dist/highlightjs-line-numbers.min.js' %}"></script>
+<script>
+  // empty hljs language definition
+  function no_highlight(hljs) {
+    return {}
+  }
+  // just a trick to get line numbers working when no highlight
+  // has to be performed
+  hljs.registerLanguage('nohighlight-swh', no_highlight);
+  hljs.initHighlightingOnLoad();
+  hljs.initLineNumbersOnLoad();
+</script>
+<link rel="stylesheet" href="{% static 'css/highlightjs/github.css' %}">  
+{% endblock %}
+
 {% block title %}Content display{% endblock %}
 
 {% block content %}

swh/web/templates/layout.html

@@ -6,6 +6,9 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{% block title %}{% endblock %}</title>
+
+    {% block header %}{% endblock %}
+
     <!-- BEGIN: bootstrap -->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">    
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
@@ -18,20 +21,6 @@
     <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
     <!-- END: bootstrap -->
 
-    <script src="{% static 'js/highlightjs/dist/highlight.pack.js' %}"></script>
-    <script src="{% static 'js/highlightjs-line-numbers/dist/highlightjs-line-numbers.min.js' %}"></script>
-    <script>
-      // empty hljs language definition
-      function no_highlight(hljs) {
-        return {}
-      }
-      // just a trick to get line numbers working when no highlight
-      // has to be performed
-      hljs.registerLanguage('nohighlight-swh', no_highlight);
-      hljs.initHighlightingOnLoad();
-      hljs.initLineNumbersOnLoad();
-    </script>
-    <link rel="stylesheet" href="{% static 'css/highlightjs/github.css' %}">
     <link rel="stylesheet" href="{% static 'css/pygment.css' %}">
     <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}" />
     <link rel="icon" href="{% static 'img/icons/swh-logo-32x32.png' %}" sizes="32x32" />