AS OF 07-JAN-2026 this repository has been moved to ssh://git@git.kasisoft.com/daniel.kasmeroglu/remark-example.git
This is a simple show case for the use of remark-imagetools, remark-svelte-auto-import and remark-autolinker
Example deployment: Demo
In order to run this example, use the following commands:
pnpm install pnpm devYou can see the examples in your browser:
NOTE: The port number might differ if it's already occupied.
Add the plugin imagetools to this configuration as it provides the image processing functionality itself:
export default defineConfig({ plugins: [ imagetools(), sveltekit() ] });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(), ], ... };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' } ] } ] ... ], });