#author("2023-07-17T08:37:58+00:00","default:hotate","hotate") #author("2025-01-07T11:03:16+00:00","default:hotate","hotate") #contents &tag(Markdown,プレゼンテーション); * 情報 [#t35122bf] ** 概要 [#dd3dd193] - [[Markdown スライド作成ツール『Marp』の開発経緯裏話 - Speee DEVELOPER BLOG>https://tech.speee.jp/entry/2016/07/14/204951]] (2016/07/14) この場を借りて、開発の経緯などをご紹介させていただきます。 - [[Marp(Markdown Presentaiton)の文法まとめ - Qiita>https://qiita.com/pocket8137/items/27ede821e59c12a1b222]] MarkdownでPDF形式のプレゼンテーションファイルを作成できるフリーソフト。 - [[【VS Code + Marp】Markdownから爆速・自由自在なデザインで、プレゼンスライドを作る - Qiita>https://qiita.com/tomo_makes/items/aafae4021986553ae1d8]] ([[2020]]/06/28) Visual Studio Code上で、Markdownから、こんな感じのデッキを生成できるようにします。 - [[Marp入門〜応用|markdownでプレゼン資料を楽に素早く作って発表しよう>https://zenn.dev/cota_hu/books/marp-beginner-advanced]] ([[2022]]/11/22) サンプルプロジェクト・デザインのテンプレ配布も行い、git cloneするだけで作り始めることもできます。 - [[Marp(Marpit) - Qiita>https://qiita.com/takeshisakuma/items/5a61e6eac123d28602fb]] Marp(Marpit)を使って、Markdownからスライドを作成します。 *** v3.0 [#i87b6348] - [[Markdown記法で手軽にプレゼンスライドを作成 ~「Marp for VS Code」がv3.0.0に - 窓の杜>https://forest.watch.impress.co.jp/docs/news/1652260.html]] (2025/01/07) 今回のメジャーアップデートは、コアライブラリやCLIツールがv3からv4へ更新されたことに追従するものだ。 ** 本文 [#nfb2d07b] - [[Marpの本文を中央から上詰めに変更する方法:Work Life Fun>https://worklifefun.net/marp-body-to-top/]] (2022/06/08) sectionタグに、以下のスタイルを書けば、本文を上詰めに変更できます。 section { justify-content: start; } - [[VSCode と Marp で A4 マニュアルを作成する方法>https://zenn.dev/ashitaka0789/articles/8a558b279e16a6]] justify-content: コンテンツを配置する基準位置を設定する項目。何も設定しないとデフォルトの center になってしまうので start がよい。 ** 画像 [#x15e1a55] - [[(解決)Marpで画像サイズが変わらなくて困った話 - Qiita>https://qiita.com/kr_ss/items/411a6c8a7385b9e7f470]] ([[2021]]/01/21) Marpの作者様から、単一画像のパーセンテージ指定はスライドサイズによって表示同一性が確保できないため、現状あえて対応していないとのことでした。 - [[フラグメントを利用した画像の中央寄せ(右寄せ・左寄せも)【CSS】 - プログラムでおかえしできるかな>https://juu7g.hatenablog.com/entry/blog/markdown/image]] 一手間は、画像の URL の末尾に #center を付加することです。 ** 表紙 [#k80f07d6] - [[タイトルスライドをデザインしよう|Marp入門〜応用|markdownでプレゼン資料を楽に素早く作って発表しよう>https://zenn.dev/cota_hu/books/marp-beginner-advanced/viewer/create-5]] タイトルスライド、と言っていますが、表紙のスライドのことです。こんなスライドを用意します。 - [[Markdownでスライドを作る、Marpのすゝめ | IIJ Engineers Blog>https://eng-blog.iij.ad.jp/archives/11432]] 次の部分では、スライドの表紙となるタイトルページの設定をしています。 ** コマンド [#be3c163b] - [[GitHub - marp-team/marp-cli: A CLI interface for Marp and Marpit based converters>https://github.com/marp-team/marp-cli]] A CLI interface, for Marp (using @marp-team/marp-core) and any slide deck converter based on Marpit framework. - [[Marpでスライド作ってみよう - シナプス技術者ブログ>https://tech.synapse.jp/entry/2022/04/15/110000]] Marp CLIは、npmでインストール出来ますが、公式リポジトリではnpxでの利用もおすすめされています。 ** VisualStudioCode [#m25f27d7] - [[【VS Code + Marp】プレビューが Markdown プレビューになってしまう解決策|寒い日の夜は、膝関節が成長期。>https://wp.re13b.jp/entry/2022/09/18/2022-09-18-%E3%80%90vs_code__marp%E3%80%91%E3%83%97%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC%E3%81%8C_markdown_%E3%83%97%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%A6%E3%81%97/]] -- コメント:「Markdown: プレビューを横に表示」を選択することで表示できた。(2023/05/28) ** [[CSS]] [#ef5243bb] - [[【Visualstudio Code+Markdown】 1から作るMarpの会社用スライドTheme実装【not先頭ページ編】 - 製造業も大っきらい!!>https://manuhater.com/entry/marp-custom]] (2022/08/14) mdの良さはもちろんシンプルさにあるのだが、装飾が何もないと、ダサい感じになってしまうので、今回ひと手間実施した。 - [[Marpで会社のスライドテンプレを作ってみる | フューチャー技術ブログ>https://future-architect.github.io/articles/20200812/]] Ctrl + ,で設定を開き、Markdown: Stylesに作成したCSSファイルのパスを記載します。 -- コメント:2箇所に同じパス (/path/to/my.css) を記載した。(2023/05/28) ** [[PDF]] [#t6fffcd8] *** [[macOS]] [#n2620e9b] - 「Adobe Acrobat」アプリ:日本語を検索可能。 - 「プレビュー」アプリ:日本語を検索できない。英数字では検索できる為、アプリ側の問題と思われる。(v3.0.2で確認)(2023/07/17) * 関連 [#q1934705] #related #taglist(tag=Markdown) - VisualStudioCode