Svelte嵌入Reveal.js时Markdown幻灯片不显示问题求助

核心原因 #

Reveal.js的Markdown插件依赖marked库解析Markdown内容，但该库不会随Reveal.js自动安装，这是导致内容不渲染的最常见原因。

解决步骤 #

1. 安装marked依赖
   在项目根目录执行安装命令：

   npm install marked
   # 或使用pnpm/yarn
   pnpm add marked
   yarn add marked
   

2. 配置Markdown插件与marked关联
   修改组件的script代码，导入marked并传入Markdown插件初始化配置：

   <script>
     import { onMount } from 'svelte'
     import Reveal from 'reveal.js';
     import Markdown from 'reveal.js/plugin/markdown/markdown.esm.js';
     import marked from 'marked'; // 新增导入marked
     let deck = null
   
     onMount(()=>{
       deck = new Reveal({
         plugins: [ 
           // 给Markdown插件传入marked实例
           Markdown.initialize({ marked })
         ],
       });
       deck.initialize({ embedded: true });
     })
   </script>
   

3. 优化Markdown内容格式（可选）
   Markdown对缩进敏感，避免textarea内的内容有多余前置空格，调整为：

   <textarea data-template>
   

Slide 1 #

A paragraph with some text and a link. #

Slide 2 #

Slide 3 #

4. 验证样式完整性（可选）
   确保已正确导入Reveal.js的基础样式和主题，避免因文字与背景色一致导致内容不可见：

   <script>
     // 新增样式导入
     import 'reveal.js/dist/reveal.css';
     import 'reveal.js/dist/theme/white.css'; // 可替换为其他主题
     // ... 其他代码
   </script>
   

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