prism with textarea
SQL
HTML
<script src="https://cdn.jsdelivr.net/prism/1.3.0/prism.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/prism/1.3.0/themes/prism.css">
<script src="https://cdn.jsdelivr.net/prism/1.3.0/components/prism-sql.min.js"></script>
<pre contenteditable class="language-html" data-linenumber="0">
select * from as aa where </pre>
CSS
/* for line numbers */
[class*="language-"] {
counter-reset: linenumber;
}
span.line{
display: inline-block;
width: 100%;
counter-increment: linenumber;
}
span.line:nth-child(odd){
background: #f0f0f0;
}
span.line:before{
content: counter(linenumber);
font-size: 100%;
width: 2em;
display: inline-block;
font-weight: normal;
color: black;
border-right: 1px solid black;
margin-right: 5px;
padding-right: 5px;
text-align: right;
}
JavaScript
// Cross-broswer implementation of text ranges and selections
// documentation: http://bililite.com/blog/2011/01/17/cross-browser-text-ranges-and-selections/
// Version: 2.6
// Copyright (c) 2013 Daniel Wachsstock
// MIT license:
// Permission is hereby granted, free of charge, to any person
// obtaining a copy of this software and associated documentation
// files (the "Software"), to deal in the Software without
// restriction, including without limitation the rights to use,
// copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the
// Software is furnished to do so, subject to the following
// conditions:
// The above copyright notice and this permission notice shall be
// included in all copies or substantial portions of the Software.
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
// OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
// HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
// WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
// OTHER DEALINGS IN THE SOFTWARE.
(function() {
// a bit of weirdness with IE11: using 'focus' is flaky, even if I'm not bubbling, as far as I can tell.
var focusEvent = 'onfocusin' in document.createElement('input') ? 'focusin' : 'focus';
// IE11 normalize is buggy (http://connect.microsoft.com/IE/feedback/details/809424/node-normalize-removes-text-if-dashes-are-present)
var n = document.createElement('div');
n.appendChild(document.createTextNode('x-'));
n.appendChild(document.createTextNode('x'));
n.normalize();
var canNormalize = n.firstChild.length == 3;
bililiteRange = function(el, debug) {
var ret;
if (debug) {
ret = new NothingRange(); // Easier to force it to use the...