exmarkdown-code-utility v3.1.35
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>
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
- Enable the
highlight
option
<script>
import { Markdown } from 'svelte-exmarkdown'
import { codeUtility } from 'exmarkdown-code-utility'
</script>
<Markdown
plugins={[
codeUtility({
highlight: true
})
]}
/>
- 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 intocodeCopy
.codeButton
option has been merged intocopy
.- Omit styling by
exmarkdown-code-copy
. Use insteadcodeCopy
option.
License
10 days ago
20 days ago
20 days ago
29 days ago
1 month ago
1 month ago
1 month ago
1 month ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
7 months ago
6 months ago
6 months ago
6 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago