Ace-Editor-Web-Component

A web component that allows you to easily add code editor(s) to your web page powered via Ace Editor Show your support!

Example and usage

You can view a demo of the Ace Editor web component in use here.

How to use the Ace Editor Web Component:

Set a language attribute to a supported programming language you prefer to use - example below

<ace-editor language="python"></ace-editor>

include this script in your HTML document.

  <script src="https://cdn.jsdelivr.net/gh/MarketingPipeline/[email protected]/dist/ace-editor-wc.min.js" defer></script>

and include this CSS file in your HTML document.

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/MarketingPipeline/[email protected]/dist/ace-editor-wc.min.css">

Note: you can easily customize the look of this web component by hosting your own customized CSS file.

How to use the Ace Editor Web Component with Pre-Defined Code:

You can pre-define a code example inside the editor, simply by inserting the code inside of a ace-editor element like so -

<ace-editor language="python">print('hello world')</ace-editor>

Options

Supported Languages

ABAP, ABC, ActionScript, ADA, Apache_Conf, AsciiDoc, Assembly_x86, AutoHotKey, BatchFile, C9Search, C_Cpp, Cirru, Clojure, Cobol, coffee, ColdFusion, CSharp, CSS, Curly, D, Dart, Diff, Dockerfile, Dot, Dummy, DummySyntax, Eiffel, EJS, Elixir, Elm, Erlang, Forth, FTL, Gcode, Gherkin, Gitignore, Glsl, golang, Groovy, HAML, Handlebars, Haskell, haXe, HTML, HTML_Ruby, INI, Io, Jack, Jade, Java, JavaScript, JSON, JSONiq, JSP, JSX, Julia, LaTeX, LESS, Liquid, Lisp, LiveScript, LogiQL, LSL, Lua, LuaPage, Lucene, Makefile, Markdown, Mask, MATLAB, MEL, MUSHCode, MySQL, Nix, ObjectiveC, OCaml, Pascal, Perl, pgSQL, PHP, Powershell, Praat, Prolog, Properties, Protobuf, Python, R, RDoc, RHTML, Ruby, Rust, SASS, SCAD, Scala, Scheme, SCSS, SH, SJS, Smarty, snippets, Soy_Template, Space, SQL, Stylus, SVG, Tcl, Tex, Text, Textile, Toml, Twig, Typescript, Vala, VBScript, Velocity, Verilog, VHDL, XML, XQuery, YAML

Note: the web component will still work with an un-supported language mode for the Ace Editor - tho syntax highlighting, auto-indentation features & etc.. will not work.

Loading extensions

To load & use extensions / plugins for Ace Editor. You will need to define a variable / list called AceEditor_WC_Ace_Editor_EXTS. Each URL / file path in this list will be loaded to the page. Example below -

let AceEditor_WC_Ace_Editor_EXTS = ['https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/ext-language_tools.js']

Install locally

The web component loads all resources for Ace Editor via CDN. You can change this to load all the resource / file paths from a local path. To set files to be loaded from your local path define a variable AceEditor_WC_Ace_Editor_Path with the path to load the files from. Example below -

let AceEditor_WC_Ace_Editor_Path = "path/to/files/"

You can download / find the version of Ace Editor used in the web-component here

Contributing

Want to improve this? Create a pull request with detailed changes / improvements! If approved you will be added to the list of contributors of this awesome project!

See also the list of contributors who participate in this project.