@mhafemann/svelte-preprocessor-prism

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

• Dependencies
• Installation
• Configuration
• Usage
• Todo

Dependencies

|Dependency|Version| |---|---| | magic-string| ^0.30.1 | | prismjs| ^1.29.0 | | svelte| ^4.0.5 |

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.

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


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

<pre class="language-treeview">
<code>
{`
├── static/
│   ├── android-chrome-192x192.png
│   ├── android-chrome-512x512.png
│   ├── app-window-duotone.svg
│   ├── apple-touch-icon.png
│   ├── brand-ico.png
│   ├── favicon-16x16.png
│   ├── favicon-32x32.png
│   ├── favicon.ico
│   ├── favicon.png
│   ├── icons/
│   │   ├── blog-0.0.7.svg
│   │   ├── blog.afdesign
│   │   └── brand.svg
│   ├── site.webmanifest
│   └── svelte.config.js
├── svelte.config.js
├── tailwind.config.cjs
├── tsconfig.json
└── vite.config.ts`}
</code>
</pre>

Todo

• [x] Add support for Prism plugins
• [ ] Add configuration options
• [x] Add TypeScript support
• [ ] Add Tests