Skip to content

MarketingPipeline/Ace-Editor-Web-Component

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

Ace-Editor-Web-Component

image

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/Ace-Editor-Web-Component@1.0.0/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/Ace-Editor-Web-Component@v1.0.0/dist/ace-editor-wc.min.css">

Note: you can easily customize the look of this web component by hosting your own customized CSS file - feel free to add your custom stylesheet to the theme list here!


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

Attribute Meaning Default Required
language The language mode to use for Ace Editor Undefined Yes
editor-title The editor title to use Language No
editor-theme The Ace Editor theme to use Monokai No

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.

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

Themes

You can view a list of themes / CSS stylesheet(s) that work with this web component here.

Contributing GitHub

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.

License GitHub

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