diff --git a/templates/job.html b/templates/job.html
index 7cd7500..f64adf0 100644
--- a/templates/job.html
+++ b/templates/job.html
@@ -29,7 +29,7 @@
                 </table>
 
                 <h2 class="subtitle">Excution log:</h2>
-                <div class="consoleOutput" v-html="logWithColors"></div>
+                <pre class="consoleOutput" v-html="logWithColors"></pre>
             </div>
         </section>
     <style>
@@ -44,60 +44,339 @@
     </style>
     <script>
         (function() {
-            // taken from here and adapted from https://github.com/mmalecki/ansispan/blob/9d8fa3e88cdf56ca25ebe74da0ddf438e800885a/lib/ansispan.js
-            // Licence MIT
-            ansispan = function (str) {
-              Object.keys(ansispan.foregroundColors).forEach(function (ansi) {
-                var span = '<span style="color: ' + ansispan.foregroundColors[ansi] + '">';
-
-                //
-                // `\033[Xm` == `\033[0;Xm` sets foreground color to `X`.
-                //
-
-                str = str.replace(
-                  new RegExp('\033\\[' + ansi + 'm', 'g'),
-                  span
-                ).replace(
-                  new RegExp('\033\\[01;' + ansi + 'm', 'g'),
-                  span
-                ).replace(
-                  new RegExp('\033\\[34;' + ansi + 'm', 'g'),
-                  span
-                ).replace(
-                  new RegExp('\033\\[00;' + ansi + 'm', 'g'),
-                  span
-                ).replace(
-                  new RegExp('\033\\[0;' + ansi + 'm', 'g'),
-                  span
-                );
-              });
-              //
-              // `\033[1m` enables bold font, `\033[22m` disables it
-              //
-              str = str.replace(/\033\[1m/g, '<b>').replace(/\033\[22m/g, '</b>');
-
-              //
-              // `\033[3m` enables italics font, `\033[23m` disables it
-              //
-              str = str.replace(/\033\[3m/g, '<i>').replace(/\033\[23m/g, '</i>');
-
-              str = str.replace(/\033\[m/g, '</span>');
-              str = str.replace(/\033\[0m/g, '</span>');
-              str = str.replace(/\033\[00m/g, '</span>');
-              str = str.replace(/\n/g, '<br>');
-              return str.replace(/\033\[39m/g, '</span>');
-            };
-
-            ansispan.foregroundColors = {
-              '30': 'black',
-              '31': 'red',
-              '32': 'green',
-              '33': 'yellow',
-              '34': 'blue',
-              '35': 'purple',
-              '36': 'cyan',
-              '37': 'white'
-            };
+            /*  ansi_up.js
+             *  author : Dru Nelson
+             *  license : MIT
+             *  http://github.com/drudru/ansi_up
+             */
+            (function (root, factory) {
+                if (typeof define === 'function' && define.amd) {
+                    // AMD. Register as an anonymous module.
+                    define(['exports'], factory);
+                } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
+                    // CommonJS
+                    factory(exports);
+                } else {
+                    // Browser globals
+                    var exp = {};
+                    factory(exp);
+                    root.AnsiUp = exp.default;
+                }
+            }(this, function (exports) {
+            "use strict";
+            function rgx(tmplObj) {
+                var subst = [];
+                for (var _i = 1; _i < arguments.length; _i++) {
+                    subst[_i - 1] = arguments[_i];
+                }
+                var regexText = tmplObj.raw[0];
+                var wsrgx = /^\s+|\s+\n|\s+#[\s\S]+?\n/gm;
+                var txt2 = regexText.replace(wsrgx, '');
+                return new RegExp(txt2, 'm');
+            }
+            var AnsiUp = (function () {
+                function AnsiUp() {
+                    this.VERSION = "3.0.0";
+                    this.ansi_colors = [
+                        [
+                            { rgb: [0, 0, 0], class_name: "ansi-black" },
+                            { rgb: [187, 0, 0], class_name: "ansi-red" },
+                            { rgb: [0, 187, 0], class_name: "ansi-green" },
+                            { rgb: [187, 187, 0], class_name: "ansi-yellow" },
+                            { rgb: [0, 0, 187], class_name: "ansi-blue" },
+                            { rgb: [187, 0, 187], class_name: "ansi-magenta" },
+                            { rgb: [0, 187, 187], class_name: "ansi-cyan" },
+                            { rgb: [255, 255, 255], class_name: "ansi-white" }
+                        ],
+                        [
+                            { rgb: [85, 85, 85], class_name: "ansi-bright-black" },
+                            { rgb: [255, 85, 85], class_name: "ansi-bright-red" },
+                            { rgb: [0, 255, 0], class_name: "ansi-bright-green" },
+                            { rgb: [255, 255, 85], class_name: "ansi-bright-yellow" },
+                            { rgb: [85, 85, 255], class_name: "ansi-bright-blue" },
+                            { rgb: [255, 85, 255], class_name: "ansi-bright-magenta" },
+                            { rgb: [85, 255, 255], class_name: "ansi-bright-cyan" },
+                            { rgb: [255, 255, 255], class_name: "ansi-bright-white" }
+                        ]
+                    ];
+                    this.htmlFormatter = {
+                        transform: function (fragment, instance) {
+                            var txt = fragment.text;
+                            if (txt.length === 0)
+                                return txt;
+                            if (instance._escape_for_html)
+                                txt = instance.old_escape_for_html(txt);
+                            if (!fragment.bold && fragment.fg === null && fragment.bg === null)
+                                return txt;
+                            var styles = [];
+                            var classes = [];
+                            var fg = fragment.fg;
+                            var bg = fragment.bg;
+                            if (fragment.bold)
+                                styles.push('font-weight:bold');
+                            if (!instance._use_classes) {
+                                if (fg)
+                                    styles.push("color:rgb(" + fg.rgb.join(',') + ")");
+                                if (bg)
+                                    styles.push("background-color:rgb(" + bg.rgb + ")");
+                            }
+                            else {
+                                if (fg) {
+                                    if (fg.class_name !== 'truecolor') {
+                                        classes.push(fg.class_name + "-fg");
+                                    }
+                                    else {
+                                        styles.push("color:rgb(" + fg.rgb.join(',') + ")");
+                                    }
+                                }
+                                if (bg) {
+                                    if (bg.class_name !== 'truecolor') {
+                                        classes.push(bg.class_name + "-bg");
+                                    }
+                                    else {
+                                        styles.push("background-color:rgb(" + bg.rgb.join(',') + ")");
+                                    }
+                                }
+                            }
+                            var class_string = '';
+                            var style_string = '';
+                            if (classes.length)
+                                class_string = " class=\"" + classes.join(' ') + "\"";
+                            if (styles.length)
+                                style_string = " style=\"" + styles.join(';') + "\"";
+                            return "<span" + style_string + class_string + ">" + txt + "</span>";
+                        },
+                        compose: function (segments, instance) {
+                            return segments.join("");
+                        }
+                    };
+                    this.textFormatter = {
+                        transform: function (fragment, instance) {
+                            return fragment.text;
+                        },
+                        compose: function (segments, instance) {
+                            return segments.join("");
+                        }
+                    };
+                    this.setup_256_palette();
+                    this._use_classes = false;
+                    this._escape_for_html = true;
+                    this.bold = false;
+                    this.fg = this.bg = null;
+                    this._buffer = '';
+                }
+                Object.defineProperty(AnsiUp.prototype, "use_classes", {
+                    get: function () {
+                        return this._use_classes;
+                    },
+                    set: function (arg) {
+                        this._use_classes = arg;
+                    },
+                    enumerable: true,
+                    configurable: true
+                });
+                Object.defineProperty(AnsiUp.prototype, "escape_for_html", {
+                    get: function () {
+                        return this._escape_for_html;
+                    },
+                    set: function (arg) {
+                        this._escape_for_html = arg;
+                    },
+                    enumerable: true,
+                    configurable: true
+                });
+                AnsiUp.prototype.setup_256_palette = function () {
+                    var _this = this;
+                    this.palette_256 = [];
+                    this.ansi_colors.forEach(function (palette) {
+                        palette.forEach(function (rec) {
+                            _this.palette_256.push(rec);
+                        });
+                    });
+                    var levels = [0, 95, 135, 175, 215, 255];
+                    for (var r = 0; r < 6; ++r) {
+                        for (var g = 0; g < 6; ++g) {
+                            for (var b = 0; b < 6; ++b) {
+                                var col = { rgb: [levels[r], levels[g], levels[b]], class_name: 'truecolor' };
+                                this.palette_256.push(col);
+                            }
+                        }
+                    }
+                    var grey_level = 8;
+                    for (var i = 0; i < 24; ++i, grey_level += 10) {
+                        var gry = { rgb: [grey_level, grey_level, grey_level], class_name: 'truecolor' };
+                        this.palette_256.push(gry);
+                    }
+                };
+                AnsiUp.prototype.old_escape_for_html = function (txt) {
+                    return txt.replace(/[&<>]/gm, function (str) {
+                        if (str === "&")
+                            return "&amp;";
+                        if (str === "<")
+                            return "&lt;";
+                        if (str === ">")
+                            return "&gt;";
+                    });
+                };
+                AnsiUp.prototype.old_linkify = function (txt) {
+                    return txt.replace(/(https?:\/\/[^\s]+)/gm, function (str) {
+                        return "<a href=\"" + str + "\">" + str + "</a>";
+                    });
+                };
+                AnsiUp.prototype.detect_incomplete_ansi = function (txt) {
+                    return !(/.*?[\x40-\x7e]/.test(txt));
+                };
+                AnsiUp.prototype.detect_incomplete_link = function (txt) {
+                    var found = false;
+                    for (var i = txt.length - 1; i > 0; i--) {
+                        if (/\s|\x1B/.test(txt[i])) {
+                            found = true;
+                            break;
+                        }
+                    }
+                    if (!found) {
+                        if (/(https?:\/\/[^\s]+)/.test(txt))
+                            return 0;
+                        else
+                            return -1;
+                    }
+                    var prefix = txt.substr(i + 1, 4);
+                    if (prefix.length === 0)
+                        return -1;
+                    if ("http".indexOf(prefix) === 0)
+                        return (i + 1);
+                };
+                AnsiUp.prototype.ansi_to = function (txt, formatter) {
+                    var pkt = this._buffer + txt;
+                    this._buffer = '';
+                    var raw_text_pkts = pkt.split(/\x1B\[/);
+                    if (raw_text_pkts.length === 1)
+                        raw_text_pkts.push('');
+                    this.handle_incomplete_sequences(raw_text_pkts);
+                    var first_chunk = this.with_state(raw_text_pkts.shift());
+                    var blocks = new Array(raw_text_pkts.length);
+                    for (var i = 0, len = raw_text_pkts.length; i < len; ++i) {
+                        blocks[i] = (formatter.transform(this.process_ansi(raw_text_pkts[i]), this));
+                    }
+                    if (first_chunk.text.length > 0)
+                        blocks.unshift(formatter.transform(first_chunk, this));
+                    return formatter.compose(blocks, this);
+                };
+                AnsiUp.prototype.ansi_to_html = function (txt) {
+                    return this.ansi_to(txt, this.htmlFormatter);
+                };
+                AnsiUp.prototype.ansi_to_text = function (txt) {
+                    return this.ansi_to(txt, this.textFormatter);
+                };
+                AnsiUp.prototype.with_state = function (text) {
+                    return { bold: this.bold, fg: this.fg, bg: this.bg, text: text };
+                };
+                AnsiUp.prototype.handle_incomplete_sequences = function (chunks) {
+                    var last_chunk = chunks[chunks.length - 1];
+                    if ((last_chunk.length > 0) && this.detect_incomplete_ansi(last_chunk)) {
+                        this._buffer = "\x1B[" + last_chunk;
+                        chunks.pop();
+                        chunks.push('');
+                    }
+                    else {
+                        if (last_chunk.slice(-1) === "\x1B") {
+                            this._buffer = "\x1B";
+                            console.log("raw", chunks);
+                            chunks.pop();
+                            chunks.push(last_chunk.substr(0, last_chunk.length - 1));
+                            console.log(chunks);
+                            console.log(last_chunk);
+                        }
+                        if (chunks.length === 2 &&
+                            chunks[1] === "" &&
+                            chunks[0].slice(-1) === "\x1B") {
+                            this._buffer = "\x1B";
+                            last_chunk = chunks.shift();
+                            chunks.unshift(last_chunk.substr(0, last_chunk.length - 1));
+                        }
+                    }
+                };
+                AnsiUp.prototype.process_ansi = function (block) {
+                    if (!this._sgr_regex) {
+                        this._sgr_regex = (_a = ["\n            ^                           # beginning of line\n            ([!<-?]?)             # a private-mode char (!, <, =, >, ?)\n            ([d;]*)                    # any digits or semicolons\n            ([ -/]?               # an intermediate modifier\n            [@-~])                # the command\n            ([sS]*)                   # any text following this CSI sequence\n          "], _a.raw = ["\n            ^                           # beginning of line\n            ([!\\x3c-\\x3f]?)             # a private-mode char (!, <, =, >, ?)\n            ([\\d;]*)                    # any digits or semicolons\n            ([\\x20-\\x2f]?               # an intermediate modifier\n            [\\x40-\\x7e])                # the command\n            ([\\s\\S]*)                   # any text following this CSI sequence\n          "], rgx(_a));
+                    }
+                    var matches = block.match(this._sgr_regex);
+                    if (!matches) {
+                        return this.with_state(block);
+                    }
+                    var orig_txt = matches[4];
+                    if (matches[1] !== '' || matches[3] !== 'm') {
+                        return this.with_state(orig_txt);
+                    }
+                    var sgr_cmds = matches[2].split(';');
+                    while (sgr_cmds.length > 0) {
+                        var sgr_cmd_str = sgr_cmds.shift();
+                        var num = parseInt(sgr_cmd_str, 10);
+                        if (isNaN(num) || num === 0) {
+                            this.fg = this.bg = null;
+                            this.bold = false;
+                        }
+                        else if (num === 1) {
+                            this.bold = true;
+                        }
+                        else if (num === 22) {
+                            this.bold = false;
+                        }
+                        else if (num === 39) {
+                            this.fg = null;
+                        }
+                        else if (num === 49) {
+                            this.bg = null;
+                        }
+                        else if ((num >= 30) && (num < 38)) {
+                            this.fg = this.ansi_colors[0][(num - 30)];
+                        }
+                        else if ((num >= 40) && (num < 48)) {
+                            this.bg = this.ansi_colors[0][(num - 40)];
+                        }
+                        else if ((num >= 90) && (num < 98)) {
+                            this.fg = this.ansi_colors[1][(num - 90)];
+                        }
+                        else if ((num >= 100) && (num < 108)) {
+                            this.bg = this.ansi_colors[1][(num - 100)];
+                        }
+                        else if (num === 38 || num === 48) {
+                            if (sgr_cmds.length > 0) {
+                                var is_foreground = (num === 38);
+                                var mode_cmd = sgr_cmds.shift();
+                                if (mode_cmd === '5' && sgr_cmds.length > 0) {
+                                    var palette_index = parseInt(sgr_cmds.shift(), 10);
+                                    if (palette_index >= 0 && palette_index <= 255) {
+                                        if (is_foreground)
+                                            this.fg = this.palette_256[palette_index];
+                                        else
+                                            this.bg = this.palette_256[palette_index];
+                                    }
+                                }
+                                if (mode_cmd === '2' && sgr_cmds.length > 2) {
+                                    var r = parseInt(sgr_cmds.shift(), 10);
+                                    var g = parseInt(sgr_cmds.shift(), 10);
+                                    var b = parseInt(sgr_cmds.shift(), 10);
+                                    if ((r >= 0 && r <= 255) && (g >= 0 && g <= 255) && (b >= 0 && b <= 255)) {
+                                        var c = { rgb: [r, g, b], class_name: 'truecolor' };
+                                        if (is_foreground)
+                                            this.fg = c;
+                                        else
+                                            this.bg = c;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                    return this.with_state(orig_txt);
+                    var _a;
+                };
+                return AnsiUp;
+            }());
+            //# sourceMappingURL=ansi_up.js.map
+                Object.defineProperty(exports, "__esModule", { value: true });
+                exports.default = AnsiUp;
+            }));
 
             var app = new Vue({
                 el: '#job',
@@ -115,7 +394,8 @@
                 computed: {
                     logWithColors: function() {
                         if (this.job.log != undefined) {
-                            return ansispan(this.job.log);
+                            var ansiup = new AnsiUp;
+                            return ansiup.ansi_to_html(this.job.log);
                         } else {
                             return "";
                         }