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. 01Markdownでスライドを作成
  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 コマンドでは利用できません。スクリプトで設定できるとワークフローに役立つ場合は、お知らせください。

表

セルはパイプ | で区切ります。

表のヘッダーと本文は、3 つのダッシュ --- を並べた行で区切ります。

| 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)

Deckset でサポートされている絵文字については、この絵文字リファレンスの Markdown ファイルをご覧ください。Unicode にまだ含まれていないお気に入りの絵文字がいくつかあるため、それらには対応できません。

フッターとスライド番号

プレゼンテーションの各スライドに常に表示されるフッターを追加するには、ファイルの先頭に次のコマンドを挿入します。

footer: Your footer goes here

プレゼンテーションの各スライドに連続したスライド番号を追加するには、ファイルの先頭に次のコマンドを挿入します。

slidenumbers: true

2 つのコマンドを組み合わせる場合は、その間に空行を入れないでください。

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 の色を上書きできます。最大 3 色と、オプションのダークモードフラグを指定します。

[.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 の色を上書きすることもできます。最初の色は線とテキストに、2 番目の色はダイアグラムの背景に適用されます。

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

スライド単位でさらに設定を上書きする方法については、カスタムテーマもご覧ください。

構文のアイデアをもっと知りたいですか?Deckset に貼り付けて使えるサンプルについては、Pikchr の公式ドキュメントをご覧ください。

設定コマンド

コマンドを使ってプレゼンテーションの設定を行います。コマンドは Markdown ファイルの先頭に記述して全体に適用することも、スライドごとに設定して全体設定を上書きすることもできます。全体設定のコマンドを使う場合は、Markdown ファイルの先頭にある他のコマンドとの間に改行を入れないでください。

スライドに収まるようにコンテンツを縮小する

デフォルトのフォントサイズでは収まらない量のコンテンツを、1 枚のスライドに載せなければならない場合があります。

Deckset には、段落テキスト、リスト、その他の本文コンテンツをスライドに収まるよう自動的に縮小するオプションがあります。この動作を有効にするには、Markdown ファイルの先頭に次のコマンドを記述します。

autoscale: true

各スライドに [.autoscale: true] または [.autoscale: false] を指定すれば、スライドごとに有効または無効にできます。

リストを順に表示する

プレゼンターモードやリハーサルモードでは、リスト項目を1つずつ表示したい場合があります。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

全体に設定したフッターを上書きする場合、または1枚のスライドにフッターを追加する場合は、そのスライドに [.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 標準の Font Book アプリケーションを使うことをおすすめします。

背景色

スライドの背景色をカスタマイズするには、次のカスタマイズコマンドを使用します。

[.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 色を指定できます。5 色未満の場合、リストが繰り返されてパレットが埋められます。

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

次のコマンドを指定すると、アルファコードのビルドインも制御できます。

[.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 diagrams も参照してください。

Pikchr 図

Pikchr 図には、独自の2色コマンドがあります。1つ目の値は図の前景(線、テキストなど)を制御し、2つ目の値は背景の塗りつぶし色を制御します。2つ目の色を省略すると、スライドの背景色が使用されます。

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

構文の例については、Pikchr diagrams も参照してください。

ドキュメントにテーマの選択を保存する

Deckset はテーマの選択をファイルのメタデータとして保存します。バージョン管理システムを使用する場合や、ファイルをメールで送信する場合など、この情報が失われることがあります。

テーマの選択が失われないようにするには、次のコマンド theme: Fira を使用します。

色の選択も指定する場合は、Deckset 内に表示される色見本の番号を参照できます。例:

theme: Fira, 3

このコマンドは、Markdown ファイルの先頭でグローバルにのみ使用できます。

ビルドステップ

プレゼンテーションでは、リスト項目を1つずつ表示したいことがよくあります。この動作を有効にするには、ファイルの先頭に次のコマンドを追加します。

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 は、^ で始まる各段落をプレゼンターノートとして扱い、スライドには表示しません。

これらのノートは、2台の画面を接続したときのプレゼンターディスプレイ、またはリハーサルモードで確認できます。

別のプレゼンターノートの段落を始めるには、もう一度キャレットを先頭に付けます。テキストが多い場合、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

プレゼンテーション設定画面で「Paragraphs as presenter notes」オプションをオンにします。

メインウィンドウでプレゼンターノートをプレビューする

メインアプリケーションウィンドウでプレゼンターノートをプレビューするには、View メニューから Toggle Presenter Notes を選択して表示できます。

スライド単位のスタイル設定については、Custom theming も参照してください。

トランジション

トランジションを有効にする

プレゼンテーション中にスライド間でトランジションを使用したい場合があります。次のコマンドでトランジションを有効にします。

slide-transition: true

トランジションのスタイル

以下のトランジションスタイルを利用できます。

  • fade — スライド間をクロスフェードします(デフォルト)。
  • fadeThroughColor(#000000) — 色を経由して次のスライドへフェードします。色は括弧内に16進数で指定します。
  • 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] のように指定します。

コメント