remark-example's Introduction

Readme

This is a simple show case for the use of remark-imagetools, remark-svelte-auto-import and remark-autolinker

Demo

Example deployment: Demo

Usage

In order to run this example, use the following commands:

pnpm install
pnpm dev

You can see the examples in your browser:

http://localhost:5173

NOTE: The port number might differ if it's already occupied.

Configuration

vite.config.ts

Add the plugin imagetools to this configuration as it provides the image processing functionality itself:

export default defineConfig({
    plugins: [
        imagetools(),
        sveltekit()
    ]
});

svelte.config.js

Add support for mdsvex to svelte:

import mdsvexConfig from './mdsvex.config.js'

const config = {

    ...

    // Consult https://kit.svelte.dev/docs/integrations#preprocessors
    // for more information about preprocessors
    preprocess: [
        mdsvex(mdsvexConfig),
        vitePreprocess(),
    ],

    ...

};

mdsvex.config.js

Configure the remark plugins:

const config = defineConfig({

    ...

    remarkPlugins: [
        ...
        [
            remarkImagetools,
            {
                debug: Debug.None,
                presets: [
                    {
                        name: "mobile",
                        width: 300
                    }
                ]
            }
        ],
        [
            remarkSvelteAutoImport,
            {
                debug: ['ScriptBefore', 'ScriptAfter'],
                scriptTS: true,
                directories: [
                    'src/lib/components/'
                ],
                localComponents: {
                    'src/lib/': '$lib'
                },
                patterns: [
                    '**/*.svelte',
                    '**/*.svx'
                ]
            }
        ],
        [
            remarkAutolinker,
            {
                debug: 'Default',
                all: true,
                caseInsensitive: true,
                links: [
                    { key: 'Java', link: 'https://www.java.com/de/' },
                    { key: 'Spring', link: 'https://spring.io/' },
                    { key: 'Spring boot', link: 'https://spring.io/projects/spring-boot' }
                ]
            }
        ]
        ...
    ],

});

Recommend Projects