33:I[204091,["/_next/static/immutable/chunks/0flq6dgj4r1ua.js"],"IconMark"] 2b:null 2c:["$","title",null,{"children":"Editable syntax highlighted code | johnwelford | Observable"}] 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:{"id":"500c0c94f0f4270a","slug":"editable-syntax-highlighted-code","title":"Editable syntax highlighted code","thumbnail":"7e3c5ee13890923b34382d4bd3ae1c606317b313bac88bc2b6d828db9b9dfc93","access_level":"public","create_time":"$D2022-01-09T04:40:43.788Z","update_time":"$D2022-03-29T10:12:40.465Z","view_time":null,"first_public_time":"$D2022-01-09T05:47:09.358Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"6c1f25ef90c27e9b","login":"johnwelford","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3bfe9ac5315b1340bf914c84d1ed0ae174327f3802f4ba068fcaa4c223cfb471","tier":"starter_2024"},"version":88,"publish_version":88,"role":null,"authored":false,"authors":[{"type":"individual","id":"629158c5ced3958f","login":"johnwelford","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3bfe9ac5315b1340bf914c84d1ed0ae174327f3802f4ba068fcaa4c223cfb471","tier":null}],"members":[{"type":"individual","id":"629158c5ced3958f","login":"johnwelford","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3bfe9ac5315b1340bf914c84d1ed0ae174327f3802f4ba068fcaa4c223cfb471","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"htmlStyle = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"import {input} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}}
30:"$2f:body"
24:null
28:[["$","title","0",{"children":"Editable syntax highlighted code | johnwelford | Observable"}],["$","meta","1",{"property":"og:title","content":"Editable syntax highlighted code"}],["$","meta","2",{"property":"og:description","content":"An Observable notebook by johnwelford"}],["$","meta","3",{"property":"og:url","content":"https://observablehq.com/@johnwelford/editable-syntax-highlighted-code"}],["$","meta","4",{"property":"og:site_name","content":"Observable"}],["$","meta","5",{"property":"og:image","content":"https://static.observableusercontent.com/thumbnail/7e3c5ee13890923b34382d4bd3ae1c606317b313bac88bc2b6d828db9b9dfc93.jpg"}],["$","meta","6",{"property":"og:image:width","content":"640"}],["$","meta","7",{"property":"og:image:height","content":"400"}],["$","meta","8",{"property":"og:type","content":"article"}],["$","meta","9",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","10",{"name":"twitter:title","content":"Editable syntax highlighted code"}],["$","meta","11",{"name":"twitter:description","content":"An Observable notebook by johnwelford"}],["$","meta","12",{"name":"twitter:image","content":"https://static.observableusercontent.com/thumbnail/7e3c5ee13890923b34382d4bd3ae1c606317b313bac88bc2b6d828db9b9dfc93.jpg"}],["$","meta","13",{"name":"twitter:image:width","content":"640"}],["$","meta","14",{"name":"twitter:image:height","content":"400"}],["$","link","15",{"rel":"icon","href":"/favicon.ico?favicon.2hqc0rwsy9zm6.ico","sizes":"96x96","type":"image/x-icon"}],["$","link","16",{"rel":"icon","href":"/icon.png?icon.1mhghqfpotdlb.png","sizes":"512x512","type":"image/png"}],["$","$L33","17",{}]]