Add variable 404 messages. Close #70.

Add:
        bitshift/assets.py, static/sass/404.sass
                -Add `syntax_highlight()` and style rules to perform syntax
                highlighting on 404 error messages; used in
                `templates/error404.html`.

        templates
                -Add a `Jinja` expression to select a random "404" message from
                a sequence.

bitshift/assets.py

@@ -2,6 +2,8 @@
 :synopsis: Helper functions for use inside the project's Jinja templates.
 """
 
+import re
+
 from flask import Markup
 
 ASSET_HTML_TEMPLATES = {
@@ -24,3 +26,21 @@ def tag(filename):
 
     file_ext = filename.split(".")[-1]
     return Markup(ASSET_HTML_TEMPLATES[file_ext] % filename)
+
+def syntax_highlight(msg):
+    """
+    Inserts HTML `<span>` elements into a string, for symbol/word styling.
+
+    Args:
+        msg : (str) A message.
+    """
+
+    msg.replace("<", "&;lt")
+    msg.replace(">", "&;gt")
+
+    font_size = 16.0 / len(msg)
+    msg = re.sub('([!()"%])', '<span class="dark">\\1</span>', msg)
+    msg = re.sub('([:.;,])', '<span class="red">\\1</span>', msg)
+    msg = msg.replace("404", '<span class="red">404</span>')
+    return "<span class='light' style='font-size: %fem'>%s</span>" % (
+            font_size, msg)

static/sass/error404.sass

@@ -9,15 +9,11 @@ div#message
     text-align: center
 
     span
-        &#error-num
-            font-size: 170%
-            vertical-align: middle
-
-        &.c1
-            color: $baseColor1
+        &.light
+            color: $baseColor3
 
-        &.c2
+        &.dark
             color: $baseColor2
 
-        &.c3
-            color: $baseColor3
+        &.red
+            color: $baseColor1

templates/error404.html

@@ -6,9 +6,17 @@
 
 = block body
   <div id="message">
-    <span class="c1">puts</span
-    ><span class="c3">(</span><span class=c2>"</span
-    ><span id="error-num">404</span><span class=c2>"</span><span class=c3
-    >)</span><span class="c3">;</span>
+  {{ assets.syntax_highlight([
+    'puts("404");',
+    'printf("%d\n", 404);',
+    'puts 404',
+    'System.out.println("404")',
+    'print 404',
+    'console.log("404")',
+    'echo 404',
+    'std::cout << "404\\n"',
+    '(println "404")',
+    'say "404!";'
+    ] | random) | safe }}
   </div>
 = endblock