Code editor action and component with highting for Svelte 3. demo
Install with npm or yarn:
npm install --save-dev svelte-code-editor
Based on codejar and prismjs. Any options of codejar
can be passed to action params or CodeEditor props.
<CodeEditor bind:code loc={true} autofocus={true} tab="\t" on:change={change} />
<script>
import CodeEditor from 'svelte-code-editor';
let code = `
{ foo: 1, bar: true, baz: 'quux' }
`;
</script>
OR import codedit
action to get more control.
<div
use:codedit={{ code, loc: true, autofocus: true, tab: '\t' }}
on:change={change}
/>
<script>
import { codedit } from 'svelte-code-editor';
let code = `
{ foo: 1, bar: true, baz: 'quux' }
`;
function change({ detail: code }) {
console.log('code changed', code);
}
</script>
Readme is still a work-in-progress.
MIT © PaulMaly