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>

Output