Initial commit

5 files changed, 1266 insertions, 1 deletions

diff --git a/README.md b/README.md
index a6e9d3b..558d705 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,7 @@
 # grep-colors
-A tool to manage your GREP_COLORS settings
+A tool to manage your `GREP_COLORS` settings
+
+Create and share a `GREP_COLORS` theme and see how it'll look with a live preview.
+
+Feel free to fork this, you can [see it in action here](http://dom111.github.io/grep-colors/).
+
diff --git a/app.js b/app.js
new file mode 100644
index 0000000..b4aa014
--- /dev/null
+++ b/app.js
@@ -0,0 +1,254 @@
+(function($) {
+    $(function() {
+        var terminal = $('.terminal'),
+        input = $('#input'),
+        colours = $('[name="colours"]'),
+        light = $('[name="light"]'),
+
+        _shareLink = function() {
+            var url = window.location.href.replace(/#.+/, '');
+
+            if (input.val()) {
+                url += '#!input=' + btoa(input.val()) + '&' + $('.global-options :checked').serialize();
+            }
+
+            if (window.location.href != url) {
+                history.pushState(history.state, url, url);
+            }
+
+            return url;
+        },
+
+        _loadFromHash = function() {
+            if (window.location.hash) {
+                var data = window.location.hash.replace(/^#!/, ''),
+                elements = {
+                    input: input,
+                    colours: colours,
+                    light: light
+                };
+
+                $('.global-options [type="checkbox"]').prop('checked', false).trigger('change');
+
+                data.split(/&/).forEach(function(item) {
+                    var data = item.split(/=/),
+                    element = elements[data[0]],
+                    value;
+
+                    if (element === input) {
+                        value = atob(data[1]);
+                        element.val(value).trigger('change');
+                    }
+                    else {
+                        value = data[1];
+
+                        if (element) {
+                            if (element.is('[type="radio"], [type="checkbox"]')) {
+                                element.filter('[value="' + value + '"]').prop('checked', true).trigger('change');
+                            }
+                            else {
+                                element.val(value).trigger('change');
+                            }
+                        }
+                    }
+                });
+            }
+        };
+
+        new Clipboard('.share', {
+            text: _shareLink
+        });
+
+        $('.share').on('click', function(event) {
+            event.preventDefault();
+
+            $('.url-copied').removeClass('hidden').show();
+
+            window.setTimeout(function() {
+                $('.url-copied').fadeOut('slow');
+            }, 5000);
+        });
+
+        input.on('change keyup paste', function() {
+            input.val().split(/:/).forEach(function(block) {
+                // var [selector, styles] = block.split(/=/);
+                // styles = parse.parseStyles(styles);
+                var data = block.split(/=/, 2),
+                selector = data[0],
+                styles = parse.parseStyles(data[1]);
+
+                $('.' + selector).each(function() {
+                    var classes = selector;
+
+                    $.each(styles, function(style) {
+                        if (style.match(/bg|fg/)) {
+                            classes += ' ' + style + '-' + styles[style];
+                        }
+                        else if (styles[style]) {
+                            classes += ' ' + style;
+                        }
+                    });
+
+                    this.className = classes;
+                });
+
+                $('[data-fragment="' + selector + '"] [name="bg-default"]').prop('checked', false);
+                $('[data-fragment="' + selector + '"] [name="bg"]').show();
+                $('[data-fragment="' + selector + '"] [name="fg-default"]').prop('checked', false);
+                $('[data-fragment="' + selector + '"] [name="fg"]').show();
+
+                $.each(styles, function(style) {
+                    if (style == 'bg' || style == 'fg') {
+                        var colour = styles[style];
+
+                        if (colour.match(/true-/)) {
+                            colour = parse.rgbToHex(colour.replace(/true-/, '').split(/-/));
+                        }
+                        else if (colour.match(/256-/)) {
+                            colour = parse.rgbToHex(parse.term256ToRgb(colour.replace(/256-/, '')));
+                        }
+                        else if ((colour == 49 || !colour) && style == 'bg') {
+                            colour = '';
+                            $('[data-fragment="' + selector + '"] [name="bg-default"]').prop('checked', true);
+                            $('[data-fragment="' + selector + '"] [name="bg"]').hide();
+                        }
+                        else if ((colour == 39 || !colour) && style == 'fg') {
+                            colour = '';
+                            $('[data-fragment="' + selector + '"] [name="fg-default"]').prop('checked', true);
+                            $('[data-fragment="' + selector + '"] [name="fg"]').hide();
+                        }
+                        else {
+                            colour = parse.rgbToHex(parse.term16ToRgb(colour));
+                        }
+
+                        $('[data-fragment="' + selector + '"] [name="' + style + '"]').val(colour);
+                    }
+                    else {
+                        $('[data-fragment="' + selector + '"] [name="' + style + '"]').prop('checked', styles[style]);
+                    }
+                });
+            });
+
+            $('.copy-paste .contents').html(this.value);
+        });
+
+        $('.builder .block').on('change', 'input', function() {
+            _updateInput();
+        });
+
+        var _updateInput = function() {
+            var value = '';
+
+            $('.builder .block').each(function() {
+                value += $(this).attr('data-fragment') + '=' + _getStyle($(this)) + ':';
+            });
+
+            value = value.replace(/:$/, '');
+
+            return input.val(value).trigger('change');
+        },
+        _getStyle = function(block) {
+            var inputs = block.find(':input'),
+            style = $.extend({}, parse.defaultStyle);
+
+            inputs.filter(':not([name="bg-default"], [name="fg-default"])').each(function() {
+                var value;
+
+                if ($(this).is('select')) {
+                    value = $(this).val();
+                }
+                else if ($(this).is('[type="checkbox"]')) {
+                    value = this.checked;
+                }
+                else if ($(this).is('[type="radio"]')) {
+                    if (this.checked) {
+                        value = this.value;
+                    }
+                }
+                else {
+                    value = this.value;
+                }
+
+                if (this.name === 'bg' || this.name === 'fg') {
+                    if ($('[name="colours"]:checked').val() === '16') {
+                        style[this.name] = parse.rgbToTerm16(parse.hexToRgb(value), this.name == 'bg');
+                    }
+                    else if ($('[name="colours"]:checked').val() === '256') {
+                        style[this.name] = parse.simplifyColour('256-' + parse.rgbToTerm256(parse.hexToRgb(value)), this.name == 'bg');
+                    }
+                    else {
+                        style[this.name] = parse.simplifyColour('true-' + parse.hexToRgb(value).join('-'), this.name == 'bg');
+                    }
+                }
+                else if (['bold', 'dim', 'italic', 'underline', 'blink', 'overline', 'invert', 'hidden', 'strikethrough'].includes(this.name)) {
+                    style[this.name] = value;
+                }
+            });
+
+            inputs.filter('[name="bg-default"], [name="fg-default"]').each(function() {
+                if (this.checked) {
+                    if (this.name === 'fg-default') {
+                        style.fg = '39';
+                    }
+                    else if (this.name === 'bg-default') {
+                        style.bg = '49';
+                    }
+                }
+            });
+
+            return parse.buildStyles(style).substr(3).replace(/m$/, '');
+        };
+
+        $('.global-options input[type="checkbox"]').on('change', function() {
+            if (this.checked) {
+                terminal.addClass(this.name);
+            }
+            else {
+                terminal.removeClass(this.name);
+            }
+        });
+
+        $('.global-options input[type="radio"]').on('change', function() {
+            terminal.removeClass(function() {
+                return Array.from(this.classList).filter(function(className) {
+                    return className.match(/cursor/);
+                }).join(' ');
+            });
+
+            if (this.checked) {
+                terminal.addClass(this.name + '-' + this.value);
+            }
+        });
+
+
+        $('.load-example').on('click', function(event) {
+            event.preventDefault();
+
+            $('#input').val($(this).attr('data-content')).change();
+            _shareLink();
+        });
+
+        $('.builder .blocks').on('change', '[name="fg-default"], [name="bg-default"]', function() {
+            var container = $(this).parents('.checkbox');
+
+            if (this.checked) {
+                container.next().hide().attr('disabled');
+            }
+            else {
+                container.next().show().removeAttr('disabled');
+            }
+        });
+
+        new Clipboard('a.copy');
+
+        $('a.copy').on('click', function(event) {
+            event.preventDefault();
+        });
+
+        $(window).on("popstate", function(e) {
+            _loadFromHash();
+        });
+
+        _loadFromHash();
+    });
+})(jQuery);
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..400b316
--- /dev/null
+++ b/index.html
@@ -0,0 +1,995 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>GREP_COLORS utility</title>
+
+        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
+        <link rel="stylesheet" href="terminal-preview/dist/terminal-min.css"/>
+        <link rel="stylesheet" href="style.css"/>
+    </head>
+    <body>
+        <div class="jumbotron">
+            <div class="container">
+                <h1><code>GREP_COLORS</code> utility <span class="version">v0.1</span></h1>
+                <p>Paste in a <code>GREP_COLORS</code> string to preview it.</p>
+                <p>Tweak the style the way you want, with a live preview of how it'll look!</p>
+                <p>Note that currently this only supports changing <code>mt=</code> but will preview <code>ms=</code> and <code>mc=</code>.</p>
+            </div>
+        </div>
+
+        <div class="container">
+            <section class="parser panel panel-primary">
+                <div class="panel-heading panel-heading-lg">
+                    <h2 class="panel-title panel-title-lg">Parser</h2>
+                </div>
+                <div class="panel-body">
+                    <div class="form-group label-floating">
+                        <label for="input" class="control-label">Paste your <code><abbr title="Run &nbsp; echo $GREP_COLORS &nbsp; in your terminal to see your current setting.">GREP_COLORS</abbr></code>, or load an example: <a href="#load" class="load-example" data-content="mt=01;31:sl=:cx=:fn=35:ln=32:bn=32:se=36">default</a>, <a href="#load" class="load-example" data-content="sl=97;48;5;236:cx=37;40:mt=30;48;5;186:fn=38;5;197:ln=38;5;154:bn=38;5;141:se=38;5;81">monokai-based</a>.</label>
+                        <textarea id="input" class="form-control" rows="1"></textarea>
+                    </div>
+
+                    <pre class="terminal no-cursor"><code>$ grep -vbRinIH -P "[\[\]{}()+=]|^$" ./app.js
+<span class="fn">./app.js</span><span class="se">:</span><span class="ln">16</span><span class="se">:</span><span class="bn">728</span><span class="se">:</span><span class="sl">                                // </span>
+<span class="fn">./app.js</span><span class="se">:</span><span class="ln">23</span><span class="se">:</span><span class="bn">938</span><span class="se">:</span><span class="sl">                    // TODO: error</span>
+<span class="fn">./app.js</span><span class="se">:</span><span class="ln">34</span><span class="se">:</span><span class="bn">1260</span><span class="se">:</span><span class="sl">            scale,</span>
+<span class="fn">./app.js</span><span class="se">:</span><span class="ln">35</span><span class="se">:</span><span class="bn">1279</span><span class="se">:</span><span class="sl">            imageData,</span>
+<span class="fn">./app.js</span><span class="se">:</span><span class="ln">36</span><span class="se">:</span><span class="bn">1302</span><span class="se">:</span><span class="sl">            pixelData;</span>
+<span class="fn">./app.js</span><span class="se">:</span><span class="ln">51</span><span class="se">:</span><span class="bn">1811</span><span class="se">:</span><span class="sl">            // Loop over each pixel and invert the color.</span>
+<span class="fn">./app.js</span><span class="se">:</span><span class="ln">228</span><span class="se">:</span><span class="bn">9436</span><span class="se">:</span><span class="sl">        return _readImage;</span>
+$ grep -binHIC2 document ../bash-ps1/app.js
+<span class="fn">../bash-ps1/app.js</span><span class="se">-</span><span class="ln">70</span><span class="se">-</span><span class="bn">1942</span><span class="se">-</span>    });
+<span class="fn">../bash-ps1/app.js</span><span class="se">-</span><span class="ln">71</span><span class="se">-</span><span class="bn">1950</span><span class="se">-</span>
+<span class="fn">../bash-ps1/app.js</span><span class="se">:</span><span class="ln">72</span><span class="se">:</span><span class="bn">1951</span><span class="se">:</span><span class="sl">    $(<span class="mt ms">document</span>).trigger('builder.compile');</span>
+<span class="fn">../bash-ps1/app.js</span><span class="se">-</span><span class="ln">73</span><span class="se">-</span><span class="bn">1995</span><span class="se">-</span>});
+<span class="fn">../bash-ps1/app.js</span><span class="se">-</span><span class="ln">74</span><span class="se">-</span><span class="bn">1999</span><span class="se">-</span>
+<span class="se">--</span>
+<span class="fn">../bash-ps1/app.js</span><span class="se">-</span><span class="ln">84</span><span class="se">-</span><span class="bn">2240</span><span class="se">-</span>    $(this).parents('.block').remove();
+<span class="fn">../bash-ps1/app.js</span><span class="se">-</span><span class="ln">85</span><span class="se">-</span><span class="bn">2280</span><span class="se">-</span>
+<span class="fn">../bash-ps1/app.js</span><span class="se">:</span><span class="ln">86</span><span class="se">:</span><span class="bn">2281</span><span class="se">:</span><span class="sl">    $(<span class="mt ms">document</span>).trigger('builder.compile');</span>
+<span class="fn">../bash-ps1/app.js</span><span class="se">-</span><span class="ln">87</span><span class="se">-</span><span class="bn">2325</span><span class="se">-</span>});
+<span class="fn">../bash-ps1/app.js</span><span class="se">-</span><span class="ln">88</span><span class="se">-</span><span class="bn">2329</span><span class="se">-</span>
+<span class="fn">../bash-ps1/app.js</span><span class="se">:</span><span class="ln">89</span><span class="se">:</span><span class="bn">2330</span><span class="se">:</span><span class="sl">$(<span class="mt ms">document</span>).on('builder.compile', function() {</span>
+<span class="fn">../bash-ps1/app.js</span><span class="se">-</span><span class="ln">90</span><span class="se">-</span><span class="bn">2377</span><span class="se">-</span>    $('#input').val('');
+<span class="fn">../bash-ps1/app.js</span><span class="se">-</span><span class="ln">91</span><span class="se">-</span><span class="bn">2402</span><span class="se">-</span>
+<span class="se">--</span>
+<span class="fn">../bash-ps1/app.js</span><span class="se">-</span><span class="ln">238</span><span class="se">-</span><span class="bn">6949</span><span class="se">-</span>    }
+<span class="fn">../bash-ps1/app.js</span><span class="se">-</span><span class="ln">239</span><span class="se">-</span><span class="bn">6955</span><span class="se">-</span>
+<span class="fn">../bash-ps1/app.js</span><span class="se">:</span><span class="ln">240</span><span class="se">:</span><span class="bn">6956</span><span class="se">:</span><span class="sl">    $(<span class="mt ms">document</span>).trigger('builder.compile');</span>
+<span class="fn">../bash-ps1/app.js</span><span class="se">-</span><span class="ln">241</span><span class="se">-</span><span class="bn">7000</span><span class="se">-</span>});
+<span class="fn">../bash-ps1/app.js</span><span class="se">-</span><span class="ln">242</span><span class="se">-</span><span class="bn">7004</span><span class="se">-</span></code></pre>
+
+                    <div class="form-group label-floating">
+                        <label class="control-label">Copy the below into your terminal to test, or paste into your <code>.bashrc</code> to make permanent.</label>
+                        <pre class="copy-paste"><code>export GREP_COLORS='<span class="contents"></span>';</code><a href="#copy" class="copy btn btn-xs btn-primary" data-clipboard-target="pre.copy-paste code">Copy</a></pre>
+                    </div>
+
+                    <div class="form-group">
+                        <div class="row">
+                            <div class="col-md-2">
+                                <a href="#" class="share btn btn-lg btn-primary">Share this style...</a>
+                            </div>
+                            <div class="col-md-10">
+                                <span class="url-copied help-block hidden">URL copied to clipboard!</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="panel-footer">
+                    <aside class="options">
+                        <h3>Options</h3>
+
+                        <div class="global-options">
+                            <div class="form-group">
+                                <div class="checkbox">
+                                    <label>
+                                        <input type="checkbox" name="light" value="1"/> Light terminal
+                                    </label>
+                                </div>
+                                <p class="help-block">White background, black text.</p>
+                            </div>
+<!--
+                            <div class="form-group">
+                                <div class="checkbox">
+                                    <label>
+                                        <input type="checkbox" name="bright"> Bold means bright.
+                                    </label>
+                                </div>
+                                <p class="help-block">In some terminals, instead of bold fonts, brighter colours are used</p>
+                            </div>
+-->
+                            <h4>Colours</h4>
+                            <div class="form-group">
+<!--
+                                <div class="radio">
+                                    <label>
+                                        <input type="radio" name="colours" value="16">
+                                        16
+                                    </label>
+                                </div>
+                                <div class="radio">
+                                    <label>
+                                        <input type="radio" name="colours" value="88">
+                                        88
+                                    </label>
+                                </div>
+-->
+                                <div class="radio">
+                                    <label>
+                                        <input type="radio" name="colours" value="256" checked>
+                                        256
+                                    </label>
+                                </div>
+                                <div class="radio">
+                                    <label>
+                                        <input type="radio" name="colours" value="true">
+                                        True colour
+                                    </label>
+                                </div>
+                            </div>
+
+<!--
+                            <div class="form-group">
+                                <label>
+                                    <input type="range" name="opacity" min="0" max="1" value="1" step="0.01" class="form-control"> My terminal isn't opaque!
+                                </label>
+                                <p class="help-block">This slider adjusts the opacity of the element, to simlulate your transparency.</p>
+                            </div>
+-->
+                        </div>
+                    </aside>
+                </div>
+            </section>
+
+            <section class="builder panel panel-default">
+                <div class="panel-heading panel-heading-lg">
+                    <h2 class="panel-title panel-title-lg">Style</h2>
+                </div>
+                <div class="panel-body">
+                    <div class="blocks row">
+                        <div class="block styling col-md-3" data-fragment="sl" data-type="styling">
+                            <div class="panel panel-default">
+                                <div class="panel-heading">
+                                    <h3 class="panel-title">Matching Lines <code>sl=</code></h3>
+                                </div>
+                                <div class="panel-body">
+                                    <div class="form-group">
+                                        <label>Background</label>
+                                        <div class="checkbox">
+                                            <label>
+                                                <input type="checkbox" name="bg-default" value="49"> Default
+                                            </label>
+                                        </div>
+                                        <input type="color" name="bg" class="form-control colorpicker" placeholder="Default">
+                                    </div>
+                                    <div class="form-group">
+                                        <label>Text</label>
+                                        <div class="checkbox">
+                                            <label>
+                                                <input type="checkbox" name="fg-default" value="39"> Default
+                                            </label>
+                                        </div>
+                                        <input type="color" name="fg" class="form-control colorpicker" placeholder="Default">
+                                    </div>
+                                    <div class="row">
+                                        <div class="col-md-6 bold">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="bold"> Bold
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="dim"> Dim
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="italic"> Italic
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="underline"> Underline
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="overline"> Overline
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="strikethrough"> Strikethrough
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="blink"> Blink
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="invert"> Invert
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="hidden"> Hidden
+                                                </label>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="block styling col-md-3" data-fragment="cx" data-type="styling">
+                            <div class="panel panel-default">
+                                <div class="panel-heading">
+                                    <h3 class="panel-title">Context Lines <code>cx=</code></h3>
+                                </div>
+                                <div class="panel-body">
+                                    <div class="form-group">
+                                        <label>Background</label>
+                                        <div class="checkbox">
+                                            <label>
+                                                <input type="checkbox" name="bg-default" value="49"> Default
+                                            </label>
+                                        </div>
+                                        <input type="color" name="bg" class="form-control colorpicker" placeholder="Default">
+                                    </div>
+                                    <div class="form-group">
+                                        <label>Text</label>
+                                        <div class="checkbox">
+                                            <label>
+                                                <input type="checkbox" name="fg-default" value="39"> Default
+                                            </label>
+                                        </div>
+                                        <input type="color" name="fg" class="form-control colorpicker" placeholder="Default">
+                                    </div>
+                                    <div class="row">
+                                        <div class="col-md-6 bold">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="bold"> Bold
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="dim"> Dim
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="italic"> Italic
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="underline"> Underline
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="overline"> Overline
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="strikethrough"> Strikethrough
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="blink"> Blink
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="invert"> Invert
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="hidden"> Hidden
+                                                </label>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="block styling col-md-3" data-fragment="mt" data-type="styling">
+                            <div class="panel panel-default">
+                                <div class="panel-heading">
+                                    <h3 class="panel-title">Matching Text <code>mt=</code></h3>
+                                </div>
+                                <div class="panel-body">
+                                    <div class="form-group">
+                                        <label>Background</label>
+                                        <div class="checkbox">
+                                            <label>
+                                                <input type="checkbox" name="bg-default" value="49"> Default
+                                            </label>
+                                        </div>
+                                        <input type="color" name="bg" class="form-control colorpicker" placeholder="Default">
+                                    </div>
+                                    <div class="form-group">
+                                        <label>Text</label>
+                                        <div class="checkbox">
+                                            <label>
+                                                <input type="checkbox" name="fg-default" value="39"> Default
+                                            </label>
+                                        </div>
+                                        <input type="color" name="fg" class="form-control colorpicker" placeholder="Default">
+                                    </div>
+                                    <div class="row">
+                                        <div class="col-md-6 bold">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="bold"> Bold
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="dim"> Dim
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="italic"> Italic
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="underline"> Underline
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="overline"> Overline
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="strikethrough"> Strikethrough
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="blink"> Blink
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="invert"> Invert
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="hidden"> Hidden
+                                                </label>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- <div class="block styling col-md-3" data-fragment="ms" data-type="styling">
+                            <div class="panel panel-default">
+                                <div class="panel-heading">
+                                    <h3 class="panel-title">Matching Text (in matching line) <code>mt=</code></h3>
+                                </div>
+                                <div class="panel-body">
+                                    <div class="form-group">
+                                        <label>Background</label>
+                                        <div class="checkbox">
+                                            <label>
+                                                <input type="checkbox" name="bg-default" value="49"> Default
+                                            </label>
+                                        </div>
+                                        <input type="color" name="bg" class="form-control colorpicker" placeholder="Default">
+                                    </div>
+                                    <div class="form-group">
+                                        <label>Text</label>
+                                        <div class="checkbox">
+                                            <label>
+                                                <input type="checkbox" name="fg-default" value="39"> Default
+                                            </label>
+                                        </div>
+                                        <input type="color" name="fg" class="form-control colorpicker" placeholder="Default">
+                                    </div>
+                                    <div class="row">
+                                        <div class="col-md-6 bold">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="bold"> Bold
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="dim"> Dim
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="italic"> Italic
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="underline"> Underline
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="overline"> Overline
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="strikethrough"> Strikethrough
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="blink"> Blink
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="invert"> Invert
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="hidden"> Hidden
+                                                </label>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div> -->
+                        <!-- <div class="block styling col-md-3" data-fragment="mc" data-type="styling">
+                            <div class="panel panel-default">
+                                <div class="panel-heading">
+                                    <h3 class="panel-title">Matching Text (in context line) <code>mc=</code></h3>
+                                </div>
+                                <div class="panel-body">
+                                    <div class="form-group">
+                                        <label>Background</label>
+                                        <div class="checkbox">
+                                            <label>
+                                                <input type="checkbox" name="bg-default" value="49"> Default
+                                            </label>
+                                        </div>
+                                        <input type="color" name="bg" class="form-control colorpicker" placeholder="Default">
+                                    </div>
+                                    <div class="form-group">
+                                        <label>Text</label>
+                                        <div class="checkbox">
+                                            <label>
+                                                <input type="checkbox" name="fg-default" value="39"> Default
+                                            </label>
+                                        </div>
+                                        <input type="color" name="fg" class="form-control colorpicker" placeholder="Default">
+                                    </div>
+                                    <div class="row">
+                                        <div class="col-md-6 bold">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="bold"> Bold
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="dim"> Dim
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="italic"> Italic
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="underline"> Underline
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="overline"> Overline
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="strikethrough"> Strikethrough
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="blink"> Blink
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="invert"> Invert
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="hidden"> Hidden
+                                                </label>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div> -->
+                        <div class="block styling col-md-3" data-fragment="fn" data-type="styling">
+                            <div class="panel panel-default">
+                                <div class="panel-heading">
+                                    <h3 class="panel-title">File Name <code>fn=</code></h3>
+                                </div>
+                                <div class="panel-body">
+                                    <div class="form-group">
+                                        <label>Background</label>
+                                        <div class="checkbox">
+                                            <label>
+                                                <input type="checkbox" name="bg-default" value="49"> Default
+                                            </label>
+                                        </div>
+                                        <input type="color" name="bg" class="form-control colorpicker" placeholder="Default">
+                                    </div>
+                                    <div class="form-group">
+                                        <label>Text</label>
+                                        <div class="checkbox">
+                                            <label>
+                                                <input type="checkbox" name="fg-default" value="39"> Default
+                                            </label>
+                                        </div>
+                                        <input type="color" name="fg" class="form-control colorpicker" placeholder="Default">
+                                    </div>
+                                    <div class="row">
+                                        <div class="col-md-6 bold">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="bold"> Bold
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="dim"> Dim
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="italic"> Italic
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="underline"> Underline
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="overline"> Overline
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="strikethrough"> Strikethrough
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="blink"> Blink
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="invert"> Invert
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="hidden"> Hidden
+                                                </label>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="block styling col-md-3" data-fragment="ln" data-type="styling">
+                            <div class="panel panel-default">
+                                <div class="panel-heading">
+                                    <h3 class="panel-title">Line Number <code>ln=</code></h3>
+                                </div>
+                                <div class="panel-body">
+                                    <div class="form-group">
+                                        <label>Background</label>
+                                        <div class="checkbox">
+                                            <label>
+                                                <input type="checkbox" name="bg-default" value="49"> Default
+                                            </label>
+                                        </div>
+                                        <input type="color" name="bg" class="form-control colorpicker" placeholder="Default">
+                                    </div>
+                                    <div class="form-group">
+                                        <label>Text</label>
+                                        <div class="checkbox">
+                                            <label>
+                                                <input type="checkbox" name="fg-default" value="39"> Default
+                                            </label>
+                                        </div>
+                                        <input type="color" name="fg" class="form-control colorpicker" placeholder="Default">
+                                    </div>
+                                    <div class="row">
+                                        <div class="col-md-6 bold">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="bold"> Bold
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="dim"> Dim
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="italic"> Italic
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="underline"> Underline
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="overline"> Overline
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="strikethrough"> Strikethrough
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="blink"> Blink
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="invert"> Invert
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="hidden"> Hidden
+                                                </label>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="block styling col-md-3" data-fragment="bn" data-type="styling">
+                            <div class="panel panel-default">
+                                <!-- <div class="panel-heading" draggable="true"> -->
+                                <div class="panel-heading">
+                                    <h3 class="panel-title">Byte Number <code>bn=</code></h3>
+                                </div>
+                                <div class="panel-body">
+                                    <div class="form-group">
+                                        <label>Background</label>
+                                        <div class="checkbox">
+                                            <label>
+                                                <input type="checkbox" name="bg-default" value="49"> Default
+                                            </label>
+                                        </div>
+                                        <input type="color" name="bg" class="form-control colorpicker" placeholder="Default">
+                                    </div>
+                                    <div class="form-group">
+                                        <label>Text</label>
+                                        <div class="checkbox">
+                                            <label>
+                                                <input type="checkbox" name="fg-default" value="39"> Default
+                                            </label>
+                                        </div>
+                                        <input type="color" name="fg" class="form-control colorpicker" placeholder="Default">
+                                    </div>
+                                    <div class="row">
+                                        <div class="col-md-6 bold">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="bold"> Bold
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="dim"> Dim
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="italic"> Italic
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="underline"> Underline
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="overline"> Overline
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="strikethrough"> Strikethrough
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="blink"> Blink
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="invert"> Invert
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="hidden"> Hidden
+                                                </label>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="block styling col-md-3" data-fragment="se" data-type="styling">
+                            <div class="panel panel-default">
+                                <!-- <div class="panel-heading" draggable="true"> -->
+                                <div class="panel-heading">
+                                    <h3 class="panel-title">Separator <code>se=</code></h3>
+                                </div>
+                                <div class="panel-body">
+                                    <div class="form-group">
+                                        <label>Background</label>
+                                        <div class="checkbox">
+                                            <label>
+                                                <input type="checkbox" name="bg-default" value="49"> Default
+                                            </label>
+                                        </div>
+                                        <input type="color" name="bg" class="form-control colorpicker" placeholder="Default">
+                                    </div>
+                                    <div class="form-group">
+                                        <label>Text</label>
+                                        <div class="checkbox">
+                                            <label>
+                                                <input type="checkbox" name="fg-default" value="39"> Default
+                                            </label>
+                                        </div>
+                                        <input type="color" name="fg" class="form-control colorpicker" placeholder="Default">
+                                    </div>
+                                    <div class="row">
+                                        <div class="col-md-6 bold">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="bold"> Bold
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="dim"> Dim
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="italic"> Italic
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="underline"> Underline
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="overline"> Overline
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="strikethrough"> Strikethrough
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="blink"> Blink
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="invert"> Invert
+                                                </label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6">
+                                            <div class="checkbox">
+                                                <label>
+                                                    <input type="checkbox" name="hidden"> Hidden
+                                                </label>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.6.0/clipboard.min.js"></script>
+        <script src="https://cdn.rawgit.com/itsjavi/bootstrap-colorpicker/master/dist/js/bootstrap-colorpicker.js"></script>
+
+        <!-- <script type="text/javascript" src="parse.js"></script> -->
+        <script src="terminal-preview/dist/parse-min.js"></script>
+        <!-- <script type="text/javascript" src="data.js"></script> -->
+        <script type="text/javascript" src="app.js"></script>
+    </body>
+</html>
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..385cbdd
--- /dev/null
+++ b/style.css
@@ -0,0 +1,11 @@
+.url-copied { padding-top:.6em; }
+
+h1 .version { opacity: 0; font-size: 0.8em; font-family: monospace; letter-spacing: -5px; transition: .25s opacity linear; }
+h1:hover .version { opacity: .3; }
+
+pre { position: relative; }
+pre a.btn { display: none; position: absolute; right: 2px; top: 2px; }
+pre:hover a.btn { display: block; }
+
+.builder .blocks { overflow: hidden; }
+.builder .blocks .block { min-height: 38em; }
diff --git a/terminal-preview b/terminal-preview
new file mode 160000
+Subproject 6dfac8151478652d66e0728318cc71fa18c99af