Simple no-frills code editor with syntax highlighting.
This is the Svelte port of the amazing react-simple-code-editor by @satya164.
onMount
hook.# pnpm
pnpm add svelte-simple-code-editor
# npm
npm install svelte-simple-code-editor
# yarn
yarn add svelte-simple-code-editor
<script>
import { SimpleCodeEditor } from 'svelte-simple-code-editor';
</script>
<SimpleCodeEditor value="let x = 1;\n console.log(x);" />
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.
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 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} />
Insert spaces instead of tabs.
Type: boolean
Default: true
Example:
<SimpleCodeEditor insertSpaces={false} />
Tab size. When you hit Tab key, how much indentation should be added.
Type: number
Default: 2
Example:
<SimpleCodeEditor tabSize={4} />
When you hit tab, should it add indentation or focus out of the editor
Type: boolean
Default: false
Example:
<SimpleCodeEditor ignoreTabKey={true} />
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" />
Attributes to pass to the internal <textarea>
tag.
Type: object
Default: {}
Example:
<SimpleCodeEditor textAreaProps={{ 'aria-label': 'svelte-simple-code-editor-textarea' }} />
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
MIT License © Puru Vijay