prism with textarea

SQL

by humanzing

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 onkeyup="myFunction()" contenteditable class="language-sql" data-linenumber="0">
	{
  "content": "this `supports` __a__ **subset** *of* ~~markdown~~ 😃 ```js\nfunction foo(bar) {\n  console.log(bar);\n}\n\nfoo(1);```\nWhen sending webhooks, you can have [masked links](https://discordapp.com) in here!",
  "embeds": [
    {
      "title": "title ~~(did you know you can have markdown here too?)~~",
      "description": "this supports [named links](https://discordapp.com) on top of the previously shown subset of markdown. ```\nyes, even code blocks```",
      "url": "https://discordapp.com",
      "color": 15286028,
      "timestamp": "2019-11-16T15:53:05.777Z",
      "footer": {
        "icon_url": "https://cdn.discordapp.com/embed/avatars/0.png",
        "text": "footer text"
      },
      "thumbnail": {
        "url": "https://cdn.discordapp.com/embed/avatars/0.png"
      },
      "image": {
        "url": "https://cdn.discordapp.com/embed/avatars/0.png"
      },
      "author": {
        "name": "author name",
        "url": "https://discordapp.com",
        "icon_url": "https://cdn.discordapp.com/embed/avatars/0.png"
      },
      "fields": [
        {
          "name": "🤔",
          "value": "some of these properties have certain limits..."
        },
        {
          "name": "😱",
          "value": "try exceeding some of them!"
        },
        {
          "name": "🙄",
          "value": "an informative error should show up, and this view will remain as-is until all issues are fixed"
        },
        {
          "name": "<:thonkang:219069250692841473>",
          "value": "these last two",
          "inline": true
        },
        {
          "name": "<:thonkang:219069250692841473>",
          "value":...

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

function myFunction()
{
//	alert("hello");
}

(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 no-selection type than to try to find an old browser
    } else if (window.getSelection && el.setSelectionRange) {
      // Standards. Element is an input or textarea 
      // note that some input elements do not allow selections
      try {
        el.selectionStart; // even getting the selection in such an element will throw
        ret = new InputRange();
      } catch (e) {
        ret = new NothingRange();
      }
    } else if (window.getSelection) {
      // Standards, with any other kind of element
      ret = new W3CRange();
    } else if (document.selection) {
      // Internet Explorer
      ret = new IERange();
    } else {
      // doesn't support selection
      ret = new NothingRange();
    }
    ret._el = el;
    // determine parent document, as implemented by John McLear <[email protected]>
    ret._doc = el.ownerDocument;
    ret._win = 'defaultView' in ret._doc ? ret._doc.defaultView : ret._doc.parentWindow;
    ret._textProp = textProp(el);
    ret._bounds = [0, ret.length()];
    //  There's no way to detect whether a focus event happened as a result of a click (which should change the selection)
    // or as a result of a keyboard event (a tab in) or a script  action (el.focus()). So we track it globally, which is a hack,...