marp
でヘルプが表示できます。今回使ったのは以下の通りです。
marp src/md/marp.md --theme src/theme/slide.css --preview
marp src/md/marp.md --theme src/theme/slide.css --pdf
{
"name": "slide",
"version": "1.0.0",
"scripts": {
+ "preview": "marp $npm_config_src --theme src/theme/slide.css --preview",
+ "pdf": "marp $npm_config_src --theme src/theme/slide.css --pdf"
},
"devDependencies": {
"@marp-team/marp-cli": "^3.0.0"
}
}
npm run preview --src src/md/marp.md
npm run pdf --src src/md/marp.md
Marp CLI can be configured options with file, such as marp.config.js, marp.config.cjs, .marprc (JSON / YAML), and marp section of package.json. It is useful to configure settings for the whole of project.
例えば、テーマを固定したいだけなら .marprc.yml
に以下を書くだけで実現可能です。
theme: src/theme/slide.css
Markdownではアスタリスク、ハイフンで順序なし箇条書きを表現できますが、どちらを使うかでMarpの出力が変わります。
なお、当然ながらPDF出力では差分はありません。
default、gaia、uncoverの3種類があります。
どれもかなり見やすいテーマなので、色指定だけで済むのであればカスタマイズなしで利用するのも選択肢に入るのではないでしょうか。
拡張する場合はこれだけで済みます。
@import 'default';
私が愛用しているWebStorm(JetBrainsのIDE)だと、defaultが解決できずに赤線が引かれますが、無視して構いません。
どうしても気になるようなら、警告を消すことも可能です。
+ /*noinspection CssUnknownTarget*/
@import 'default';
公式ドキュメント
https://marpit.marp.app/theme-css
例えば、背景色を変えたいならsectionに指定すればOKです。
section {
background-color: lightblue;
}
企業なら会社ロゴを入れたりするといい感じになります。
Markdownに以下の記述を追加します。
<!-- _class: title -->
すると、出力されるHTMLは <section class="title">
に変わるので、section.titleにCSS定義を追加すればOKです。
section {
background-color: red;
}
marp-cli-action
を利用するのが一番簡単そうでした。
https://github.com/KoharaKazuya/marp-cli-action/blob/main/README.ja.md
name: Convert Markdown into PDF
on:
push:
branches:
- main
workflow_dispatch:
jobs:
publish:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Convert Markdown into PDF
uses: KoharaKazuya/marp-cli-action@v2
with:
config-file: ./.marprc-ci.yml
generate-html: true
generate-pdf: true
- name: Save outputs
uses: actions/upload-artifact@v2
with:
name: output
path: ./output
- name: Deploy to GitHub Pages
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./output
name: Convert Markdown into PDF
on:
push:
branches:
- main
workflow_dispatch:
jobs:
publish:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Convert Markdown into PDF
uses: KoharaKazuya/marp-cli-action@v2
with:
config-file: ./.marprc-ci.yml
generate-html: true
generate-pdf: true
HTML, PDFファイルを作成します。
設定ファイルは .marprc-ci.yml
を使用します。
- name: Save outputs
uses: actions/upload-artifact@v2
with:
name: output
path: ./output
output.zipをダウンロードできるようになります。
出力されたファイルをGoogleドライブ等で共有したい場合はこちらを使ってください。
- name: Deploy to GitHub Pages
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./output
outputディレクトリのファイルを公開します。
GitHubの Settings > Actions > General > Workflow permissions
を Read and write permissions
にする必要があります。
成功すると、outputディレクトリ配下のファイルがgh-pages
ブランチにプッシュされます。
https://github.com/75py/slide/tree/gh-pages
良い感じに設定すると、以下のようにアクセスできます。
https://75py.github.io/slide/marp.html
Marpを使うことで、勉強会の登壇資料や、採用資料などを効率よく作成できます。
資料作成に疲弊している方はぜひ試してみてください。
https://open.talentio.com/r/1/c/isytyle_career/pages/43022
https://open.talentio.com/r/1/c/isytyle_career/pages/43019