petrel
v1.1.2
Published
Petrel is a library to create wonderful and customizable code editors
Downloads
139
Readme
Petrel Code Editor
Installation
NPM
npm install petrel
import { CodeEditor } from 'petrel'Module
import { CodeEditor } from 'https://js.intera.dev/petrel/1.0.7/index.js'JS
<script src='https://js.intera.dev/petrel/1.0.7.js'></script>Styles
NPM & Webpack
require('petrel/css/dark.css')Web
<link rel="stylesheet" href="https://js.intera.dev/petrel/1.0.7/css/dark.css">Example
<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>Options
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
})
Custom styling
If you want to style Petrel yourself you might look into css/dark.css as an example.