<script lang="ts">
import MarkdownLinkRenderer from './MarkdownLinkRenderer.svelte';
import Markdown from '@humanspeak/svelte-markdown';
function createMarkdownLinkRenderer(styles: string) {
return (anchor, props, ...rest) => {
const joinedProps = { ...props, className: styles };
return MarkdownLinkRenderer(anchor, joinedProps, ...rest);
};
}
const source = `[Link](https://svelte.dev/)`;
const renderers = {
link: createMarkdownLinkRenderer('text-blue-500 hover:underline')
};
</script>
<Markdown {source} options={{ gfm: true, breaks: true }} {renderers} />
<style>
:global {
.text-blue-500 {
--tw-text-opacity: 1;
color: rgba(59, 130, 246, var(--tw-text-opacity));
}
.hover\:underline {
&:hover { text-decoration: underline; }
}
}
</style>