https://github.com/offroaders123/num-text

A simple text editor Web Component for the browser!
https://github.com/offroaders123/num-text

desktop editor javascript mobile text-editor vanilla-javascript web-components

Last synced: 2 months ago
JSON representation

A simple text editor Web Component for the browser!

• Host: GitHub
• URL: https://github.com/offroaders123/num-text
• Owner: Offroaders123
• License: mit
• Created: 2020-07-10T03:08:19.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2024-10-11T22:59:09.000Z (4 months ago)
• Last Synced: 2024-11-30T01:06:48.041Z (3 months ago)
• Topics: desktop, editor, javascript, mobile, text-editor, vanilla-javascript, web-components
• Language: TypeScript
• Homepage: https://npm.im/@stedit/num-text
• Size: 137 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Num Text

[![npm](https://img.shields.io/npm/v/@stedit/num-text.svg)](https://www.npmjs.com/package/@stedit/num-text)

[![downloads](https://img.shields.io/npm/dm/@stedit/num-text.svg)](https://www.npmjs.com/package/@stedit/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](https://codemirror.net) or [Monaco Editor](https://microsoft.github.io/monaco-editor), but they had more features than what I needed for my own projects, the main one being [Smart Text Editor](https://stedit.app). I decided to go ahead and make my own!

## Getting Started

Thanks to the powerful [Web Components API](https://developer.mozilla.org/en-US/docs/Web/Web_Components), 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 `` element in your own page, follow the steps written below:

1. Add the component's script tag to the `` of your page. This will register the component as a custom element that you will be able to use in your HTML and JavaScript.

    ```html

    

    ```

2. Add a `` element to the page using any of the ways you would for a default HTML element. Now you are ready to start editing!

    ```html

    

    

    ```

    ```javascript

    /* Or create it with JavaScript */

    const editor = document.createElement("num-text");

    ```

### Styling a Num Text element

Changing the default styles of a `` element is fairly simple! Check out how to customize each part of the component's appearance:

```html

  

    

      /* Minimum default component styles */

    

    

      /* Additional appearance styles */

    

    

      /* Num Text's vanilla Prism theme styles */

    

    


      


        


          

        

      


      


        

          

        

        

      


    


```

*More coming soon!*