Nice Javascript code showoff area

    var init_showoff = function() {

        var generate_random_id = function(len) {
              var randId = "";
              var values = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
              for (var i = 0; i < len; i++) {
                  randId += values.charAt(Math.floor(Math.random() * values.length));
              }
              return 'showoff_' + randId
        };

        var replaceAllSpaces = function(val, replacement) {
            return val.replace(/ /g, replacement);
        };

        var replaceAllTabs = function(val, replacement) {
            return val.replace(/\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\t/g, replacement);
        };

        var replaceAllLt = function(val) {
            return val.replace(/</g, '&lt;');
        };

        var replaceAllGt = function(val) {
            return val.replace(/>/g, '&gt;');
        };


        var showoff_transform = function(element) {
            var bg_color = element.attr('showoff-bg');
            if (typeof bg_color === 'undefined') {
                bg_color = '#282c34';
            }


            var randomId = generate_random_id(8);
            element.attr('id', randomId);
            element.addClass('mc-showoff-transformed');
            element.css('display', 'none');
            var lines = element.html().split(/\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\r?\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\n/);
            var num_lines = lines.length;
            var so_case = $('<div style="margin:15px;display:block;width:100%;padding-top:15px;padding-bottom:35px;overflow-x:scroll;border:1px solid ' + bg_color + ';background-color:' + bg_color + ';border-radius:10px;-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);" />');
            so_case.append(
                $('<div style="display:block;height:20px;margin-bottom:35px;padding-left:25px;" />').append(
                    $('<div style="display:inline-block;width:20px;height:20px;margin-right:10px;background-color:#fc605b;border-radius:10px;" />')
                ).append(
                    $('<div style="display:inline-block;width:20px;height:20px;margin-right:10px;background-color:#fdbc40;border-radius:10px;" />')
                ).append(
                    $('<div style="display:inline-block;width:20px;height:20px;background-color:#33c748;border-radius:10px;" />')
                )
            );

            var table = $('<table style="border-collapse:collapse;box-sizing:border-box;" />');
            var left_spaces = 0;
            for (var i=0;i<lines.length;i++) {
                var l = lines[i];
                l = replaceAllGt(l);
                l = replaceAllLt(l);
                l = replaceAllSpaces(l, ' ');
                l = replaceAllTabs(l, '    ');

                if (i === 0) {
                    left_spaces = l.length - l.trimLeft().length;
                }
                if (left_spaces > 0) {
                    l = l.substr(left_spaces);
                }
                l = replaceAllSpaces(l, '&nbsp;');
                l = replaceAllTabs(l, '&nbsp;&nbsp;&nbsp;&nbsp;');
                if (i === lines.length - 1) {
                    if (l === '') {
                        continue;
                    }
                }

                table.append(
                    $('<tr />').append(
                        $('<td style="text-align:right;font-size:18px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select: none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding-left:45px;padding-right:15px;color:#4f4a48;font-family:Lucida Console, Monaco, monospace;width:20px;" />').html((i+1))
                    ).append(
                        $('<td style="white-space:nowrap;font-size:18px;color:#d4d3d2;font-family:\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Lucida Console\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', Monaco, monospace" />').html(l)
                    )
                );
            }
            so_case.append(table);

            element.before(so_case);
        };

        $('.mc-showoff').each(function(){
            if (!$(this).is('.mc-showoff-transformed')) {
                showoff_transform($(this));
            }
        })
    };

<pre class="mc-showoff">
    function foo() {
        return "Bar";
    }
</pre>
<script>
init_showoff();
</script>

<pre class="mc-showoff" showoff-bg="#090300">
    function foo() {
        return "Bar";
    }
</pre>
<script>
init_showoff();
</script>

<pre class="mc-showoff" showoff-bg="#090300">
    var generate_random_id = function(len) {
          var randId = "";
          var values = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
          for (var i = 0; i < len; i++) {
              randId += values.charAt(Math.floor(Math.random() * values.length));
          }
          return 'showoff_' + randId
    };
</pre>
<script>
init_showoff();
</script>