Feature-rich Code Editor With Autocomplete – Petrel.js

Category: Javascript | January 22, 2022
Views Total:1,643 views
Official Page:Go to website
Last Update:January 22, 2022


Feature-rich Code Editor With Autocomplete – Petrel.js


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 i petrel
import { CodeEditor } from 'petrel'
<!-- OR -->
<script type="module">
  import { CodeEditor } from '../index.js';
<!-- 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'
import { HTMLAutoComplete } from './autocompletions.js'
// Java
import { JavaAutoComplete } from './autocompletions.js'
// JavaScript
import { JavaScriptAutoComplete } from './autocompletions.js'
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'
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())

You Might Be Interested In:

Leave a Reply