svelte-code-editor

Code editor action and component with highting for Svelte 3. demo

Usage

Install with npm or yarn:

npm install --save-dev svelte-code-editor

Parameters

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>

TODO...

Readme is still a work-in-progress.

License

MIT © PaulMaly