Parsing Obsidian-style Wiki-links?

[vvvyyynet]

Hello, is there a way to render Obsidian-sytle Wiki-links (e.g. [[Link#Heading|Alias]]) in Carta? I assume it should be possible with remark-plugins like remark-wiki-link-plus or remark-wiki-link. Unfortunately, I did not succeed to integrating them into Carta. I'd be very grateful for some advice and guidance.

PS: If anybody knows a Svelte pendent to Quartz (a React-based tool to publish Obsidian-notes), I'd be very grateful to hear, since this the sort of tool I ultimately need... but in Svelte.

[BearToCode]

Hi, the following seems to work using remark-wiki-link:

import { Carta, type Plugin } from 'carta-md';
import wikiLinkPlugin from 'remark-wiki-link';

const wikiLink: Plugin = {
	transformers: [
		{
			execution: 'sync',
			type: 'remark',
			transform({ processor }) {
				processor.use(wikiLinkPlugin);
			}
		}
	]
};

const carta = new Carta({
	sanitizer: false,
	extensions: [wikiLink]
});

I also tried with remark-wiki-link-plus but there seem to be errors at runtime.

[vvvyyynet]

Thank you for the quick answer. It works now.

Since the default aliasDivider with remark-wiki-link is [[Name:Alias]] instead of [[Name|Alias]], I had to tweak your code by adding

  processor.use(wikiLinkPlugin, {
      aliasDivider: '|'
  });

How I found this: While playing with the code I found this hidden "documentation" in the plugin's index.test.ts 😅

Full code

<script lang="ts">
	import { Carta, type Plugin } from 'carta-md';
	import { MarkdownEditor } from 'carta-md';
	import wikiLinkPlugin from 'remark-wiki-link';
	import 'carta-md/default.css'; /* Default theme */

	const wikiLink: Plugin = {
            transformers: [
	        {
		    execution: 'sync',
		    type: 'remark',
		    transform({ processor }) {
			processor.use(wikiLinkPlugin, {
                            aliasDivider: '|'
			});
		    }
	        }
            ]
	};

	const carta = new Carta({
		sanitizer: false,
		extensions: [wikiLink]
	});

	let value = 'Testing the [[Link|Alias]]';
</script>

<MarkdownEditor {carta} bind:value />

<style>
	/* Set your monospace font (Required to have the editor working correctly!) */
	:global(.carta-font-code) {
		font-family: '...', monospace;
		font-size: 1.1rem;
	}
</style>