Author: | interaapps |
---|---|
Views Total: | 1,422 views |
Official Page: | Go to website |
Last Update: | January 22, 2022 |
License: | MIT |
Preview:

Description:
If you’re into creating your own web applications or custom user interfaces, chances are you’ll come across a situation where you’ll need a code editor.
Code editors usually come with some sort of rich text editor and auto-complete functionality. As front-end developers, we believe that good tools become an integral part of the work process and help save countless hours over time .
That is why we listed here an easy-to-use library called Petrel which allows developers to create feature-rich code editors in a couple of minutes. It’s written entirely in plain JavaScript and supports all modern browsers.
Supported Languages:
- Bash
- Dockerfile
- HTML
- Java
- JavaScript
- JSON
- Markdown
- PHP
- SQL
- XML
- YAML
How to use it:
1. Install and import the Petrel.js.
# NPM $ npm i petrel
import { CodeEditor } from 'petrel'
<!-- OR --> <script type="module"> import { CodeEditor } from '../index.js'; </script>
<!-- Stylesheet --> <link rel="stylesheet" href="./css/dark.css">
2. Import Auto-Completion data if needed.
// Bash import { BashAutoComplete } from './autocompletions.js' // Dockerfile import { DockerfileAutoComplete } from './autocompletions.js' // HTML import { HTMLAutoComplete } from './autocompletions.js' // Java import { JavaAutoComplete } from './autocompletions.js' // JavaScript import { JavaScriptAutoComplete } from './autocompletions.js' // JSON import { JSONAutoComplete } from './autocompletions.js' // Markdown import { MarkdownAutoComplete } from './autocompletions.js' // PHP import { PHPAutoComplete } from './autocompletions.js' // SQL import { SQLAutoComplete } from './autocompletions.js' // XML import { XMLAutoComplete } from './autocompletions.js' // YAML import { YAMLAutoComplete } from './autocompletions.js'
3. Import a syntax highlighting library (Highlight.js in this example).
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/default.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js"></script>
4. Create a container to hold the code editor.
<div id="code-editor"></div>
5. Initialize the Petrel.js library and create a JavaScript code editor.
const codeEditor = new CodeEditor(document.getElementById("code-editor")) .setHighlighter(code => hljs.highlight(code,{language: 'javascript'}).value) .setValue(``) // default code .setAutoCompleteHandler(new JavaScriptAutoComplete()) .create()