Syntax highlighting for snippets.

hc/front/management/commands/pygmentize.py

@@ -0,0 +1,21 @@
+from django.core.management.base import BaseCommand
+from pygments import highlight, lexers
+from pygments.formatters import HtmlFormatter
+
+
+def _process(fin, fout, lexer):
+    source = open("templates/front/snippets/" + fin).read()
+    processed = highlight(source, lexer, HtmlFormatter())
+    processed = processed.replace("PING_URL", "{{ ping_url }}")
+    with open("templates/front/snippets/" + fout, "w") as out:
+        out.write(processed)
+
+
+class Command(BaseCommand):
+    help = 'Compiles snippets with pygmentize'
+
+    def handle(self, *args, **options):
+        _process("bash.txt", "bash.html", lexers.BashLexer())
+        _process("browser.txt", "browser.html", lexers.JavascriptLexer())
+        _process("crontab.txt", "crontab.html", lexers.BashLexer())
+        _process("python.txt", "python.html", lexers.PythonLexer())

requirements.txt

@@ -1,4 +1,5 @@
 Django==1.8.2
 django-ses
 psycopg2==2.6
-django-ses-backend
+django-ses-backend
+pygments

static/css/style.css

@@ -17,6 +17,11 @@ html, body {
     padding-bottom: 2em;
 }
 
+.highlight pre {
+    background: #FFF;
+    border-top: 0;
+}
+
 #welcome-status, #get-started {
     margin-top: 4em;
 }

static/css/syntax.css

@@ -0,0 +1,61 @@
+.highlight .hll { background-color: #ffffcc }
+.highlight  { background: #ffffff; }
+.highlight .c { color: #999988; font-style: italic } /* Comment */
+.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
+.highlight .k { font-weight: bold } /* Keyword */
+.highlight .o { font-weight: bold } /* Operator */
+.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
+.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
+.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
+.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
+.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #aa0000 } /* Generic.Error */
+.highlight .gh { color: #999999 } /* Generic.Heading */
+.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
+.highlight .go { color: #888888 } /* Generic.Output */
+.highlight .gp { color: #555555 } /* Generic.Prompt */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #aaaaaa } /* Generic.Subheading */
+.highlight .gt { color: #aa0000 } /* Generic.Traceback */
+.highlight .kc { font-weight: bold } /* Keyword.Constant */
+.highlight .kd { font-weight: bold } /* Keyword.Declaration */
+.highlight .kn { font-weight: bold } /* Keyword.Namespace */
+.highlight .kp { font-weight: bold } /* Keyword.Pseudo */
+.highlight .kr { font-weight: bold } /* Keyword.Reserved */
+.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
+.highlight .m { color: #009999 } /* Literal.Number */
+.highlight .s { color: #bb8844 } /* Literal.String */
+.highlight .na { color: #008080 } /* Name.Attribute */
+.highlight .nb { color: #999999 } /* Name.Builtin */
+.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
+.highlight .no { color: #008080 } /* Name.Constant */
+.highlight .ni { color: #800080 } /* Name.Entity */
+.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
+.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
+.highlight .nn { color: #555555 } /* Name.Namespace */
+.highlight .nt { color: #000080 } /* Name.Tag */
+.highlight .nv { color: #008080 } /* Name.Variable */
+.highlight .ow { font-weight: bold } /* Operator.Word */
+.highlight .w { color: #bbbbbb } /* Text.Whitespace */
+.highlight .mb { color: #009999 } /* Literal.Number.Bin */
+.highlight .mf { color: #009999 } /* Literal.Number.Float */
+.highlight .mh { color: #009999 } /* Literal.Number.Hex */
+.highlight .mi { color: #009999 } /* Literal.Number.Integer */
+.highlight .mo { color: #009999 } /* Literal.Number.Oct */
+.highlight .sb { color: #bb8844 } /* Literal.String.Backtick */
+.highlight .sc { color: #bb8844 } /* Literal.String.Char */
+.highlight .sd { color: #bb8844 } /* Literal.String.Doc */
+.highlight .s2 { color: #bb8844 } /* Literal.String.Double */
+.highlight .se { color: #bb8844 } /* Literal.String.Escape */
+.highlight .sh { color: #bb8844 } /* Literal.String.Heredoc */
+.highlight .si { color: #bb8844 } /* Literal.String.Interpol */
+.highlight .sx { color: #bb8844 } /* Literal.String.Other */
+.highlight .sr { color: #808000 } /* Literal.String.Regex */
+.highlight .s1 { color: #bb8844 } /* Literal.String.Single */
+.highlight .ss { color: #bb8844 } /* Literal.String.Symbol */
+.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
+.highlight .vc { color: #008080 } /* Name.Variable.Class */
+.highlight .vg { color: #008080 } /* Name.Variable.Global */
+.highlight .vi { color: #008080 } /* Name.Variable.Instance */
+.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */

templates/base.html

@@ -8,6 +8,7 @@
     <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/style.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/pricing.css' %}" type="text/css">
+    <link rel="stylesheet" href="{% static 'css/syntax.css' %}" type="text/css">
 </head>
 <body>
     <nav class="navbar navbar-default">
@@ -17,10 +18,6 @@
         </div>
 
         <ul class="nav navbar-nav">
-            <li {% if page == 'welcome' %} class="active" {% endif %}>
-                <a href="{% url 'hc-index' %}">Welcome</a>
-            </li>
-
             {% if request.user.is_authenticated %}
             <li {% if page == 'checks' %} class="active" {% endif %}>
                 <a href="{% url 'hc-checks' %}">My Checks</a>
@@ -32,7 +29,7 @@
             </li>
 
             <li {% if page == 'docs' %} class="active" {% endif %}>
-                <a href="{% url 'hc-docs' %}">Documentation</a>
+                <a href="{% url 'hc-docs' %}">Docs</a>
             </li>
 
             <li {% if page == 'about' %} class="active" {% endif %}>

templates/front/snippets/bash.html

@@ -0,0 +1,6 @@
+<div class="highlight"><pre><span class="c"># using curl:</span>
+curl {{ ping_url }}
+
+<span class="c"># using wget:</span>
+wget {{ ping_url }} -O /dev/null
+</pre></div>

templates/front/snippets/bash.txt

@@ -1,5 +1,5 @@
 # using curl:
-curl {{ ping_url }}
+curl PING_URL
 
 # using wget:
-wget {{ ping_url }} -O /dev/null
+wget PING_URL -O /dev/null

templates/front/snippets/browser.html

@@ -0,0 +1,4 @@
+<div class="highlight"><pre><span class="kd">var</span> <span class="nx">xhr</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">XMLHttpRequest</span><span class="p">();</span>
+<span class="nx">xhr</span><span class="p">.</span><span class="nx">open</span><span class="p">(</span><span class="s1">&#39;GET&#39;</span><span class="p">,</span> <span class="s1">&#39;{{ ping_url }}&#39;</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
+<span class="nx">xhr</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="kc">null</span><span class="p">);</span>
+</pre></div>

templates/front/snippets/browser.txt

@@ -1,3 +1,3 @@
 var xhr = new XMLHttpRequest();
-xhr.open('GET', '{{ ping_url }}', true);
+xhr.open('GET', 'PING_URL', true);
 xhr.send(null);

templates/front/snippets/crontab.html

@@ -0,0 +1,3 @@
+<div class="highlight"><pre><span class="c"># m h  dom mon dow   command</span>
+  <span class="m">8</span> <span class="m">6</span> *   *   *     /home/user/tasks/backup_all.sh <span class="o">&amp;&amp;</span> curl {{ ping_url }}
+</pre></div>

templates/front/snippets/crontab.txt

@@ -1,2 +1,2 @@
 # m h  dom mon dow   command
-  8 6 *   *   *     /home/user/tasks/backup_all.sh && curl {{ ping_url }}
+  8 6 *   *   *     /home/user/tasks/backup_all.sh && curl PING_URL

templates/front/snippets/python.html

@@ -0,0 +1,8 @@
+<div class="highlight"><pre><span class="o">&gt;&gt;&gt;</span> <span class="c"># using urllib2:</span>
+<span class="o">&gt;&gt;&gt;</span> <span class="kn">import</span> <span class="nn">urllib2</span>
+<span class="o">&gt;&gt;&gt;</span> <span class="n">urllib2</span><span class="o">.</span><span class="n">urlopen</span><span class="p">(</span><span class="s">&quot;{{ ping_url }}&quot;</span><span class="p">)</span>
+
+<span class="o">&gt;&gt;&gt;</span> <span class="c"># using requests:</span>
+<span class="o">&gt;&gt;&gt;</span> <span class="kn">import</span> <span class="nn">requests</span>
+<span class="o">&gt;&gt;&gt;</span> <span class="n">requests</span><span class="o">.</span><span class="n">get</span><span class="p">(</span><span class="s">&quot;{{ ping_url }}&quot;</span><span class="p">)</span>
+</pre></div>

templates/front/snippets/python.txt

@@ -1,7 +1,7 @@
 >>> # using urllib2:
 >>> import urllib2
->>> urllib2.urlopen("{{ ping_url }}")
+>>> urllib2.urlopen("PING_URL")
 
 >>> # using requests:
 >>> import requests
->>> requests.get("{{ ping_url }}")
+>>> requests.get("PING_URL")

templates/index.html

@@ -40,16 +40,16 @@
         </ul>
         <div class="tab-content">
             <div role="tabpanel" class="tab-pane active" id="crontab">
-                <pre>{% include "front/snippets/crontab.txt" %}</pre>
+                {% include "front/snippets/crontab.html" %}
             </div>
             <div role="tabpanel" class="tab-pane" id="bash">
-                <pre>{% include "front/snippets/bash.txt" %}</pre>
+                {% include "front/snippets/bash.html" %}
             </div>
             <div role="tabpanel" class="tab-pane" id="python">
-                <pre>{% include "front/snippets/python.txt" %}</pre>
+                {% include "front/snippets/python.html" %}
             </div>
             <div class="tab-pane" id="browser">
-                <pre>{% include "front/snippets/browser.txt" %}</pre>
+                {% include "front/snippets/browser.html" %}
                 <div class="welcome-browser-controls">
                     <button id="run-it" class="btn btn-default">Run It!</button>
                 </div>