Editor-for-svelte NPM

SvelteEditor

A simple but customizable code editor made with Svelte and tailwindcss. (Inspired from React Simple Code Editor)

Features

Syntax highlighting for various languages using highlight.js
Line numbers
Customizable styles

Installation

npm install -D editor-for-svelte

Make sure you have highlight.js installed for theming

 npm install -D highlight.js

Usage

Edit your tailwind.config.js file to add support for the editor

/** @type {import('tailwindcss').Config} */
export default {
    content: ["./node_modules/editor-for-svelte/src/**/*.svelte"],
    theme: {
        extend: {},
    },
    plugins: [],
}

<script>
  import Editor from 'editor-for-svelte';
  import 'highlight.js/styles/github.css'; // Change theme here
</script>

<Editor/>

See examples for more

Props

Prop	Type	Default	Description	Usage
value	string	" "	The code in the editor	`<Editor bind:value={code}/>`
language	string	"javascript"	The language of the code (view highlight.js docs for all languages supported)	`<Editor language="html"/>`
lines	boolean	false	Show line numbers	`<Editor lines/>`
caretColor	string	"black"	The color of the caret (must be color not class)	`<Editor caretColor="#FFFFFF"/>`
dots	boolean	false	Show macOS dots to make it look like a terminal	`<Editor dots/>`
maxHeight	string	"100vh"	The maximum height of the editor including external padding (recommended to be at least 150px)	`<Editor maxHeight="1000px"/>`
class	string	" "	Additional classes to be added to the editor	`<Editor class="bg-red-500"/>`
lineNumberClass	string	" "	Additional classes to be added to the line number container	`<Editor lineNumberClass="text-gray-400"/>`
defaultText	string	"Start typing or paste some code to see syntax highlighting!"	The default text to be shown when the editor is empty	`<Editor defaultText="Start typing here"/>`
lineSelector	boolean	false	Show toggle for line numbers	`<Editor lineSelector/>`
langSelector	boolean	false	Show toggle for language	`<Editor langSelector/>`
minHeight	string	"80px"	The minimum height of the editor (including external padding)	`<Editor minHeight="100px"/>`
langSelectorClass	string	" "	Additional classes to be added to the language selector container	`<Editor langSelectorClass="text-red-500"/>`
lineSelectorClass	string	" "	Additional classes to be added to the line selector container	`<Editor lineSelectorClass="text-red-500"/>`
id	string	" "	The id of the editor	`<Editor id="editor"/>`
hljs	object	Default hljs object from highlight.js	Custom highlight.js object for more customization	`<Editor hljs={customHljs}/>`

Tips

To change the theme, import the css file from highlight.js and change the theme in the import statement in the script tag
If a class doesn't apply when adding it as a prop, try placing a ! before the class to make it important (eg. !text-red-500)
Dont set the height in the class prop, instead use the minHeight and maxHeight props for best results
If you want multiple editors with different themes, place them in seperate components so that you can import different themes for each editor.
If you want to use a language that is not included in the default highlight.js package, you can create a custom highlight.js object and pass it as a prop to the editor.

Examples

<script lang="ts">
  import 'highlight.js/styles/github.css';
  import Editor from 'editor-for-svelte';

</script>

<main>
  <div class="w-screen h-screen">
    <Editor class="!rounded-none w-1/2"/>
  </div>
</main>

Output

<script lang="ts">
  import 'highlight.js/styles/github-dark.css';
  import Editor from 'editor-for-svelte';

  let code = `def hello_world():\n\tprint('Hello, World!')`;
</script>

<main>
  <div class="w-screen h-screen">
    <Editor class="bg-gray-900 text-white w-1/2 !rounded-none" bind:value={code} caretColor="#FFFFFF" lines language="python" lineNumberClass="bg-gray-800 rounded-md !border-0"/>
  </div>
</main>