0.0.3 ā¢ Published 2 years ago
svelte-prism-autoloader v0.0.3
svelte-prism-autoloader
A prismjs autoloader plugin for svelte
Install
npm i svelte-prism-autoloader prismjs
# optional: install themes
npm i prism-themes
Props
Name | Default |
---|---|
languagesPath | https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/ |
useMinified | true |
autoHighlightAll | false |
Usage
<!-- Use languagesPath to specify the loaded CDN -->
<AutoLoader
languagesPath="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/"
useMinified
autoHighlightAll
/>
Example
- Use
Prism.highlightAll()
<script lang="ts">
import { onMount } from 'svelte';
import Prism from 'prismjs';
import 'prism-themes/themes/prism-dracula.min.css';
import { AutoLoader } from 'svelte-prism-autoloader';
let code = `<pre><code class="language-python">print("hello, world")</code></pre>`;
onMount(() => {
Prism.highlightAll();
});
</script>
{@html code}
<AutoLoader languagesPath="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/" />
- or use Autoloader's prop
autoHighlightAll
<script lang="ts">
import type { PageData } from './$types';
// @ts-ignore
import 'prismjs/components/prism-core';
import 'prism-themes/themes/prism-dracula.min.css';
import { AutoLoader } from 'svelte-prism-autoloader';
// load page data.
export let data: PageData;
export let { metadata, content } = data;
let code = `<pre><code class="language-python">print("hello, world")</code></pre>`;
</script>
<article>
<div class="goback">
<a href="/">ā Home</a>
</div>
<h1 class="letter-title-font">
{metadata.title}
</h1>
{@html code}
<div class="content">
{@html content}
</div>
</article>
<AutoLoader
languagesPath="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/"
useMinified
autoHighlightAll
/>
Reference
Changelog
v0.0.3 - Fix: avoid double registration of Complete hook