textarea/index.html at main · CollaborativeTextArea/textarea · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html><html><head><title>textarea</title><link rel="icon" href="/favicon.ico"><link rel="apple-touch-icon" href="/favicon.ico"><meta name="keywords" content="textarea, SyntaxHighlighting, simple, nodistraction, antidistraction, minimalist, easy, free, open-sourced, madebyatotallyproguy"><meta property="og:title" content="textarea the simple tool with SyntaxHighlighting"><meta property="og:description" content="A simple textarea website filled to the screen with no distractions and Syntax-Highlighting implemented with the only job is to color text"><meta property="og:image" content="https://i.ibb.co/zhbHf9P1/Picsart-25-10-15-11-53-33-396.jpg"><meta property="og:url" content="https://textarea.js.org"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="textarea the simple tool with SyntaxHighlighting"><meta name="twitter:description" content="A simple textarea website filled to the screen with no distractions and Syntax-Highlighting implemented with the only job is to color text"><meta name="twitter:image" content="https://i.ibb.co/zhbHf9P1/Picsart-25-10-15-11-53-33-396.jpg"><link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/atom-one-light.min.css" media="(prefers-color-scheme: light)"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/atom-one-dark.min.css" media="(prefers-color-scheme: dark)"/><meta name="viewport" content="width=device-width, initial-scale=0.2"/><style>html,body{margin:0;height:100%;overflow:hidden;font-family:sans-serif}#editorWrapper{position:fixed;inset:0;width:100%;height:100%}#editor{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;font-family:"Roboto Mono",monospace;background:transparent;color:transparent;z-index:2;caret-color:black;border:none;resize:none;overflow:auto;font-size:16px;white-space:pre;line-height:1.2}#editor:focus{outline:none}#codeBlock{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;overflow:auto;background:white;color:black;font-family:"Roboto Mono",monospace;white-space:pre;pointer-events:none;line-height:1.2}@media (prefers-color-scheme: dark){#editor{color:white;caret-color:white}#codeBlock{background:#1e1e1e;color:#dcdcdc}}.hljs,.hljs-keyword,.hljs-built_in,.hljs-title,.hljs-type,.hljs-function,.hljs-variable{font-weight:normal!important;}</style><script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script></head><body><main style="position:absolute;left:-9999px;"><h1>textarea</h1><p>textarea is a distraction-free fullscreen textarea with syntax highlighting. And you can write sinple snippets here.</p></main><div id="editorWrapper" style="box-sizing: content-box;"><textarea id="editor" spellcheck="false" wrap="off" style="resize: none; background: transparent; color: transparent; box-sizing: content-box;">
<!DOCTYPE html>
<html>
<head>
  <title>yes</title>
</head>
<body>
  <a href="https://github.com/CollaborativeTextArea/textarea">git</a>
  <a href="https://textarea.js.org/info">info</a>
</body>
</html>
</textarea><pre><code id="codeBlock" spellcheck="false"></code></pre></div><p style="position:absolute; left:-9999px;">/info for more info</p><script type="application/ld+json">{"@context":"https://schema.org","@type":"SoftwareSourceCode","name":"Pro Gramming Textarea","url":"https://textarea.js.org/","codeRepository":"https://github.com/CollaborativeTextArea/textarea","description":"A code editing tool built with HTML. with cross platform support since its textarea and have no issues when writing plus the Textarea covers the whole screen with no unnecessary tools","programmingLanguage":"HTML","license":"https://opensource.org/licenses/MIT"}</script><script>window.onload=()=>{alert("Peer2peer version is in collaborativetextarea.github.io/Temptextarea due to privacy risks, check on your own risk")};let e=document.getElementById("editor"),codeBlock=document.getElementById("codeBlock"),lastValue="",lastHighlight="";function updateCode(){let t=e.value;codeBlock.textContent=t;if(t!==lastHighlight){lastHighlight=t;codeBlock.className="hljs";let r=hljs.highlightAuto(t);codeBlock.innerHTML=r.value}}function handleLocalChange(){updateCode();let t=e.value;if(t!==lastValue){lastValue=t}}e.addEventListener("input",handleLocalChange);e.addEventListener("paste",handleLocalChange);e.addEventListener("scroll",()=>requestAnimationFrame(()=>{codeBlock.scrollTop=e.scrollTop=Math.min(e.scrollTop,codeBlock.scrollHeight-codeBlock.clientHeight);codeBlock.scrollLeft=e.scrollLeft=Math.min(e.scrollLeft,codeBlock.scrollWidth-codeBlock.clientWidth)}));e.addEventListener("keydown",(ev)=>{if(ev.key==="Enter"){ev.preventDefault();let c=e.selectionStart,l=e.value.substring(0,c).split("\n").pop(),ind=l.match(/^\s*/)[0];e.setRangeText("\n"+ind,c,c,"end");updateCode();handleLocalChange()}});setInterval(()=>{codeBlock.className="hljs";codeBlock.innerHTML=hljs.highlightAuto(codeBlock.textContent).value},5000);updateCode();window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",()=>hljs.highlightElement(codeBlock));</script><script>(()=>{const p=new URLSearchParams(location.search),u=p.get('load');if(!u)return;confirm('Warning: you are about to load raw content externally with no checks. Continue?')&&fetch('https://cors-anywhere.com/'+u,{credentials:'omit',headers:{Accept:'text/plain'}}).then(r=>r.ok?r.text():Promise.reject('HTTP status: '+r.status)).then(t=>{const e=document.getElementById('editor');e&&(e.value=t,e.dispatchEvent(new Event('input',{bubbles:!0})));}).catch(err=>alert('Failed to fetch content. Possible causes: network/proxy blocked/invalid URL.\nError: '+err)).finally(()=>{p.delete('load');history.replaceState({},'',location.origin+location.pathname+(p.toString()?'?'+p.toString():''))})();})();</script><noscript><div style="z-index:9;color:#fff;position:relative">js needed oooof, for SyntaxHighlighting</div><meta http-equiv="refresh" content="0; url=/Uh-Oh"></noscript></body></html>