Skip to content

README.md

Latest commit

 

History

History
74 lines (52 loc) · 3.03 KB

README.md

File metadata and controls

74 lines (52 loc) · 3.03 KB

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.

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

Debounce Update

Debounce the update and highlighting function (What is Debouncing?)

Files: debounce-update.js

🚀 CodePen Demo

Indent

Adds 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.

Files: indent.js

🚀 CodePen Demo

Prism Line Numbers

Allows 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>