Add prettify syntax highlighting to resource info.

djangorestframework/static/djangorestframework/css/prettify.css

+.com { color: #93a1a1; }
+.lit { color: #195f91; }
+.pun, .opn, .clo { color: #93a1a1; }
+.fun { color: #dc322f; }
+.str, .atv { color: #D14; }
+.kwd, .prettyprint .tag { color: #1e347b; }
+.typ, .atn, .dec, .var { color: teal; }
+.pln { color: #48484c; }
+
+.prettyprint {
+  padding: 8px;
+  background-color: #f7f7f9;
+  border: 1px solid #e1e1e8;
+}
+.prettyprint.linenums {
+  -webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
+     -moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
+          box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
+}
+
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums {
+  margin: 0 0 0 33px; /* IE indents via margin-left */
+}
+ol.linenums li {
+  padding-left: 12px;
+  color: #bebec5;
+  line-height: 20px;
+  text-shadow: 0 1px 0 #fff;
+}
\ No newline at end of file

djangorestframework/templates/djangorestframework/base.html

@@ -13,6 +13,7 @@
             <link rel="stylesheet" type="text/css" href="{% get_static_prefix %}djangorestframework/css/bootstrap.min.css"/>
             <link rel="stylesheet" type="text/css" href="{% get_static_prefix %}djangorestframework/css/bootstrap-tweaks.css"/>
         {% endblock %}
+        <link rel="stylesheet" type="text/css" href='{% get_static_prefix %}djangorestframework/css/prettify.css'/>
         <link rel="stylesheet" type="text/css" href='{% get_static_prefix %}djangorestframework/css/style.css'/>
         {% block extrastyle %}{% endblock %}
 
@@ -108,14 +109,13 @@
             <p class="resource-description">{{ description }}</p>
 
             <div class="request-info">
-                <pre><b>{{ request.method }}</b> {{ request.get_full_path }}</pre>
+                <pre class="prettyprint"><b>{{ request.method }}</b> {{ request.get_full_path }}</pre>
             <div>
             <div class="response-info">
-                <pre><div class="meta"><b>HTTP {{ response.status_code }} {{ response.status_text }}</b>{% autoescape off %}
-{% for key, val in response.items %}<b>{{ key }}:</b> {{ val|urlize_quoted_links }}
+                <pre class="prettyprint"><div class="meta nocode"><b>HTTP {{ response.status_code }} {{ response.status_text }}</b>{% autoescape off %}
+{% for key, val in response.items %}<b>{{ key }}:</b> <span class="lit">{{ val|urlize_quoted_links }}</span>
 {% endfor %}
-</div>
-{{ content|urlize_quoted_links }}</pre>{% endautoescape %}
+</div>{{ content|urlize_quoted_links }}</pre>{% endautoescape %}
             </div>
 
             {% if response.status_code != 403 %}
@@ -197,7 +197,10 @@
     </div>
     <script src="{% get_static_prefix %}djangorestframework/js/jquery-1.8.1-min.js"></script>
     <script src="{% get_static_prefix %}djangorestframework/js/bootstrap.min.js"></script>
+    <script src="{% get_static_prefix %}djangorestframework/js/prettify-min.js"></script>
     <script>
+        prettyPrint();
+
         $('.js-tooltip').tooltip({
             delay: 1000
         });