JSFiddle - React, Tailwind, and code Playground

by TeslaNick

HTML

<pre>Failed to process incoming message on attempt 2 of 4. The message will be reprocessed
    Root cause: class java.io.UnsupportedEncodingException: 'UTF-8'
    Sanitized Stack Trace: (132 lines removed)
        org.springframework.integration.transformer.MessageTransformationException: org.springframework.integration.MessageHandlingException: java.io.UnsupportedEncodingException: 'UTF-8'
            at com.dealer.crm.gateway.EmailExportGateway$process.call(Unknown Source)
            at com.dealer.crm.amqp.email.EmailImportMessageListener.process(EmailImportMessageListener.groovy:31)
            at com.dealer.crm.amqp.email.EmailImportMessageListener.process(EmailImportMessageListener.groovy)
            at com.dealer.crm.amqp.ImportMessageListener$onMessageReceived$1.doCall(ImportMessageListener.groovy:110)
            at com.dealer.crm.amqp.ImportMessageListener$onMessageReceived$1.build(ImportMessageListener.groovy)
            at com.dealer.crm.tx.TxService$6.provide(TxService.java:312)
            at com.dealer.crm.tx.TxService.prepareAndExec(TxService.java:389)
            at com.dealer.crm.tx.TxService.setContextAndExec(TxService.java:362)
            at com.dealer.crm.tx.TxService.initialExec(TxService.java:334)
            at com.dealer.crm.tx.TxService.exec(TxService.java:217)
            at com.dealer.crm.amqp.ImportMessageListener.onMessageReceived(ImportMessageListener.groovy:109)
            at com.dealer.crm.amqp.ImportMessageListener$onMessageReceived.callCurrent(Unknown Source)
            at com.dealer.crm.amqp.AbstractFailureHandlingMessageListener.onMessage(AbstractFailureHandlingMessageListener.groovy:35)
        Caused by: org.springframework.integration.MessageHandlingException: java.io.UnsupportedEncodingException: 'UTF-8'
            ... 95 more
        Caused by: java.io.UnsupportedEncodingException: 'UTF-8'
            at com.dealer.crm.email.EmailSummaryBuilder.getAttachmentInfo(EmailSummaryBuilder.groovy:75)
            at...

CSS

pre {
    font-family: monospace;
    padding: 10px;
    line-height: 18px;
    white-space: normal;
}

pre span {
    display: block;
    position: relative;
    padding-left: 70px;
    text-indent: -40px;
}

pre span.indent-1 {
    padding-left: 100px;
}
pre span.indent-2 {
    padding-left: 130px;
}
pre span.indent-3 {
    padding-left: 160px;
}
pre span.indent-4 {
    padding-left: 190px;
}


pre em {
    white-space: pre;
}

pre i {
    display: inline-block;
    width: 0;
    overflow: hidden;
}

pre span::after {
    display: block;
    content: " ";
    
    margin-left: -30px;
    position: absolute;
    top: 18px;
    bottom: 0px;
    width: 25px;
    
    
    background: transparent...

JavaScript

(function() {
    if(!document.querySelectorAll) { return; }

    var sp = '{~{REPLACE}~}';
    
    Array.prototype.forEach.call(document.querySelectorAll('pre'), function(n) {
        var h = n.innerHTML,
            df = document.createDocumentFragment(),
            lines = h.split(/\n/g);
        
        if(n.classList.contains('formatted')) { return; }
        
        lines.forEach(function(line) {
            var el = document.createElement('span'),
                t = (/^(\t+)|(\s{4,})/).exec(line),
                parts = line.replace(/([\[\(\.\$])/g, "$1"+sp).split(sp);

            line = parts.join('<i> </i>');
            line = line.replace(/^\t+|\s{4,}/g, '');
                        
            el.className = 'indent-' + (t ? (t[1] ? t[i].length : Math.floor(t[2].length / 4)) : 0);
            
            line = line.replace(/(\s\s+|\t+)/g, '<em>$1</em>');
            el.innerHTML = line;
            
            df.appendChild(el);
        });
    
        n.innerHTML = '';
        n.appendChild(df);
        
        n.classList.add('formatted');
    });        
    
}());