Add ids to tags; use pygments to color JSON

templates/accounts/profile.html

@@ -3,9 +3,11 @@
     {{ user.username }}
 {% endblock title %}
 {% block content %}
-    <h2>{{ user.username }}</h2>
-    <p>Joined {{ user.date_joined|date:"F d, Y" }}</p>
-    <table>
+    <h2 id="username">{{ user.username }}</h2>
+    <p>
+        Joined <time id="date-joined">{{ user.date_joined|date:"F d, Y" }}</time>
+    </p>
+    <table id="user-info-table">
         <tr>
             <td>
                 <strong>Date Joined:</strong>
@@ -25,12 +27,12 @@
             <td>{{ user.email|default:"Not provided" }}</td>
         </tr>
     </table>
-    <a href="{% url 'accounts:logout' %}">Logout</a>
+    <a id="logout-link" href="{% url 'accounts:logout' %}">Logout</a>
     <h2>Will get notifications for these subscriptions:</h2>
-    <h3>Games</h3>
-    <ul>
+    <h3 id="games-subscriptions-header">Games</h3>
+    <ul id="games-subscriptions-list">
         {% for item in games_with_inheritance %}
-            <li>
+            <li id="game-subscription-{{ item.game.id }}">
                 <a href="{% url 'twitch:game_detail' item.game.id %}">{{ item.game.display_name }}</a>
                 {% if item.is_inherited %}
                     <span style="font-size: 0.85em; color: #666; font-style: italic;">(inherited from {{ item.inherited_from }})</span>
@@ -40,10 +42,10 @@
             <li>You have no game subscriptions yet.</li>
         {% endfor %}
     </ul>
-    <h3>Organizations</h3>
-    <ul>
+    <h3 id="org-subscriptions-header">Organizations</h3>
+    <ul id="org-subscriptions-list">
         {% for subscription in org_subscriptions %}
-            <li>
+            <li id="org-subscription-{{ subscription.organization_id }}">
                 <a href="{% url 'twitch:organization_detail' subscription.organization_id %}">{{ subscription.organization.name }}</a>
             </li>
         {% empty %}