Svelte CodeHighlight

by @antony

About

Provides an interactive code-highlighter for presentations!

Uses highlight.js under the hood.

Roadmap

• Theme configurability
• CSS Animations
• More languges (hljs)

Usage

<script>
  import CodeHighlight from '@beyonk/svelte-codehighlight

  const code = `
    import Foo from 'bar'

    function baz () {
      new Foo()
    }

    const qux = baz()

    console.log('quux', qux)
  `

  const locs = [
    { line: 1 },
    { line: 4 },
    { line: 7 },
    { line: 3, length: 3 },
    { line: 9 }
  ]
</script>

<CodeHighlight {code} {locs} />

Then use [ and ] keys to move between highlighted blocks of code.