@beyonk/svelte-codehighlight

<p align="center"> <img width="186" height="90" src="https://user-images.githubusercontent.com/218949/44782765-377e7c80-ab80-11e8-9dd8-fce0e37c235b.png" alt="Beyonk" /> </p>

Usage no npm install needed!

<script type="module">
  import beyonkSvelteCodehighlight from 'https://cdn.skypack.dev/@beyonk/svelte-codehighlight';
</script>

README

Beyonk

Svelte CodeHighlight

by @antony

js-standard-style svelte-v3

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.