add ansi to html converter client side

package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "animate.css": "=3.5.1",
+    "ansi_up": "=1.3.0",
     "bootstrap-sass": "=3.3.7",
     "font-awesome": "=4.6.3",
     "jquery": "=2.2.3",

pelicanconf.py

@@ -98,4 +98,5 @@ JINJA_FILTERS = {
     "datetime": filters.format_datetime,
     "category_find": filters.category_find,
     "limit": filters.limit,
+    "ansi2html": filters.ansi2html
 }

plugins/filters.py

@@ -19,3 +19,7 @@ def limit(line, length):
         return " ".join(line.split(" ")[:length]) + '...'
     elif isinstance(line, list):
         return line[:length]
+
+
+def ansi2html(content):
+    return "<pre class='highlight ansi-up'>{0}</pre>".format(content)

theme/static/src/js/app.js

@@ -1,6 +1,8 @@
 import './creative';
+import ansi_up from 'ansi_up';
 
-$('.image').each(function () {
+
+$('.image').each(function () {  // setup div-image hybrids
   const ele = $(this);
   if (ele.data('image')) {
     ele.css('background-image', 'url(' + ele.data('image') + ')');
@@ -8,3 +10,8 @@ $('.image').each(function () {
     ele.removeClass('image');
   }
 });
+
+$('.ansi-up').each(function () {
+  const ele = $(this);
+  ele.html(ansi_up.ansi_to_html(ele.html()));
+});

theme/static/src/scss/index.scss

@@ -83,3 +83,7 @@ p a {
     height: 40vh;
   }
 }
+
+.highlight.ansi-up {
+  font-weight: 600;
+}