svelte-simple-code-editor
Simple no-frills code editor with syntax highlighting.
This is the Svelte port of the amazing react-simple-code-editor by @satya164.
Features
🤏 Small - Less than 3KB min+gzip.🐇 Simple - Quite simple to use, and effectively zero config required!🧙 Elegant - Use a Svelte component rather than setting things up inonMount
hook.📤 Highly customizable - Offers tons of options that you can modify to get different behaviors.💻 SSR friendly - Works seamlessly in Sveltekit and other Server Side Rendering environments!
Installing
# pnpm
pnpm add svelte-simple-code-editor
# npm
npm install svelte-simple-code-editor
# yarn
yarn add svelte-simple-code-editor
Usage
<script>
import { SimpleCodeEditor } from 'svelte-simple-code-editor';
</script>
<SimpleCodeEditor value="let x = 1;\n console.log(x);" />
Props
There's tons of options available for this package. All of them are already documented within the code itself, so you'll never have to leave the code editor.
value
Code to be shown.
Note: This value is changed from inside of this component. By default, you won't be able to detect changes.
But if you use it as bind:value
, all changeswill flow back to the component where yur using SimpleCodeEditor
.
Type: string
Default: ""
Example:
<SimpleCodeEditor value="var num = 10;" />
<!-- Update local variable `value` as user types into the editor -->
<SimpleCodeEditor bind:value={value} />
highlight
Highlight function. takes a string and returns a string(the highlighted code).
Type: (value: string) => string
Default: () => ''
Example:
<script>
import Prism from 'prismjs';
</script>
<SimpleCodeEditor highlight={(code) => Prism.highlight(code, Prism.languages.javascript, 'javascript').value} />
insertSpaces
Insert spaces instead of tabs.
Type: boolean
Default: true
Example:
<SimpleCodeEditor insertSpaces={false} />
tabSize
Tab size. When you hit Tab key, how much indentation should be added.
Type: number
Default: 2
Example:
<SimpleCodeEditor tabSize={4} />
ignoreTabKey
When you hit tab, should it add indentation or focus out of the editor
Type: boolean
Default: false
Example:
<SimpleCodeEditor ignoreTabKey={true} />
preClass
Class to apply to pre tag used internally. This is necessary when using custom themes with PrismJS and you have to give your <pre>
tag a class like language-
.
Type: string
Default: ""
Example:
<SimpleCodeEditor preClass="language-javascript" />
textAreaProps
Attributes to pass to the internal <textarea>
tag.
Type: object
Default: {}
Example:
<SimpleCodeEditor textAreaProps={{ 'aria-label': 'svelte-simple-code-editor-textarea' }} />
Custom style props
You can specify the following style props:
--padding
: Padding of the editor. Default:4px
This is it for now. You can recommend more props to be added in the future here: Custom style props to be allowed
License
MIT License © Puru Vijay