code-input

!Click to Switch

 
> An editable <textarea> that supports any syntax highlighting algorithm, for code or something else. Also, added plugins.
>
> Aiming to be more flexible, lightweight, modular, progressively enhanced and standards-based than the alternatives, we support HTML forms, the </code> JavaScript interface, more languages and more use cases.</p><p class="my-3">---</p><p class="my-3">Demos and usage instructions are available at <https://code-input-js.org> and <a href="docs/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">the <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">docs</code> directory</a>, to let you get started quickly!</p><p class="my-3">---</p><p class="my-3">A lightweight setup like the animation below is still the default for <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">code-input.js</code>, but a wide range of plugins are available to modularly and progressively enhance the experience - see <a href="https://code-input-js.org" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">the website</a> for interactive demos!</p><p class="my-3">!<a href="https://user-images.githubusercontent.com/69071853/133924472-05edde5c-23e7-4350-a41b-5a74d2dc1a9a.gif" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Using code-input with many different themes</a><br /><em>This demonstration uses themes from <a href="https://prismjs.com/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Prism.js</a> and <a href="https://highlightjs.org/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">highlight.js</a>, two syntax-highlighting programs which work well with and have compatibility built-in with code-input.</em></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Contributing</h2><br />If you have any features you would like to add to <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">code-input</code> as plugins or core functionality, or have found any bugs, please <a href="https://github.com/WebCoder49/code-input/issues" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">open an issue</a> or <a href="https://github.com/WebCoder49/code-input/fork" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">fork and submit a pull request</a>! All contributions to this open-source project will be greatly appreciated. You can see <a href="CONTRIBUTING.md" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">more info in our <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">CONTRIBUTING.md</code> file</a>.</p><p class="my-3"><strong>If you find a sensitive security vulnerability in the code-input.js library, please email the maintainer Oliver Geer at <a href="mailto:security@webcoder49.dev" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">security@webcoder49.dev</a>, optionally using <a href="https://ogeer.org#pgp" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">this encryption key</a>. GitHub security advisories (different to the more general "issues") are also accepted.</strong></p><p class="my-3"><br />|<a href="https://contrib.rocks/image?repo=WebCoder49%2Fcode-input" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">![Contributors</a>](https://github.com/WebCoder49/code-input/graphs/contributors)|<br />|---|<br />|...have contributed pull requests so far.|<br />|(source: <a href="https://contrib.rocks" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">contrib.rocks</a>)|<br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div></div><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>