mcpField
D
deckset

deckset

github.com/wendylabsinc文档处理6277 次安装5 周前更新
代码仓库

关于 deckset

deckset 是用于 Deckset 的 Markdown 演示文稿编写技能,适合制作幻灯片内容。它涵盖文本、代码、公式及媒体等语法与布局设置。

主要功能

  1. 01设置标题与列表格式
  2. 02添加文本样式、引用和链接
  3. 03插入代码块并高亮代码行
  4. 04制作表格与 TeX 公式
  5. 05设置页脚、页码和分栏
  6. 06放置图片、视频和音频

适用场景

  1. 01用 Markdown 编写幻灯片
  2. 02为演示文稿排版代码示例
  3. 03在幻灯片中添加媒体与公式

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/wendylabsinc/claude-skills --skill deckset

安装后在 Claude Code 中输入/deckset确认已加载。

详细介绍

标题

# Large Heading

![大标题]({{ page.rel_root }}/img/slide-04.md.png)

## Regular Heading

![常规标题]({{ page.rel_root }}/img/slide-05.md.png)

### Small Heading

![小标题]({{ page.rel_root }}/img/slide-06.md.png)

#### Tiny Heading

![微型标题]({{ page.rel_root }}/img/slide-07.md.png)

## Combine Headings

### Of Different Sizes

![组合标题]({{ page.rel_root }}/img/slide-08.md.png)

# [fit] Make Headings Fit Onto

# [fit] The Slide

![调整标题大小]({{ page.rel_root }}/img/slide-09.md.png)

列表

# Unordered Lists

- Start each bullet point
- with a dash to create
- an unordered list

![无序列表]({{ page.rel_root }}/img/slide-10.md.png)

# Ordered Lists

1. Start each item with
1. a number followed by a dot
1. to create an ordered list

![有序列表]({{ page.rel_root }}/img/slide-11.md.png)

# Use Source List Numbering

[.use-source-list-numbering]

1. Start at one
3. Skip a number
5. Keep going

此命令适用于幻灯片中的下一个有序列表。

# Nested Lists

- You can create nested lists
    1. by indenting
    1. each item with
    1. 4 spaces
- It's that simple

![嵌套列表]({{ page.rel_root }}/img/slide-12.md.png)

文本样式

# Asterisk Emphasis

Use single asterisks around text to *emphasize it*.

Or use double asterisks for a **strong emphasis** style.

![星号强调]({{ page.rel_root }}/img/slide-13.md.png)

# Underscore Emphasis

Alternatively, you can also use underscores to emphasize:

Wrap text in single underscores to _emphasize it_. Or use double underscores for the alternative __strong emphasis style__.

![下划线强调]({{ page.rel_root }}/img/slide-14.md.png)

# Combined Emphasis

Combining underscores with asterisks lets us mix and match the emphasis styles. Play with it — some themes have additional style options for those combinations:

- _**Style 1**_
- __*Style 2*__
- __**Style 3**__

![组合强调]({{ page.rel_root }}/img/slide-15.md.png)

# The same *styles* work in **headings**, too.

![标题样式]({{ page.rel_root }}/img/slide-16.md.png)

# More Styles

- ~~Strikethrough~~
- Superscript
- Subscript
- `Inline code`

![更多样式]({{ page.rel_root }}/img/slide-17.md.png)

引用

> The best way to predict the future is to invent it
-- Alan Kay

![块引用]({{ page.rel_root }}/img/slide-18.md.png)

# Inline Quotes

You can also use a quote together with paragraph text or other elements on the slide:

> The best way to predict the future is to invent it
-- Alan Kay

Prefix the author of the quote with `--`, or leave it out if it's anonymous.

![行内引用]({{ page.rel_root }}/img/slide-19.md.png)

链接

# Link to External Resources

In case you're looking for something, you could use [Google](http://google.com) or [Wikipedia](http://wikipedia.com).

Links will be clickable in exported PDFs as well!

![链接到外部资源]({{ page.rel_root }}/img/slide-44.md.png)

# Links Between Slides

Define an anchor on the slide you want to link to using standard HTML syntax:

``

Then you can link to this [slide](#link-target) easily.

![幻灯片之间的链接]({{ page.rel_root }}/img/slide-45.md.png)

代码块

语法高亮

使用 GitHub 风格的围栏代码块指定语言。

$.ajax({
  url: "/api/getWeather",
  data: {
    zipcode: 97201
  },
  success: function( data ) {
    $( "#weather-temp" ).html( "" + data + " degrees" );
  }
});

![语法高亮]({{ page.rel_root }}/img/slide-38.md.png)

高亮代码行

若要突出显示代码块中的特定行,请使用以下命令:

[.code-highlight: 2]

$.ajax({
  url: "/api/getWeather",
  data: {
    zipcode: 97201
  },
  success: function( data ) {
    $( "#weather-temp" ).html( "" + data + " degrees" );
  }
});

![高亮代码行]({{ page.rel_root }}/img/highlight-single-loc.png)

你也可以高亮显示一段行:

[.code-highlight: 2, 6-8]

$.ajax({
  url: "/api/getWeather",
  data: {
    zipcode: 97201
  },
  success: function( data ) {
    $( "#weather-temp" ).html( "" + data + " degrees" );
  }
});

![高亮行范围]({{ page.rel_root }}/img/highlight-range-loc.png)

逐步显示高亮代码行

演示时,你可以逐步显示多个高亮内容。将多个 [.code-highlight] 命令按希望演示时高亮代码行的顺序放在代码块上方。

[.code-highlight: none] [.code-highlight: 2] [.code-highlight: 6-8] [.code-highlight: all]

$.ajax({
  url: "/api/getWeather",
  data: {
    zipcode: 97201
  },
  success: function( data ) {
    $( "#weather-temp" ).html( "" + data + " degrees" );
  }
});

自动缩放

如果代码稍微太长,也不必担心。Deckset 会自动缩放代码块以适应版面。

def establish_connection(spec = nil)
  spec     ||= DEFAULT_ENV.call.to_sym
  resolver =   ConnectionAdapters::ConnectionSpecification::Resolver.new configurations
  spec     =   resolver.spec(spec)

  unless respond_to?(spec.adapter_method)
    raise AdapterNotFound, "database configuration specifies nonexistent #{spec.config[:adapter]} adapter"
  end

  remove_connection
  connection_handler.establish_connection self, spec
end

![自动缩放]({{ page.rel_root }}/img/slide-39.md.png)

行内 code

将代码用反引号括起来,即可在普通文本中使用代码,例如:

func map(x: A?, f: A -> B) -> B?

![行内代码]({{ page.rel_root }}/img/slide-40.md.png)

代码背景

使用当前主题的 Deckset 自定义面板设置自定义代码背景:

![行内代码]({{ page.rel_root }}/img/code-background.png)

目前还不能通过 Markdown 命令设置此项。如果将其设置为可脚本化功能有助于你的工作流,请告诉我们。

表格

单元格之间用竖线 | 分隔。

表头与表格正文之间用由三个短横线组成的行 --- 分隔。

| Header 1 | Header 2 | Header 3 |
| --- | --- | --- |
| Cell 1 | Cell 2 | Cell 3 |
| Cell 4 | Cell 5 | Cell 6 |

![表格]({{ page.rel_root }}/img/tables.png)

文本对齐

使用 :---: 和 ---: 可以将单元格内容居中或右对齐。

|   Header 1  |    Header 2   |   Header 3   |
| ----------- | :-----------: | -----------: |
| Cell        |    _Cell_     |    *Cell*    |
| Cell        |   **Cell**    |   __Cell__   |

![表格]({{ page.rel_root }}/img/tables-text-alignment.png)

公式

只需将 TeX 命令用 $$ 定界符括起来,即可轻松插入数学公式。Deckset 使用 MathJax 将 TeX 命令转换为精美的矢量图形。

$$
\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)
$$

![公式]({{ page.rel_root }}/img/formula-basics.png)

行内公式

你也可以在段落文本中插入公式。Deckset 会调整字号和颜色,使其与周围文本一致,例如:

The slope $$a$$ of the line defined by the function $$f(x) = 2x$$ is $$a = 2$$.

![行内公式]({{ page.rel_root }}/img/formula-inline.png)

公式自动缩放

如果公式变得非常复杂,也不用担心。Deckset 会缩小公式,使其适应幻灯片。

$$
1 +  \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots =
\prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})},
\quad\quad \text{for $|q|<1$}.
$$

![公式自动缩放]({{ page.rel_root }}/img/formula-autofit.png)

表情符号

Deckset 支持 Slack 风格的表情符号,例如::sunny: :umbrella: :sunflower: :cat: :smile:

Deckset supports emojis! :umbrella: :sunflower: :cat: :smile: :thumbsup:

![表情符号]({{ page.rel_root }}/img/emojis.png)

请参阅此 表情符号参考 Markdown 文件,了解 Deckset 支持哪些表情符号。有一些常用表情符号尚未纳入 Unicode,因此我们无法支持。

页脚和幻灯片编号

要为演示文稿中的每张幻灯片添加固定页脚,请在文件顶部插入以下命令:

footer: Your footer goes here

要为演示文稿中的每张幻灯片添加连续编号,请在文件顶部插入以下命令:

slidenumbers: true

同时使用这两个命令时,请确保它们之间没有空行。

footer: Your footer goes here
slidenumbers: true

你也可以在页脚文本中使用强调等标准文本样式,就像在其他位置一样。

footer: Use *emphasis* and ~~other~~ text styles if you like

要使用更丰富的页脚,请采用多行块格式,并添加完整的 Markdown、图片或分栏:

footer: <<<
[.column]
Left footer text

[.column]
Right footer text

[.end-columns]
>>>
footer: <<<
![Logo](logo.png)
>>>

如果要在个别幻灯片上禁用页脚或幻灯片编号,可以使用单页命令。

脚注

# Footnotes

Footnotes are a breeze, for example:

Most of the time, you should adhere to the APA citation style[^1].

Note that footnote references have to be *unique in the Markdown file*. This means you can reference footnotes from any slide, no matter where they are defined.

[^1]: For more details on the citation guidelines of the American Psychological Association check out their [website](https://www.library.cornell.edu/research/citation/apa).

![脚注]({{ page.rel_root }}/img/slide-46.md.png)

# Named References

Instead of just numbers, you can also name your footnote references[^Wiles, 1995].

[^Wiles, 1995]: [Modular elliptic curves and Fermat's Last Theorem](http://math.stanford.edu/~lekheng/flt/wiles.pdf). Annals of Mathematics 141 (3): 443–551.

![命名引用]({{ page.rel_root }}/img/slide-47.md.png)

控制换行

# Controlling Line Breaks

In paragraph text, Deckset respects when you start a
new
line.

This can come in handy in situations where you need more control over how text is broken up into multiple lines.

![控制换行]({{ page.rel_root }}/img/slide-52.md.png)

# Use `
` for
line
breaks

You can use the HTML tag `
` to insert line breaks in elements that cannot contain regular new lines, such as headings or footers.

![使用 break 标签换行]({{ page.rel_root }}/img/slide-53.md.png)

自动缩放

# Auto-Scaling

At times you have to fit more content onto one slide than the default font sizes allow for.

Deckset comes with an option to auto-scale paragraph text, lists, and other body content down to fit onto the slide. To enable this behavior put

`autoscale: true`

on the first line of your markdown file.

![自动缩放]({{ page.rel_root }}/img/slide-54.md.png)

分栏

要将内容排成多栏,请使用 [.column] 命令开始新的一栏。


[.column]

# First column

[.column]

# Second column.

系统会根据可用空间和指定的栏数,自动均分栏宽。

你可以添加任意数量的栏,但栏数越多,可用宽度就越小。

将分栏与自动缩放结合使用,可自动缩小文字,以适应幻灯片。

背景图片

全屏背景图片

![](image1.jpg)

![全屏背景图片]({{ page.rel_root }}/img/slide-20.md.png)

适应背景图片

![fit](image1.jpg)

![适应背景图片]({{ page.rel_root }}/img/slide-21.md.png)

多张背景图片

![](image1.jpg)
![](image2.jpg)
![](image3.jpg)

![多张背景图片]({{ page.rel_root }}/img/slide-22.md.png)

图片上的文字

![](image2.jpg)

# Text on Images

Setting text on images applies a filter to the image to make the text more readable.

![图片上的文字]({{ page.rel_root }}/img/slide-23.md.png)

禁用滤镜

![original](image2.jpg)

# Disable Filter

![禁用滤镜]({{ page.rel_root }}/img/slide-24.md.png)

放大

![original 250%](image2.jpg)

# Zoom In

![放大]({{ page.rel_root }}/img/slide-25.md.png)

拆分幻灯片

![left](image1.jpg)

# Split Slides

Use the `left` or `right` modifiers to place the image in the left or right half of the slide, respectively.

![拆分幻灯片]({{ page.rel_root }}/img/slide-26.md.png)

调整滤镜

![left filtered](image1.jpg)

# Force Apply Filter

Use the `filtered` keyword to apply the theme's filter to an image that isn't filtered by default.

![强制应用滤镜]({{ page.rel_root }}/img/slide-27.md.png)

拆分幻灯片并适应

![right fit](image2.jpg)

# Split Slides

Combine `left` or `right` with the `fit` keyword or a percentage to adjust the image scaling.

![拆分幻灯片并适应]({{ page.rel_root }}/img/slide-28.md.png)

透明度

使用图片的 alpha 指定其不透明度。

![right alpha(0.6)](image2.jpg)

全局背景图片

要为演示文稿中的每张幻灯片应用背景图片,只需在 Markdown 文件最顶部添加 background-image 命令:

background-image: image2.jpg

(rest of your content)

行内图片

组合文字和图片

![inline](image1.jpg)

![组合文字和图片]({{ page.rel_root }}/img/slide-29.md.png)

填满幻灯片

![inline fill](image1.jpg)

![填满幻灯片]({{ page.rel_root }}/img/slide-30.md.png)

自定义缩放

![inline 50%](image1.jpg)

![自定义缩放]({{ page.rel_root }}/img/slide-31.md.png)

图片网格

![inline fill](image1.jpg)![inline fill](image2.jpg)
![inline fill](image3.jpg)

![图片网格]({{ page.rel_root }}/img/slide-32.md.png)

圆角

![圆角]({{ page.rel_root }}/img/rounded-corners.jpeg)

你可以使用以下 Markdown 设置图片的圆角:

![inline corner-radius(16)](image1.jpg)

目前,此功能仅适用于普通静态图片。如果你希望它也适用于其他媒体,请告诉我们。

视频

![](video.mov)

![视频]({{ page.rel_root }}/img/slide-33.md.png)

# Inline Videos

![inline](video.mov)

![内嵌视频]({{ page.rel_root }}/img/slide-34.md.png)

# YouTube Embeds!

![](https://www.youtube.com/watch?v=ekz6i58kVpI)

You can also use URL parameters like `?t=30s` to specify a start time for the clip.

![YouTube 嵌入内容]({{ page.rel_root }}/img/slide-35.md.png)

![left](video.mov)

# Video Layout Control

Use the same layout modifiers as with images to control the positioning of videos.

- `left` and `right`
- `fit` and `fill`
- Percentage sizing, e.g. `50%`
- `hide` to hide the video. Audio will play regardless.

![视频布局控制]({{ page.rel_root }}/img/slide-36.md.png)

![right autoplay mute](video.mov)

视频播放控制

在文件名后添加播放指令,即可调整视频片段的播放方式:

  • autoplay — 幻灯片显示时自动开始播放视频。
  • loop — 连续循环播放视频。
  • mute — 静音。

根据需要组合使用这些指令:

![right autoplay mute](video.mov)

![视频播放控制]({{ page.rel_root }}/img/slide-37.md.png)

自动切换幻灯片

你可以在修饰符中添加 autoadvance,在视频播放完毕后立即跳转到下一张幻灯片:

![autoadvance](video.mov)

此功能仅适用于幻灯片上的最后一个视频,并且幻灯片不能包含构建列表。

音频

如需在演示文稿中添加音频文件,请像这样将其添加到 Markdown 中:

![](audio.mp3)

系统将使用操作系统的文件类型图标来表示音频文件。

音频布局控制

使用与图片相同的布局修饰符来控制音频文件图标的位置。

  • left 和 right
  • fit 和 fill
  • 百分比尺寸,例如 25%
  • 使用 hide 隐藏视觉表示。音频仍会播放。

音频播放控制

使用以下指令之一控制音频播放:

  • autoplay
  • loop
  • mute

Markdown 图表

你可以通过代码块添加图表,并将语言指定为 mermaid:

pie showData
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5

你也可以使用自定义菜单为 Mermaid 图表指定基础颜色:

![内嵌代码]({{ page.rel_root }}/img/mermaid-customization.png)

你可以使用 Markdown 图表自定义命令,为单张幻灯片覆盖 Mermaid 颜色。最多可提供三种颜色,以及一个可选的深色模式标记:

[.graph: #ffffff, #aaffff, #000000, dark-mode(false)]

另请参阅自定义主题,了解更多幻灯片级覆盖设置。

在 Mermaid.js 文档中了解可用的图表类型。目前尚不支持 Zenuml 图表——如果你需要此功能,请通过支持渠道告知我们。

Pikchr 图表

Pikchr 图表的用法与其他内嵌媒体相同——将标记内容放入围栏代码块,并将语言声明为 pikchr:

arrow right 200% "Markdown" "Source"
box rad 10px "Markdown" "Formatter" "(markdown.c)" fit
arrow right 200% "HTML+SVG" "Output"
arrow <-> down 70% from last box.s
box same "Pikchr" "Formatter" "(pikchr.c)" fit

你可以重复使用图表自定义命令来控制 Pikchr 使用的基础颜色,使图表与幻灯片主题融为一体:

![Pikchr 图表自定义]({{ page.rel_root }}/img/pikchr-diagram-customization.png)

你也可以使用 Markdown 命令为单张幻灯片覆盖 Pikchr 颜色。第一种颜色控制描边和文本;第二种颜色是图表背景:

[.pikchr-graph: #f8f8f8, #003366]

另请参阅自定义主题,了解更多幻灯片级覆盖设置。

需要更多语法示例?浏览 Pikchr 官方文档,查看可直接粘贴到 Deckset 中的示例。

配置命令

使用命令配置演示文稿设置。命令既可以全局应用——放在 Markdown 文件顶部时——也可以应用于单张幻灯片,以设置或覆盖全局设置。使用全局配置命令时,请确保 Markdown 文件顶部的其他命令之间没有换行符。

缩放内容以适应幻灯片

有时,你需要在一张幻灯片上放入比默认字号所能容纳的更多内容。

Deckset 提供了一个选项,可自动缩小段落文本、列表和其他正文内容,以适应幻灯片。若要启用此功能,请在 Markdown 文件顶部添加以下命令:

autoscale: true

你可以在单张幻灯片上通过声明 [.autoscale: true] 或 [.autoscale: false] 来开启或关闭此功能。

构建列表

在演示者模式和排练模式下,你可能希望列表项逐条显示。若要在 Deckset 中实现此效果,请使用以下命令:

build-lists: true

你也可以指定不同的列表构建模式:

build-lists: all # Equivalent to true
build-lists: notFirst # Will always show first item of a list

请注意,这只会影响演示者模式(和排练模式)。

你可以在单张幻灯片上通过声明 [.build-lists: true] 或 [.build-lists: false] 来开启或关闭此功能。

幻灯片编号

若要为演示文稿添加连续的幻灯片编号,请使用以下命令:

slidenumbers: true

你可以在单张幻灯片上通过声明 [.slidenumbers: true] 或 [.slidenumbers: false] 来开启或关闭此功能。

若要添加演示文稿的幻灯片总数,请使用 slidecount: true 命令。你也可以在单张幻灯片上通过声明 [.slidecount: true] 或 [.slidecount: false] 来关闭此功能。

页脚

若要为演示文稿中的每张幻灯片添加固定页脚,请使用以下命令:

footer: My Footer content

若要覆盖全局页脚,或为单张幻灯片添加页脚,请在相应幻灯片中添加 [.footer: A different footer]。

你可以在单张幻灯片上通过声明 [.hide-footer] 来关闭页脚。

对于多行页脚或更丰富的布局,请使用块形式,并加入完整的 Markdown、图片或分栏:

footer: <<<
[.column]
Left footer text

[.column]
Right footer text

[.end-columns]
>>>
footer: <<<
![Logo](logo.png)
>>>

幻灯片切换效果

在演示者模式下,你可能希望在幻灯片之间添加切换效果。若要在 Deckset 中实现此效果,请使用以下命令:

slide-transition: true

你可以通过传入秒数来控制切换效果的持续时间:slide-transition: fade(0.3)。

你也可以在单张幻灯片上使用此命令,例如:[.slide-transition: fade(0.3)] 或 [.slide-transition: false]。

使用标题分隔幻灯片

若要在每个标题处自动开始新幻灯片,请使用

slide-dividers: #, ##, ###, ####

命令,并指定要考虑的标题级别。

请注意,此命令只能在 Markdown 文件顶部全局使用。

将段落视为演讲者备注

若要将普通段落移至演讲者备注中(无需在段落前加上 ^),请使用:

paragraphs-as-presenter-notes: true

请注意,此命令只能在 Markdown 文件顶部全局使用。

时间预算

若要在演讲者备注中添加演示时长预算(分钟),请使用:

time-budget: 20

从第 1 张幻灯片切换到第 2 张幻灯片时,预算计时器开始计时。如果你跳转到后面的幻灯片,计时器会立即开始,并根据每张幻灯片的平均用时计入相应时间。按计划进行时,计时器会保持绿色;进度落后时会变为黄色;超过总预算后会变为红色。

请注意,此命令只能在 Markdown 文件顶部全局使用。

默认代码语言

你可以在 Markdown 文件顶部添加代码语言,以指定默认代码语言:

code-language: Swift

在文档中保存主题选择

Deckset 会将主题选择作为元数据存储在文件中。在某些情况下,这些信息可能会丢失,例如使用版本控制系统时,或通过电子邮件发送文件时。

若要确保主题选择不会丢失,可以使用以下命令,并引用任意主题的名称:theme: Fira。

如果还要指定颜色,可以引用 Deckset 中显示的色板编号,例如:

theme: Fira, 3

请注意,此命令只能在 Markdown 文件顶部全局使用。

自动适配标题

Deckset 支持让标题适配整张幻灯片,呈现标志性的字体效果。不过,为每张幻灯片重复设置可能有些繁琐。你可以使用 fit-header 命令来实现:

fit-header: #, ##

请注意,这只适用于全局命令,并且需要放在 md 文件顶部。

全局背景图片

要为演示文稿中的每张幻灯片设置背景图片,只需在 Markdown 文件最顶部添加 background-image 命令:

background-image: image2.jpg

(rest of your content)

图片默认圆角半径

要为图片设置全局默认圆角半径,请在 Markdown 文件顶部添加以下命令:

image-corner-radius: 12

仅当图片替代文本中未指定 corner-radius(...) 时,才会应用此默认值。例如:

![inline corner-radius(24)](team.jpg)

自定义主题

Deckset 2.0 引入了可直接在用户界面中自定义幻灯片样式的选项。除了这些基于 UI 的控件,你还可以使用下方列出的自定义命令,对单张幻灯片进行精细样式设置。请注意,命令设置的样式始终会覆盖 UI 中设置的样式。

文本和标题

要自定义文本和标题的外观,可以为 text、text-emphasis、text-strong、header、header-emphasis、header-strong、slidenumber-style 和 footer-style 添加自定义命令,并设置所需的颜色、对齐方式、行高、文本缩放、字体和大小写。

[.text: #000000, alignment(left|center|right), line-height(10), text-scale(2.0), kern(1), Avenir Next Regular]
[.header: #FF0000, alignment(left|center|right), line-height(18), text-scale(3.0), Avenir Next Bold, capitalization(default|upper|title)]
[.footer-style: #2F2F2F, alignment(left|center|right), line-height(8), text-scale(1.5), Avenir Next Regular]

我们建议使用 Mac 原生的“字体册”应用来搜索字体。

背景颜色

要自定义幻灯片的背景颜色,可以使用以下自定义命令:

[.background-color: #FF0000]

列表

要自定义列表样式,可以添加自定义命令来设置列表颜色、项目符号字符、对齐方式、项目符号颜色、文本缩放,以及有序和无序列表的缩进。

[.list: #000000, bullet-character(Custom String), alignment(left|center|right), bullet-color(#ffcc00), text-scale(1.2), bullet-indent(40), ordered-bullet-indent(20)]

表格

要自定义表格样式,可以使用以下命令:

[.table-separator: #000000, stroke-width(10)] 
[.table: margin(5)]

代码

Deckset 会自动为代码选取一组随机颜色,确保其与所选背景颜色有足够的对比度。你可以添加自定义命令来设置行高和字体系列。

如需让代码块样式保持一致并避免重新生成调色板,请使用种子编号 42 来固定颜色。

[.code: auto(42), Font Family Name, line-height(4.2)]

不指定种子时,使用 auto 可在每次显示时重新生成颜色:

[.code: auto]

手动调色板支持 1–5 种颜色。如果提供的颜色少于五种,列表会重复填充调色板。

[.code: #ffcc00, #1b1b1b, #ffffff]

你还可以通过指定以下命令来控制 alpha 代码内置值:

[.code: dimmed-opacity(0.2)]

text-scale(...) 和 alignment(...) 等标准文本覆盖设置也适用于代码块。

行内代码

行内代码与代码块共用相同的自定义选项,但只影响行内代码片段。如果 .code 和 .inline-code 同时存在,行内代码会使用 .inline-code 覆盖设置。

[.inline-code: text-scale(0.9), Font Family Name, auto(42)]

脚注

要自定义脚注的外观,可以使用以下命令:

[.footnote: #000000, alignment(left|center|right), line-height(10), text-scale(2.0), Avenir Next Regular]

可以像这样设置用于分隔脚注和幻灯片内容的水平线样式:

[.footnote-separator: #001100, height(10), margin(12)]

公式

要自定义公式样式,可以使用以下命令:

[.formula: text-scale(42), alignment(center), #ff0011]

链接

可以自定义链接的颜色、字体、行高、文本缩放和下划线选项。下划线样式支持 none、single、thick 或 double,并可选用 byWord 修饰符。

[.link: #00aaff, Avenir Next Regular, line-height(10), text-scale(1.1), underline(single, byWord)]

引言

要自定义引言样式,可以使用以下命令:

[.quote: #000000, alignment(left|center|right), line-height(10), text-scale(2.0), Avenir Next Regular]

要自定义引言作者的样式,请使用:

[.quote-author: #000000, alignment(left|center|right), line-height(10), text-scale(2.0), Avenir Next Regular]

演讲者备注

演讲者备注支持与普通文本样式相同的文本自定义控件。

[.presenter-notes: #333333, alignment(left), line-height(9), text-scale(0.9), Avenir Next Regular]

另请参阅演讲者备注,了解编写和预览技巧。

Mermaid 图表

Mermaid 图表使用通用的图表自定义命令,让你可以选择不同的主色、次色和第三色(还可选择启用深色模式):

[.graph: #ffffff, #aaffff, #000000, dark-mode(false)]

另请参阅 Mermaid 图表,了解语法和示例。

Pikchr 图表

Pikchr 图表有自己的双色命令。第一个值控制图表前景色(描边、文本等),第二个值是背景填充色;省略第二种颜色时,将使用幻灯片背景色:

[.pikchr-graph: #f8f8f8, #003366]

另请参阅 Pikchr 图表,查看语法示例。

在文档中保存主题选择

Deckset 会将主题选择作为元数据保存到文件中。在某些情况下,这些信息可能会丢失,例如在版本控制系统中,或通过电子邮件发送文件时。

若要确保主题选择不会丢失,可以使用以下命令:theme: Fira。

如果还想指定颜色,可以引用 Deckset 中颜色样本所显示的编号,例如:

theme: Fira, 3

请注意,此命令只能在 Markdown 文件顶部全局使用。

构建步骤

演示时,你可能希望列表项逐条显示。将此命令添加到文件顶部即可启用此行为:

build-lists: true

你还可以指定不同的构建模式:

build-lists: all # Equivalent to true
build-lists: notFirst # Will always show first item of a list

如果想在单张幻灯片上禁用或调整此设置,请使用逐张幻灯片命令——例如,使用 [.build-lists: false] 或 [.build-lists: not_first],即可始终立即显示第一条项目,并逐步显示其余项目。

隐藏幻灯片

如果想阻止特定幻灯片(或部分内容)出现在演示中,但又想将它们保留在文档里,可以这样做:

切换演讲者显示屏

使用投影仪或第二台显示器时,可以在演示模式下使用键盘快捷键 x 切换演讲者显示屏。

在 iPad 上演示时,可以轻点配对的 Apple Pencil 来切换幻灯片。

演讲者备注

使用演讲者备注

Deckset 会将所有以 ^ 开头的段落转换为演讲者备注,不会在幻灯片上显示这些文本。

连接两台屏幕时,你可以在演讲者显示屏上查看这些备注,也可以使用排练模式查看。

若要开始另一个演讲者备注段落,再次在段落前加上插入符号。若文本较多,Deckset 会自动缩小备注字号,以适应演讲者显示屏。

示例:

# My slide title

^ This is a presenter note.

![演讲者备注]({{ page.rel_root }}/img/presenter-notes.png)

自定义演讲者备注的显示样式

若要自定义演讲者备注的样式,可在演讲者模式、排练模式和导出的文档中使用 presenter-notes 命令,如下所示:

presenter-notes: #333333, alignment(left|right|center), line-height(9), text-scale(0.9), kern(0.5), capitalization(default|upper|title), Helvetica

你也可以像这样在单张幻灯片上使用此命令:

[.presenter-notes: #333333, alignment(left|right|center), line-height(9), text-scale(0.9), kern(0.5), capitalization(default|upper|title), Helvetica]

将所有段落视为演讲者备注

你可以将 Deckset 配置为把所有段落都视为演讲者备注。为此,可以在 Markdown 文件顶部添加

paragraphs-as-presenter-notes: true

或者在演示设置视图中启用“将段落作为演讲者备注”选项。

在主窗口中预览演讲者备注

若要在主应用程序窗口中预览演讲者备注,可从 View 菜单中选择 Toggle Presenter Notes 来开启显示。

另请参阅自定义主题,了解幻灯片级样式选项。

转场

启用转场

演示时,你可能希望在幻灯片之间添加转场。使用此命令即可启用转场:

slide-transition: true

转场样式

以下是可用的转场样式:

  • fade — 在幻灯片之间交叉淡化(默认)。
  • fadeThroughColor(#000000) — 通过某种颜色淡出,再进入下一张幻灯片。在括号中传入十六进制颜色值。
  • push(horizontal|vertical|top|right|bottom|left) — 下一张幻灯片将上一张推出视口。前进或返回时,可使用 horizontal、vertical(或某个方向)控制移动方向。
  • move(horizontal|vertical|top|right|bottom|left) — 下一张幻灯片移到当前幻灯片上方。方向参数的用法与 push 相同。
  • reveal(horizontal|vertical|top|right|bottom|left) — 当前幻灯片移开,显示其下方的下一张幻灯片。方向参数同样可控制前进或返回时的移动方向。

在命令中指定即可选择其中一种转场:

slide-transition: push(vertical)

转场时长

传入以秒为单位的值,即可控制转场时长:

slide-transition: fade(0.3)

单张幻灯片的转场

你也可以在单张幻灯片上使用转场命令,例如:[.slide-transition: push(horizontal, 0.3)] 或 [.slide-transition: false]。

评论

支持 Markdown