↓

HTML

<div class="exmarkdown-code-filename">filename</div>
<div>
  <button class="exmarkdown-code-copy">❏</button>
  <pre>
    <code>
      <!-- ... -->
    </code>
  </pre>
</div>

Code Highlighting

This plugin uses svelte-highlight for code highlighting.

Usage

1. Enable the highlight option

<script>
  import { Markdown } from 'svelte-exmarkdown'
  import { codeUtility } from 'exmarkdown-code-utility'
</script>

<Markdown
  plugins={[
    codeUtility({
      highlight: true
    })
  ]}
/>

2. Import the stylesheet

[!TIP] See svelte-highlight/styling for details.

<script>
  import 'exmarkdown-code-utility/styles/github.css'
</script>

or

<script lang="ts">
  import github from 'exmarkdown-code-utility/styles/github'
</script>

<svelte:head>
  {@html github}
</svelte:head>

[!CAUTION] > @html is dangerous.
If you need to switch dynamic styles, use of svelte-highlight-switcher is recommended to prevent unexpected accidents.

Migration from v2

Now internal using to svelte-code-copy for code copy button.

• onCopy option has been merged into codeCopy.
• codeButton option has been merged into copy.
• Omit styling by exmarkdown-code-copy. Use instead codeCopy option.