@stedit/num-text v1.0.1
Num Text
A simple Web Component that adds line numbers and syntax highlighting to the default textarea element!
There are already plenty of code editors out there made for the browser, like CodeMirror or Monaco Editor, but they had more features than what I needed for my own projects, the main one being Smart Text Editor. I decided to go ahead and make my own!
Getting Started
Thanks to the powerful Web Components API, it's possible to create your own HTML elements that abstract away in-depth functionality that may otherwise be hard to work with manually. No need to import any stylesheets, or make any JavaScript calls. Just import the component's source into your page, and let the browser handle the rest!
Creating a Num Text element
To use a <num-text> element in your own page, follow the steps written below:
Add the component's script tag to the
<head>of your page. This will register the component as a custom element that you will be able to use in your HTML and JavaScript.<script src="https://cdn.jsdelivr.net/npm/@stedit/num-text/dist/index.min.js"></script>Add a
<num-text>element to the page using any of the ways you would for a default HTML element. Now you are ready to start editing!<!-- Add it directly to your HTML --> <num-text></num-text>/* Or create it with JavaScript */ const editor = document.createElement("num-text");
Styling a Num Text element
Changing the default styles of a <num-text> element is fairly simple! Check out how to customize each part of the component's appearance:
<!-- Component structure -->
<num-text>
<!-- #shadow-root (open) -->
<style num-text-theme="vanilla-layout" num-text-theme-type="user-agent">
/* Minimum default component styles */
</style>
<style num-text-theme="vanilla-appearance" num-text-theme-type="any">
/* Additional appearance styles */
</style>
<style num-text-theme="vanilla-highlighting" num-text-theme-type="syntax-highlight">
/* Num Text's vanilla Prism theme styles */
</style>
<div part="container">
<ol part="gutter">
<li part="line-number">
<!--
::before (Visible line number and it's surrounding padding)
-->
</li>
</ol>
<div part="content">
<pre part="syntax">
<!-- Prism syntax highlighting populates here -->
</pre>
<textarea part="editor"></textarea>
</div>
</div>
</num-text>More coming soon!