@mhafemann/svelte-preprocessor-prism (WIP)

A Svelte preprocessor that generates highlighted code with Prism.js. Inspired by: Bjorn Lu - Bending Svelte using pre-processors.

• Installation
• Configuration
• Usage
• Dependencies
• Todo

Installation

Install with your preferred package manager.

pnpm i -D @mhafemann/svelte-preprocessor-prism

Configuration

Add the preprocessor to your svelte.config.js file.

// svelte.config.js
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';
import sveltePrism from '@mhafemann/svelte-preprocessor-prism';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://kit.svelte.dev/docs/integrations#preprocessors
    // for more information about preprocessors
    preprocess: [vitePreprocess({}), sveltePrism],
    files: {
        ['$lib']: 'src/lib',
    },
    kit: {
        // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
        // If your environment is not supported or you settled on a specific environment, switch out the adapter.
        // See https://kit.svelte.dev/docs/adapters for more information about adapters.
        adapter: adapter(),
    },
};

export default config;

Usage

Add the language-<language> class to your <pre> tag. The <code> tag is optional. Supports all Prism.js languages.

```svelte
<!-- +page.svelte -->
<script>
// ...
</script>

<pre class="language-css"><code>{`.test { padding: 0px; }`}</code></pre>

<pre class="language-treeview">
<code>
{`
let name = "mark";

function greet() {
    let greeting = "hello";
    console.log(greeting);
}

greet();
`}
</code>
</pre>

‼️ Escape any tags e.g. </script> -> <\/script> when the language is Svelte to prevent TypeScript errors.

Example output:

Dependencies

Todo

• Develop more robust error handling
• Add support for Prism plugins
• Add Svelte syntax highlighting
• Add support for variables in mustache syntax
• Add configuration options
• Add TypeScript support
• Add Tests
• Add ChangeLog