npm install petrel
import { CodeEditor } from 'petrel'import { CodeEditor } from 'https://js.intera.dev/petrel/1.0.7/index.js'<script src='https://js.intera.dev/petrel/1.0.7.js'></script>require('petrel/css/dark.css')<link rel="stylesheet" href="https://js.intera.dev/petrel/1.0.7/css/dark.css"><head>
<link rel="stylesheet" href="https://js.intera.dev/petrel/1.0.7/css/dark.css">
<!-- For the following example I'm using highlightjs so I import the styles for it as well. Theme: Pastefy -->
<link rel="stylesheet" href="https://js.intera.dev/petrel/1.0.7/css/highlight/pastefy.css">
</head>
<div id="editor"></div>
<script type="module">
import { CodeEditor } from 'https://js.intera.dev/petrel/1.0.7/index.js'
import JavaScriptAutoComplete from 'https://js.intera.dev/petrel/1.0.7/src/languages/JavaScriptAutoComplete.js'
import {JavaScriptAutoComplete} from 'https://js.intera.dev/petrel/1.0.7/autocompletions.js'
const codeEditor = new CodeEditor(element)
// Using highlightjs for this example
codeEditor.setHighlighter(code => hljs.highlight("javascript", code).value)
// Sets the content of the editor
codeEditor.setValue(`console.log("Welcome to Petrel!")`)
// Using JS autocompletion
codeEditor.setAutoCompleteHandler(new JavaScriptAutoComplete())
// Creates the editor
codeEditor.create()
</script>new CodeEditor(..., {
closeKeys: {
'<', '>' // If < is being typed into the editor, the editor will autocomplete it with >
},
placeholder: 'Enter code in here',
value: "Hello World",
readonly: false,
tabShortcutsEnabled: true,
tabSize: 4
})If you want to style Petrel yourself you might look into css/dark.css as an example.