code-input

Code-input: Plugins

List Of Plugins

💡 Do you just want to get a quick editor working? We suggest the Indent and Prism Line Numbers plugins.

Lots of plugins are very customisable - please see the JavaScript files for parameters and if you want more features let us know via GitHub Issues.

---

Auto-Close Brackets

Automatically close pairs of brackets/quotes/other syntaxes in code, but also optionally choose the brackets this is activated for.

Files: auto-close-brackets.js

🚀 CodePen Demo

Autocomplete

Display a popup under the caret using the text in the code-input element. This works well with autocomplete suggestions.

Files: autocomplete.js / autocomplete.css

🚀 CodePen Demo

Autodetect

Autodetect the language live and change the lang attribute using the syntax highlighter’s autodetect capabilities. Works with highlight.js.

Files: autodetect.js

🚀 CodePen Demo

Find and Replace

Add Find-and-Replace (Ctrl+F for find, Ctrl+H for replace by default, or when JavaScript triggers it) functionality to the code editor.

Files: find-and-replace.js / find-and-replace.css

🚀 CodePen Demo

Go To Line

Add a feature to go to a specific line when a line number is given (or column as well, in the format line no:column no) that appears when (optionally) Ctrl+G is pressed or when JavaScript triggers it.

Files: go-to-line.js / go-to-line.css

🚀 CodePen Demo

Indent

Add indentation using the Tab key, and auto-indents after a newline, as well as making it possible to indent/unindent multiple lines using Tab/Shift+Tab. Supports tab characters and custom numbers of spaces as indentation, as well as (optionally) brackets typed affecting indentation.

Files: indent.js

🚀 CodePen Demo

Prism Line Numbers

Allow code-input elements to be used with the Prism.js line-numbers plugin, as long as the code-input element or a parent element of it has the CSS class line-numbers. Prism.js Plugin Docs

Files: prism-line-numbers.css (NO JS FILE)

🚀 CodePen Demo

Special Chars

Render special characters and control characters as a symbol with their hex code.

Files: special-chars.js / special-chars.css

🚀 CodePen Demo

Using 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/CSS files (there may only be one of these; import all of the files that exist) after you have imported code-input and before registering the template.
• If a JavaScript file is present, Place an instance of each plugin 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>
  

This site is open source. Improve this page.