スポンサードリンク

Marp for VS Codeの使い方¶

Marp ＆ Marp for VS Code¶

Markdown記法を用いてスライドが作れるアプリケーションとなります。
electronにて作成されたバージョンと同じ作者の作られたMarp Nextの２バージョンがあるようです。
詳しい説明はQiitaにある作者の方が記載されたページをご覧いただくとわかりやすいです。

https://qiita.com/yhatt/items/874d5bfa919c32728403

「Marp for VS Code」はMarp Nextの２バージョンをVSCodeの拡張機能として利用できるものとなります。

シンプルで使いやすいのですが公式サイトが全て英語なので自分のメモもかねて残しておきます。

公式 https://github.com/marp-team/marp-vscode

環境構築¶

VSCodeをインストールし、その後拡張機能からインストールすることができます。

記載方法¶

ページの先頭にmarpの設定を記載します。

---
marp: true
theme: default
paginate: true
---

ここからページの内容を記載する
1行目はmarpを利用するかのフラグとなります。

2行目は利用するテーマを記載します

3行目はスライドにページを表示するかのフラグとなります。

ベースは「Marpit」「CommonMark」のルールにしたがってHTMLへ変換されます。

# →　h1
## →　h2
##＃ →　h3

ページ単位にスタイルを変更する場合はstyleタグを記載することで対応することが可能です。

---

<style>
h1 {
    font-size: 20px;
}
</style>

# h1のタイトル

文字の横幅をフィットさせたい場合には以下のように記載することで対応が可能です。

# <!-- fit --> 入力文字

レイアウトのカスタマイズ¶

レイアウト用のCSSファイルを作成することでレイアウトを変更することができます。

https://github.com/marp-team/marp-vscode#use-custom-theme

cssファイルを作成する。

今回の場合は「original-theme.css」というファイルを作成する

workspaceの設定ファイルに以下の内容を追加

この時起点となるフォルダはworksapceの設定ファイルの場所となるようです。

{
    "folders": [
        {
            "path": "."
        }
    ],
    "settings": {
        "markdown.marp.themes": [
            "original-theme.css"
        ]
    }
}

作成した「original-theme.css」に内容を記載する。

デフォルトのCSSは以下のファイルのため必要に応じてCSSをカスタマイズすることでレイアウトを変更することができます。

https://github.com/marp-team/marp-core/blob/master/themes/default.scss

スタイルのカスタマイズ時のポイント

marpで出力されるレイアウトの基本構成は
<section>
    <h1></h1>
</section>
のようになります。

コードの場合は以下のようなスタイルを適用することで変更することができます。
 <style>
  pre, code {
    font-size: 18px;
  }
</style>
またページにクラスをしているする場合には以下のように記載することで設定することが出来ます。

スポンサードリンク