exmarkdown-code-utility

exmarkdown-code-utility

❏ Code utility plugin for svelte-exmarkdown

Demo

This plugin adds the following utility to code section in svelte-exmarkdown

• Code Copy Button
• Show Filename
• Code Highlighting by svelte-highlight

Installation

npm i exmarkdown-code-utility

Example

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

<Markdown
  plugins={[
    // ...
    codeUtility({
      // Plugin Options
    })
  ]}
/>

<style>
  .exmarkdown-code-filename {
    /* Style of Filename section (<div/>) */
  }
</style>

Full Plugin Options

This will result in the following conversions

Markdown

```html:filename
<!-- ... -->
```

↓

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
    })
  ]}
/>

1. 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.

License

MIT