maryUI

Code

This component is a wrapper around Ace Editor. It is intended to be used on simple use cases, so do not expect a full featured code editor.

Why not Monaco Editor? It’s heavier and requires a more complex setup.

Setup 

<head>
    ...
    {{-- Ace Editor --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.39.1/ace.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.39.1/ext-language_tools.min.js"></script>
</head>

Example

Ace Editor provides built-in support for common languages, including basic autocomplete and linting. It also includes a built-in search feature. Click inside the editor and hit Cmd/Ctrl + F

Editor
Javascript language.
<x-code wire:model="example1" label="Editor" hint="Javascript language." />

Settings 

<x-code
    wire:model="example2"
    language="properties"
    height="150px"
    line-height="3"
    print-margin="true" />

You can find the full list of supported languages and themes on the Ace Editor demo page . Just inspect the HTML of the dropdown menus to explore the available options.

Themes

This component supports automatic theme switching. Try toggling the theme at the top of this page to see it in action. 

<x-code
    wire:model="example3"
    dark-theme="cobalt"
    light-theme="dreamweaver"
    language="php"
/>
Made with by Robson Tenório and contributors.