code input

Fully customisable, editable, syntax-highlighted textareas + plugins

175

JavaScript

code-input

Fully customisable, editable syntax-highlighted textareas that can be placed in any HTML form. [🚀 View the Demo]

Using code-input with many different themes
This demonstration uses themes from Prism.js and highlight.js, two syntax-highlighting programs which work well with and have compatibility built-in with code-input.

A frontend JavaScript library, with:

What does it do?

code-input lets you turn any ordinary JavaScript syntax-highlighting theme and program into customisable syntax-highlighted textareas using an HTML custom element. It uses vanilla CSS to superimpose a textarea on a pre code block, then handles indentations, scrolling and fixes any resulting bugs with JavaScript. To see how it works behind the scenes (not how to use this library), please see this CSS-Tricks article I wrote.

What are the advantages of using code-input, and what can it be used for?

Unlike other front-end code-editor projects, the simplicity of how code-input works means it is highly customisable. As it is not a full-featured editor, you can choose what features you want it to include, and use your favourite syntax-highlighting algorithms and themes.

The <code-input> element works like a <textarea> and therefore works in HTML5 forms and supports using the name, value and placeholder attributes, events like onchange, form resets, to name a few… (Demo)

code-input has also accumulated many features in optional plugins from open-source contributions, allowing you to choose any features you want. If a feature you want is not present, please open an issue / contribute it!

🚀 Getting Started With `code-input` (in 4 simple steps)

`code-input` also supports TypeScript (click)

You can follow the instructions below, or use the starter code available here for highlight.js and here for Prism.js.

code-input is designed to be both easy to use and customisable. Here’s how to use it to create syntax-highlighted textareas:

1. Import `code-input`

First, import your favourite syntax-highlighter’s JS and CSS theme files to turn editable.
Then, import the CSS and JS files of code-input from a downloaded release or a CDN. The non-minified files are useful for using during development.

Locally downloaded (Click)

<!--In the <head>-->
<script src="path/to/code-input.min.js"></script>
<link rel="stylesheet" href="path/to/code-input.min.css">

From JSDelivr CDN (click)

<!--In the <head>-->
<script src="https://cdn.jsdelivr.net/gh/WebCoder49/[email protected]/code-input.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/WebCoder49/[email protected]/code-input.min.css">

2. Creating a template

The next step is to set up a template to link code-input to your syntax-highlighter. If you’re using Prism.js or highlight.js, you can use the built-in template, or you can create your own otherwise. In these examples, I am registering the template as "syntax-highlighted", but you can use any template name as long as you are consistent.

Highlight.js:

codeInput.registerTemplate("syntax-highlighted", codeInput.templates.hljs(hljs, [] /* Array of plugins (see below) */));

Prism.js:

codeInput.registerTemplate("syntax-highlighted", codeInput.templates.prism(Prism, [] /* Array of plugins (see below) */));

Custom:

codeInput.registerTemplate("syntax-highlighted", new codeInput.Template(
  function(result_element) { /* Highlight function - with `pre code` code element */
    /* Highlight code in result_element - code is already escaped so it doesn't become HTML */
  },

  true, /* Optional - Is the `pre` element styled as well as the `code` element?
         * Changing this to false uses the code element as the scrollable one rather
         * than the pre element */
        
  true, /* Optional - This is used for editing code - setting this to true sets the `code`
         * element's class to `language-<the code-input's lang attribute>` */

  false /* Optional - Setting this to true passes the `<code-input>` element as a second
         * argument to the highlight function to be used for getting data- attribute values
         * and using the DOM for the code-input */,

  [] // Array of plugins (see below)
));

3. Adding plugins

Plugins allow you to add extra features to a template, like automatic indentation or support for highlight.js’s language autodetection. To use them, just:

Import the plugins’ JS files after you have imported code-input and before registering the template.
Place instances of the plugins in the array of plugins argument when registering, like this:

<script src="code-input.js"></script>
<!--...-->
<script src="plugins/autodetect.js"></script>
<script src="plugins/indent.js"></script>
<!--...-->
<script>
  codeInput.registerTemplate("syntax-highlighted", 
    codeInput.templates.hljs(
      hljs, 
      [
        new codeInput.plugins.Autodetect(), 
        new codeInput.plugins.Indent(true, 2) // 2 spaces indentation
      ]
    )
  );
</script>

⚠️ Unfortunately placing multiple plugins of the same type in a template can currently cause errors and undefined behaviour, even if such a configuration makes logical sense. This is issue #118 and will be fixed as soon as possible - if you’d like to help and have the time you’re welcome, but it’s also at the top of the maintainer’s To-Do list.

To see a full list of plugins and their functions, please see plugins/README.md.

4. Using the component

Now that you have registered a template, you can use the custom <code-input> element in HTML. If you have more than one template registered, you need to add the template name as the template attribute. With the element, using the language attribute will add a language-{value} class to the pre code block. You can now use HTML attributes and events, as well as CSS styles, to make your element as simple or interactive as you like, as if it were a textarea element!

<code-input language="HTML"></code-input>

<code-input language="HTML" placeholder="Type code here" template="syntax-highlighted" onchange="console.log('Your code is', this.value)">&lt; href='https://github.com/WebCoder49/code-input'>code-input&lt;/a></code-input>

⚠️ At the moment, you need to set the --padding property rather than padding for a code-input element’s CSS. All other properties should work as normal.

Contributing

If you have any features you would like to add to code-input as plugins or core functionality, or have found any bugs, please open an issue or fork and submit a pull request! All contributions to this open-source project will be greatly appreciated. You can see more info in our CONTRIBUTING.md file.


…have contributed pull requests so far.
(source: contrib.rocks)