Jekyll Spaceship 表格插件完全指南合并单元格、多行内容与自定义样式技巧【免费下载链接】jekyll-spaceship A Jekyll plugin to provide powerful supports for table, mathjax, plantuml, mermaid, emoji, video, audio, youtube, vimeo, dailymotion, soundcloud, spotify, etc.项目地址: https://gitcode.com/gh_mirrors/je/jekyll-spaceshipJekyll Spaceship是一款功能强大的 Jekyll 表格插件它让 Markdown 表格支持跨列合并单元格||、跨行合并单元格^^、单元格多行内容行尾\、独立对齐和单元格内嵌 Markdown 语法。本指南带你从基础安装到高级自定义技巧一步步玩透 Jekyll 表格扩展语法。为什么需要这个 Jekyll 表格插件原生 Markdown 表格有几个硬伤❌ 无法合并单元格rowspan / colspan❌ 一个单元格里只能写单行文本❌ 无法对单个单元格独立设置对齐方式❌ 表格头部表头无法省略❌ 单元格里不能写图片、公式等富内容Jekyll Spaceship 的 table-processor.rb 处理器一次性补齐了这些能力而且默认开启装完即可使用几乎零配置。快速安装 Jekyll Spaceship 表格插件2 步完成第 1 步在项目Gemfile中添加插件gem jekyll-spaceship, group: :jekyll_plugins第 2 步在站点配置_config.yml的plugins:段注册plugins: - jekyll-spaceship运行bundle install安装依赖即可。提示table-processor已包含在默认处理器列表中见 Gemfile 与 README.md 中的默认配置无需额外配置开关。⚠️ GitHub Pages 以safe模式运行不允许任意插件建议本地构建或借助 CI 部署。跨列合并单元格Jekyll 表格 colspan 语法在单元格末尾追加竖线|加几条就向右合并几列末尾 1 个|→ 跨 2 列末尾 2 个|→ 跨 3 列| 阶段 | 直接产物 | ATP 产出 | | ------------ | ---------- | --------- | | 糖酵解 | 2 ATP | | | ^^ | 2 NADH | 3--5 ATP | | 丙酮酸氧化 | 2 NADH | 5 ATP |构建后2 ATP所在单元格会自动获得colspan2属性与下一列合并。实现逻辑位于 table-processor.rb 的handle_colspan方法中。跨行合并单元格Jekyll 表格 rowspan 语法在单元格开头写^^表示与上方单元格纵向合并| 阶段 | 产物 | 说明 | | -------- | ------ | ----------- | | 糖酵解 | 2 ATP | 第一阶段 | | ^^ | 2 NADH | 第二阶段 |上例中第二个^^单元格会与糖酵解合并对应 HTML 中自动设置rowspan2handle_rowspan方法负责。^^还能与||组合使用实现既跨行又跨列的大单元格。多行单元格用行尾反斜杠换行在单元格末尾加一个反斜杠\表示与下一行同列的内容合并为一个单元格内部以br换行| 水果 | 颜色 | | ------- | ---------- | | 苹果 \ | 红色 \ | | 香蕉 | 黄色 |第一列单元格最终内容为苹果香蕉。该功能由handle_multi_rows方法处理适合在表头写多行描述。可选的表头与单元格独立对齐无表头表格第一行只写分隔线即可生成无thead的表格非常适合做棋盘式布局|----|----|----| | ♜ | | ♝ | | | ♟ | ♟ |单元格独立对齐借鉴 Markdown 列对齐的冒号语法但作用范围缩小到单个单元格写法对齐方式:文本左对齐文本:右对齐:文本:居中例如:左对齐渲染为左对齐居中: :渲染为居中对齐输出为styletext-align: ...内联样式handle_text_align方法实现。单元格内写 Markdown图片、公式、链接自由组合Jekyll Spaceship 允许在单元格内部使用完整 Markdown 语法handle_format方法实现。常见玩法单元格内嵌图片| 示例图 |单元格内嵌 MathJax 公式| $I \int \rho R^2 dV$ |单元格内有序列表| 1. 第一项 2. 第二项 |引用式图片链接[图片名]: 链接也已被on_handle_markdown阶段预处理可放心在表格中使用。高级自定义单元格内联属性IAL给单元格上色这是 Jekyll 表格插件最强大的技巧在单元格内追加{: ... }内联属性直接注入任意 HTML 属性例如背景色、字体粗细灵感来自 Maruku 语法。先定义可复用的属性引用{:color-style: stylebackground: black;} {:color-style: stylecolor: white;}在单元格中引用| 标题 {: stylebackground: #222; color: white } | | 重点项 {: .hl stylefont-weight: 800; text-decoration: underline } | | 深色格 {: color-style } |其中#id设置元素 ID、.cls追加 CSS 类名、属性值直接写任意属性多个{:ref:}同名定义会合并生效。Jekyll 表格扩展语法速查表语法位置效果末尾|可重复单元格尾部跨列合并加几条跨几列^^单元格开头与上方单元格跨行合并行尾\单元格尾部与下一行同列内容合并换行首行仅|---|表格第一行生成无表头表格:文本/文本:/:文本:单元格内左 / 右 / 居中对齐{: .cls #id 属性值 }单元格内注入 HTML 属性做自定义样式常见问题与避坑指南GitHub 预览不显示对齐/背景色GitHub 会过滤style属性本地jekyll serve构建时样式是正常生效的。竖线|或冒号:出现在文本里怎么办用反斜杠转义\|和\:。单元格里出现*、_、$等符号被误解析处理器会自动转义数学公式区域$...$会被保护放心使用。想看源码表格相关处理集中在 table-processor.rb插件入口在 jekyll-spaceship.rb默认配置说明见 README.md。 掌握以上技巧你的 Jekyll 表格就能从基础数据展示升级到合并单元格 多行内容 自定义样式的全功能形态写出媲美 HTML 表格的精美效果。【免费下载链接】jekyll-spaceship A Jekyll plugin to provide powerful supports for table, mathjax, plantuml, mermaid, emoji, video, audio, youtube, vimeo, dailymotion, soundcloud, spotify, etc.项目地址: https://gitcode.com/gh_mirrors/je/jekyll-spaceship创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考