31:Tb1d,function highlightedtextarea(config = {}) { let {value, autocomplete, height="200px", width="100%", maxlength, placeholder, spellcheck, wrap, language="html", tabsize=2} = config; if (typeof config == "string") value = config; if (value == null) value = ""; const form = input({ form: html`

${value.replace(new RegExp("&", "g"), "&").replace(new RegExp("<", "g"), "<")}

`, attributes: {autocomplete, maxlength, placeholder, spellcheck, wrap} }); Prism.highlightAllUnder(form); form.output.remove(); form.oninput = (e => { let text = e.target.value; let result_element = e.target.parentElement.querySelector("pre > code"); // Handle final newlines if (text[text.length-1] == "\n") text += " "; // Update code result_element.innerHTML = text.replace(new RegExp("&", "g"), "&").replace(new RegExp("<", "g"), "<"); // Syntax Highlight Prism.highlightElement(result_element); sync_scroll(e); }) form.querySelector("textarea").onscroll = sync_scroll; function sync_scroll(e) { /* Scroll result to scroll coords of event - sync with textarea */ let result_element = e.target.parentElement.querySelector("pre"); // Get and set x and y result_element.scrollTop = e.target.scrollTop; result_element.scrollLeft = e.target.scrollLeft; } form.querySelector("textarea").onkeydown = check_tab; function check_tab(e) { let code = e.target.value; if(e.key == "Tab") { e.preventDefault(); // stop normal let before_tab = code.slice(0, e.target.selectionStart); // text before tab let after_tab = code.slice(e.target.selectionEnd, e.target.value.length); // text after tab let cursor_pos = e.target.selectionEnd + 1; // where cursor moves after tab - moving forward by 1 char to after tab e.target.value = before_tab + "\t" + after_tab; // add tab char // move cursor e.target.selectionStart = cursor_pos; e.target.selectionEnd = cursor_pos; } } return form; }32:[] 2f:{"title":"Editable syntax highlighted code","cells":[{"id":0,"value":"# Editable syntax highlighted code\nRe-implementation of the example [here](https://codepen.io/WebCoder49/pen/dyNyraq), as covered in [this CSS-Tricks article](https://css-tricks.com/creating-an-editable-textarea-that-supports-syntax-highlighted-code/) by [WebCoder49](https://codepen.io/WebCoder49/).\n\nExtending the `textarea` input to be transparent except for the caret and positioned on top of the syntax-highlighted block using `z-indexes`, with the result synchronised whenever the user enters code.\n\nSyntax Highlighting by [Prism.js](https://prismjs.com/).","pinned":false,"hidden":false,"mode":"md"},{"id":82,"value":"viewof g = highlightedtextarea({\n value: \"Insert

 here...\", \n  spellcheck: false,\n  height: '150px',\n  width: \"50%\",\n  tabsize: 4,\n  language: 'html'\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":81,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"htmlStyle = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"import {input} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"Prism = {\n  // minified version auto-generated by jsDelivr (not part of the package)\n  const Prism = await require(`https://cdn.jsdelivr.net/npm/prismjs@1/prism.min.js`).catch(() => window.Prism);\n  \n  // https://github.com/observablehq/stdlib#require uses jsDelivr by default\n  await require(`https://cdn.jsdelivr.net/npm/prismjs@1/plugins/line-numbers/prism-line-numbers.min.js`).catch(() => {});\n  \n  return Prism; \n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}