Code blocks

Animating Code

You can use the <Code> component and auto-animate the code. The <Code> component accepts a lang prop which supports close to 200 languages out of the box.

  

					<script>
						let count = 0
						$: double = count * 2
					</script>
				
  

  

					<script>
						let count = 0
						$: double = count * 2
					</script>

					<button on:click={() => count += 1}>
						{double}
					</button>
				
  

<script>
  import { Presentation, Slide, Code } from '@components'
</script>

<Presentation>
  <Slide animate>
    <div class="mx-auto w-[800px]">
      <Code lang="svelte">
        {`
          <script>
            let count = 0
            $: double = count * 2
          </script>
        `}
      </Code>
    </div>
  </Slide>

  <Slide animate>
    <div class="mx-auto w-[800px]">
      <Code lang="html">
        {`
          <script>
            let count = 0
            $: double = count * 2
          </script>

          <button on:click={() => count += 1}>
            {double}
          </button>
        `}
      </Code>
    </div>
  </Slide>
</Presentation>

Indentation

If you use tabs to indent the code you don't have to think about whitespace.

<Code lang="ts">
  {`
    const bool = true
  `}
</Code>

If you use spaces for indentation the code has to be at the start of a new line.

<Code lang="ts">
  {`
const bool = true
  `}
</Code>

Line Highlights And Offsets

You can animate line highlights using the lines prop and offset the line start by passing the offset prop.

• lines="1-4" highlights lines 1 to 4
• lines="1,4" highlights lines 1 and 4
• lines="1-2|4" first highlights lines 1 to 2 then highlight line 4

  

					<script>
						let count = 0
						$: double = count * 2
					</script>
				
  

  

					<script>
						let count = 0
						$: double = count * 2
					</script>

					<button on:click={() => count += 1}>
						{double}
					</button>
				
  

<script>
  import { Presentation, Slide, Code } from '@components'
</script>

<Presentation>
  <Slide animate>
    <div class="mx-auto w-[400px]">
      <Code lang="svelte" lines="2|3">
        {`
          <script>
            let count = 0
            $: double = count * 2
          </script>
        `}
      </Code>
    </div>
  </Slide>

  <Slide animate>
    <div class="mx-auto w-[800px]">
      <Code lang="svelte" lines="6,8|3,7|1-8">
        {`
          <script>
            let count = 0
            $: double = count * 2
          </script>

          <button on:click={() => count += 1}>
            {double}
          </button>
        `}
      </Code>
    </div>
  </Slide>
</Presentation>

Code Block Height

Inside theme.css the max-height property is required for the animated code scrolling effect but you can remove it in case you want to set the height yourself.

.reveal pre code {
  max-height: 600px;
  /* ... */
}

Escaping Characters

Svelte parses the template the same way as HTML is parsed so elements like the <script> tag are interpreted by the compiler because it thinks you're trying to close the first <script> tag.

For that reason you have to escape the closing tag with a backslash \ which looks like <\/script> and the same is true for the <style> tag.

Support For Other Languages

By default higlight.js supports close to 200 languages but if your language is not supported you can add it.

If you want to support other languages like Svelte you can look at supported 3rd party languages and copy the code directly for the language you want.

If you want to add Svelte syntax highlighting for example, you can copy the contents of the svelte.js file to lib/languages/svelte.ts and register the language.

Update lib/languages/index.ts to register the language.

import { svelte } from './svelte'

export function registerLanguages(hljs) {
  hljs.registerLanguage('svelte', svelte)
}

If the language you want is not included you can look at the provided Svelte example and figure it out from there.