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>

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.

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']

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

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.

This project is licensed under the MIT License - see the LICENSE.md file for details.