Svelte.js中‘Unexpected token’错误的排查与修复

你遇到的问题核心是混淆了React和Svelte的语法逻辑——Svelte不支持在JavaScript函数内编写JSX风格的标签返回，这也是报错指向<p>标签的原因。下面是具体修复方案：

1. 正确定义自定义组件 #

把你要自定义的p、code写成独立的Svelte组件，利用Svelte的插槽接收内容：

示例：CustomP.svelte #

<p class="custom-paragraph">
  <slot /> <!-- 接收Markdown解析后的子内容 -->
</p>

示例：CustomCode.svelte #

<pre>
  <code class="custom-code">
    <slot />
  </code>
</pre>

2. 在Markdown组件中引入并使用 #

在你的Markdown.svelte中，引入这些自定义组件，通过SvelteMarkdown的components属性传入：

<script>
import SvelteMarkdown from 'svelte-markdown';
import CustomP from './CustomP.svelte';
import CustomCode from './CustomCode.svelte';

// 你的Markdown内容
export let content = '';
</script>

<SvelteMarkdown components={{ p: CustomP, code: CustomCode }}>
  {content}
</SvelteMarkdown>

关键注意点 #

• 不要在JavaScript函数里尝试return <p>...</p>这种写法，Svelte的模板逻辑和React JSX完全不同，组件的结构要写在脚本块外的模板区域，或拆成独立组件。
• 如果需要简单的样式定制，也可以直接通过SvelteMarkdown的默认渲染类名加CSS处理，不一定非要自定义组件。

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