A simple but customizable code editor made with Svelte and tailwindcss. (Inspired from React Simple Code Editor)
npm install -D editor-for-svelte
npm install -D highlight.js
/** @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
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}/> |
!
before the class to make it important (eg. !text-red-500
)
<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>
<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>