Svelte中使用svelte-markdown添加链接target属性的方法求助

我们基于Svelte开发的组件使用svelte-markdown渲染Markdown文本，整体功能正常，但链接无法自动带上target="_blank"属性。按照官方文档创建并引入自定义链接组件后仍未生效，现提供可行解决方案：

当前问题代码 #

主组件代码：

<script lang="ts">
import SvelteMarkdown from 'svelte-markdown';
import LinkComponent from './MDRenderer.svelte';

export let response: string = "";
let responseEl: HTMLElement;
</script>

<div class="prose max-w-[80%] text-white text-ellipsis overflow-x-hidden mb-8" bind:this={responseEl}>
<SvelteMarkdown source={response} renderers={{link: LinkComponent}} />
</div>

自定义链接组件（MDRenderer.svelte）：

<script>
export let href = "";
export let title = undefined;
</script>

<a {href} {title} target="_blank"><slot /></a>

解决方案 #

1. 修正组件命名与导入

给自定义链接组件起更清晰的名称（比如CustomLink.svelte），避免命名混淆导致的导入错误。

2. 完善自定义组件的属性渲染

修正后的自定义链接组件（添加安全属性rel="noopener noreferrer"，这是外部链接的安全最佳实践）：

<script>
export let href = "";
export let title = undefined;
</script>

<a {href} {title} target="_blank" rel="noopener noreferrer">
  <slot />
</a>

3. 确认渲染器配置正确

主组件中确保renderers配置的键为link（对应Markdown的链接节点类型），并且组件导入路径无误：

<script lang="ts">
import SvelteMarkdown from 'svelte-markdown';
import CustomLink from './CustomLink.svelte'; // 路径需与实际文件匹配

export let response: string = "";
let responseEl: HTMLElement;
</script>

<div class="prose max-w-[80%] text-white text-ellipsis overflow-x-hidden mb-8" bind:this={responseEl}>
  <SvelteMarkdown source={response} renderers={{ link: CustomLink }} />
</div>

额外排查要点

• 检查自定义组件的文件路径是否与导入语句完全匹配，大小写敏感场景下需注意拼写
• 确认没有全局CSS或其他组件逻辑覆盖了链接的target属性
• 若仅需给外部链接添加target="_blank"，可在自定义组件中通过判断href实现：

<script>
export let href = "";
export let title = undefined;
const isExternal = href.startsWith('http');
</script>

<a {href} {title} {target: isExternal ? "_blank" : undefined} {rel: isExternal ? "noopener noreferrer" : undefined}>
  <slot />
</a>

内容的提问来源于stack exchange，提问作者tsutsu