6

GitHub - MarketingPipeline/Ace-Editor-Web-Component: A web-component to add code...

 2 years ago
source link: https://github.com/MarketingPipeline/Ace-Editor-Web-Component/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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/[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 - 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

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

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

</article


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK