Help us understand the problem. What is going on with this article?

Marp(Markdown Presentaiton)の文法まとめ

■ Marpにいて

MarkdownでPDF形式のプレゼンテーションファイルを作成できるフリーソフト。

特色は、

https://yhatt.github.io/marp/#

※ 2017-06 「Marp v0.0.10 およびそれ以前」に
脆弱性が発見された模様、最新版へアップデートが必要
https://scan.netsecurity.ne.jp/article/2017/06/29/39903.html


■ スライドの書き方

Markdownで文章を記述↓

# スライドタイトル1

* 例1
* 例2
* 例3

↓ 次のスライドを作成
----

# スライドタイトル2

* 例1
* 例2
* 例3


■ ディレクティブ

特定書式に従って記載することによって、
特別な表現を行うことできるMarpの特別機能。

書式は下記のようになっている。


* 単一の場合
<!-- ディレクティブ1の名前: ディレクティブの値 -->

* 複数を纏めて記載する
<!--
ディレクティブ1の名前: ディレクティブの値
ディレクティブ2の名前: ディレクティブの値
.
.
.
-->

● テーマ

スライドに下記のように記載する。
初期から入っているのは、
Default(白)とGaia(クリーム色)だけ。

* 書式
<!-- $theme: テーマ名 -->

* Defaultテーマ
<!-- $theme: default -->

* Gaiaテーマ
<!-- $theme: gaia -->

● 高さ、幅

スライドの高さと幅を設定。

単位は下記のものが対応している。

  • px (デフォルト)
  • cm
  • mm
  • in
  • pt
  • pc
* 書式
<!-- $width: 長さ|単位 -->
<!-- $height: 長さ|単位 --> 

* センチメートル
<!-- $width: 12cm -->

* ミリメートル
<!-- $height: 14mm --> 

● 縦横比

スライドの縦横比を決める

  • 4:3
  • 16:9
  • A0-A8
  • B0-B8
  • -portrait.
* 書式
<!-- $size: 縦横比 -->

* 16:9
<!-- $size: 16:9 -->

● ページ番号

trueを設定するとスライドの下部にページ番号が設定される。

* 書式
<!-- paginate: 真偽値 -->

* ページ番号有効
<!-- paginate: true -->

* ページ番号無効
<!-- paginate: false -->

● フッター

設定するとスライドの下部にフッター文字列が設定される。

* 書式
<!-- footer: フーター文字列 -->

● templateディレクティブ

位置づけがよく分からないが、下記のように書く。

背景とで囲んだブロック部分のテーマの配色が逆転する。

<!--
$theme: gaia
template: invert
-->

● プリレンダ

trueを設定すると、バックグラウンドで背景画像を事前に読み込む(キャッシュ)するらしい。

* 書式
<!-- page_number: 真偽値 -->

* プリレンダを有効
<!-- prerender: true -->

● ディレクティブを現在のスライドにのみ適用する

ディレクティブ名の前に、*を付けると現在のスライドにのみ設定が有効になる。
*がない場合は、ディレクティブを記載した以降の全てのスライドにディレクティブの設定が反映される。

*ディレクティブ名: ディレクティブの値

● 画像

* 画像を挿入
![](画像ファイルパス)

* 画像の大きさをスライドサイズの比率で指定する
![比率%](画像ファイルパス)

* 背景画像を挿入
![bg](画像ファイルパス)

* 背景画像の大きさをスライドサイズの比率で指定する
![bg 比率%](画像ファイルパス)

* 背景画像を連続して書くと水平方向(横)に分割される 
![bg](画像ファイルパス)
![bg](画像ファイルパス)


● 絵文字

Qittaでも使える絵文字に対応している。

全てに対応しているわけではないようだ。

* :heart:
* :soccer:
* :arrow_up_down:
* :exclamation:
* :end:
* :calling:
* :shield:
  • :heart:
  • :soccer:
  • :arrow_up_down:
  • :exclamation:
  • :end:
  • :calling:
  • :shield:

https://www.webpagefx.com/tools/emoji-cheat-sheet/

■ 数式

数式はKaTeX 形式で記載する

$$I_{xx}=\int\int_Ry^2f(x,y)\cdot{}dydx$$

$$I_{xx}=\int\int_Ry^2f(x,y)\cdot{}dydx$$

[undefined]()

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away