JSFiddle - React, Tailwind, and code Playground

by ATechieDiary

HTML

<link rel="stylesheet" href="http://extjs.cachefly.net/ext-4.0.2a/resources/css/ext-all.css">
<script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shCore.js"></script>
<script src="http://gleitzman.com/media/js/shBrush/shBrushSql.js"></script>
<link rel="stylesheet" href="http://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shCore.css">

CSS

/**
 * SyntaxHighlighter
 * http://alexgorbatchev.com/SyntaxHighlighter
 *
 * SyntaxHighlighter is donationware. If you are using it, please donate.
 * http://alexgorbatchev.com/SyntaxHighlighter/donate.html
 *
 * @version
 * 3.0.83 (July 02 2010)
 * 
 * @copyright
 * Copyright (C) 2004-2010 Alex Gorbatchev.
 *
 * @license
 * Dual licensed under the MIT and GPL licenses.
 */
.syntaxhighlighter {
  background-color: white !important;
}
.syntaxhighlighter .line.alt1 {
  background-color: white !important;
}
.syntaxhighlighter .line.alt2 {
  background-color: white !important;
}
.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
  background-color: #e0e0e0 !important;
}
.syntaxhighlighter .line.highlighted.number {
  color: black !important;
}
.syntaxhighlighter table caption {
  color: black !important;
}
.syntaxhighlighter .gutter {
  color: #afafaf !important;
}
.syntaxhighlighter .gutter .line {
  border-right: 3px solid #6ce26c !important;
}
.syntaxhighlighter .gutter .line.highlighted {
  background-color: #6ce26c !important;
  color: white !important;
}
.syntaxhighlighter.printing .line .content {
  border: none !important;
}
.syntaxhighlighter.collapsed {
  overflow: visible !important;
}
.syntaxhighlighter.collapsed .toolbar {
  color: blue !important;
  background: white !important;
  border: 1px solid #6ce26c !important;
}
.syntaxhighlighter.collapsed .toolbar a {
  color: blue !important;
}
.syntaxhighlighter.collapsed .toolbar a:hover {
  color: red !important;
}
.syntaxhighlighter .toolbar {
  color: white !important;
  background: #6ce26c !important;
  border: none !important;
}
.syntaxhighlighter .toolbar a {
  color: white !important;
}
.syntaxhighlighter .toolbar a:hover {
  color: black !important;
}
.syntaxhighlighter .plain, .syntaxhighlighter .plain a {
  color: black !important;
}
.syntaxhighlighter .comments, .syntaxhighlighter .comments a {
  color: #008200 !important;
}
.syntaxhighlighter .string,...

JavaScript

Ext.create('Ext.panel.Panel', {
    width: '50%',
    height: 200,
    layout: 'border',
    renderTo: Ext.getBody(),
    items: [{
        // xtype: 'panel' implied by default	
        region: 'center',
        title: 'Manual Query Panel',
        xtype: 'panel',
        margins: '5 0 0 5',
        minWidth: '50%',
        //collapsible : true, // make collapsible
        id: 'west-region-container',
        layout: 'fit',
        items: [{
            xtype: 'textarea',
            maxlength: 10000,
            allowBlank: false,
            enableKeyEvents: true,
            style: 'border: none;',
            id: "manualQueryEdit",
            fieldStyle: "brush: sql",
			listeners : {
				change : function(field, newValue, oldValue) {
					var me = this; 
					var sqlHTML = '<pre class="brush: sql">' + newValue + '</pre>';
					Ext.getCmp('SQLResultTabPanel1212').update(sqlHTML);
                    					SyntaxHighlighter.highlight();
					
				}
			}
        }]
    }, {
        collapsible: true,
        animCollapse: false,
        autoScroll: true,
        styleHtmlContent: true,
        layout: 'fit',
        title: 'Final Query Panel',
        region: 'east', // center region is required, no width/height specified
        xtype: 'panel',
        id: 'SQLResultTabPanel1212',
        margins: '5 5 0 0',
        width: 200
    }]
});