marp

ぶりぶーです。突然ですが、みなさんはMarpでスライドを作って出力するとき、どのファイルに変換していますか？個人的にはPower Pointに一度変換する人が多いと感じています。 しかし、せっかくMarpを使っているならPower Pointに出力するのはもったいないかもです！ そこで今回は、Marpの力を最大限発揮できる(?)、HTML出力について解説していきます。 想定環境 HTML出力のメリデメ メリット デメリット 出力方法 プレゼン方法 便利な機能 ノート（カンペ、原稿） タイマー 終わりに 想定環境 Marp for VS Code VS Code HTML出力のメリデメ メリット…

ぶりぶーです。今回は、Markdown記法でプレゼンスライドを作成できるVS Codeの拡張機能「Marp」での、タイトルスライドの作成方法について解説します！ タイトルスライドはよく作る機会が多いと思いますが、Marpには現状、タイトルスライドを作成するコマンドがありません。そこで、簡単に作れるように解説していこうと思います。 タイトルスライドの例 想定環境 作成方法 CSSでカンタンにできるようになることの例 準備 方法 目指すスライド CSSファイルの編集 Markdownファイルの編集 カスタマイズ 例１．タイトルの色や文字の大きさを変える 例２．情報を右揃えにする 例３．タイトルの下…

ぶりぶーです。今回は、スライドをMarkdown記法で作成することができるVS Codoの拡張機能「Marp for VS Code」にて、文字のサイズをカスタマイズする方法について解説したいと思います！ 想定環境 準備 1. Markdownファイルのみの方法 向いているケース 2. CSSファイルも併せて用いて変更する方法 向いているケース 参考記事 方法 1. Markdownファイルのみの方法 2. CSSファイルも併せて用いて変更する方法 仕組み カスタマイズ 単位 例 どうせなら色も変えたい 想定環境 VS Code Marp for VS Code 準備 文字の大きさをカスタマイ…

ぶりぶーです。今回は、Markdown記法でスライドを作成できるVS Codeの拡張機能「Marp for VS Code」にて、画像を挿入する基本的な方法を紹介したいと思います！ 想定環境 画像の挿入 ファイルパスについて パス記述の例 ファイル階層の例 書式 表示例 画像のサイズを変更（インライン画像） 書式 コマンド 例 例１ 例２ 画像を背景に配置 書式 コマンド 中央に配置 左右に配置 例 例１ 例２ 例３ 複数の画像を配置 もっと柔軟な画像配置 画像の効果 書式 コマンド 例 参考サイト 想定環境 VS Code Marp for VS Code 画像の挿入 元の画像サイズのまま挿…

ぶりぶーです。スライドをMarkdown記法でラクラク作成できる、VS Codeの拡張機能の「Marp」。今回は、スライドで使う文字の色を自由に変更する方法を書きます！ ↓「Marp」とは？という方に。 briboo-pc.hatenablog.jp 環境 前提 方法 CSSファイル mdファイル 仕組み 応用 もっといろんな色を使いたい colorに適用できる色の書式 もっと異なる色をたくさん使いたい (adsbygoogle = window.adsbygoogle || []).push({}); 環境 Windows11 VS Code TeX Live 2023 前提 文字色を変える…

前回の記事で、Marpを使ったスライド作成で段組みレイアウトを簡単に実現する方法を紹介しました。せっかくなのでスニペット機能を使ってさらにラクにしていきたいと思います！ briboo-pc.hatenablog.jp Marpとは？ スニペットとは？ Marpで２段組みを実装する スニペットの適用 使い方 (adsbygoogle = window.adsbygoogle || []).push({}); Marpとは？ 「Marp」はMarkdown記法で簡単にスライドを作成できる機能です！別記事にまとめているので見てみてください！ briboo-pc.hatenablog.jp スニペット…

Markdown記法でスライドを作成できる、VS Codeの拡張機能の「Marp」。Markdown記法だけでスライドを作成できるため、簡単なスライドであればレイアウトや書式を細かく指定することなく勝手に統一して適用してくれるのがすごいですね。しかし、少し複雑なスライドを作ろうとすると、たちまちレイアウトの指定が難しくなるのが難点です。 そこで、本記事ではほぼコピペだけで使いやすくレイアウトを組めるよう、フォーマットを作成してみました！ 本記事で作れるレイアウトの一例 前提 Marpとは？ CSSを適用しよう！ Marpのレイアウトの仕組み 方法 レイアウトの種類 実装 CSSファイルの編集 …

前回の続きになる。今回は、VSCodeのMarkdownプレビュー機能を拡張できる、Markdown Preview Mermaid Supportを紹介する。 インストール 特に難しくないが、VSCodeの拡張機能からMarkdown Preview Mermaid Supportを探してインストールすればいい。 拡張機能を探してインストール 適当にmermaid記法によるコードブロックを用意し、プレビューを押すと プレビューを開く 表示される。 プレビューに図形が描画される コードブロックのハイライトは、Mermaid Markdown Syntax Highlightingの機能になる(…

このテーマの特徴 このテーマを利用する CSS Marpのサンプル このテーマの特徴 このCSSは、「Carnivore Feast」という名前のMarpテーマで、大胆でスタイリッシュなプレゼンテーションを作成するための、ダークで血の色合いがかったデザインを採用しています。 特徴: ダークモード: 全体的にダークな背景と明るいテキストの組み合わせで、モダンで洗練された雰囲気を醸し出しています。 赤いアクセント: 血の色合いがかった赤色をアクセントカラーとして使用し、視覚的なインパクトと力強さを与えています。 階層的な構造: タイトル、コンテンツ、リスト、テキストなどの要素を明確に区別し、視覚的…

以前調べたCursorを使ってMarp記法でスライドを作るのが楽と聞いたので調べた uga-box.hatenablog.com 手順 Cursorエディタはインストール済みとして、拡張機能で「Marp for VS Code」をインストールする 末尾に.mdをつけたファイルを作成 ファイルの先頭に以下のように記述することでMarpが有効になる --- marp: true --- 記法 各スライドは---で区切る タイトルは#を使用 箇条書きは*または-を使用 画像の挿入は``を使用 例： --- marp: true --- # タイトル --- ## トピック1 * ポイント1 * ポイ…

Marpは、シンプルなMarkdownでプレゼンテーションを作成できるオープンソースのツールです。技術者やドキュメント作成に慣れた人にとって、Markdownは手軽で効率的なドキュメント作成言語ですが、その利便性を活かし、スライド作成を簡単にできるのがMarpの特徴です。Marpを使えば、コーディング感覚で美しいプレゼンテーションを作成できます。 なぜMarpを使うのか？ 1. Markdownを使った簡単なスライド作成 Marpは、Markdown形式でスライドを作成できるため、テキストエディタ上で簡単にプレゼンテーションを準備できます。Markdownのシンプルな構文を使い、テキストのスタ…

ドキュメント変換ツールとしてPandocは非常に便利だ。LLMとの組み合わせではmarkdown形式で文章を生成させておいて、パワーポイントにしたりするという使い方は便利すぎる。環境構築が意外とメンドイのでdockerを利用して、どこでも使える様にしておきたい。 いい記事を探すとこちらが見つかりました。ありがとうございます。 mickey-happygolucky.hatenablog.com このままでは、動かなくなっちゃっているので、最近の事情に合わせて細かいところを変更しました。 Dockerfile FROM pandoc/core RUN apk add --no-cache \ g…

2024/05/11 に玉藻公園内 披雲閣で開催された PHP カンファレンス香川 2024 にて、「PHPコードの実行モデルを理解する」を発表してきました。 発表資料 日頃実行している PHP コードがどのように実行されているかをざっくりとイメージして頂くために、PHP コードの実行モデルと、身近な SAPI である php-fpm(mod_php)と php コマンドの実行モデルをご紹介しました。 X や発表後の会話では、やはり php-fpm(mod_php) の Laravel アプリケーションではリクエスト毎に 400 ファイル以上をコンパイルしている（OPcache 未使用の場合）…

教科書の「不等流計算」は理解できるが、実務で汎用される「準二次元不等流計算」がなかなか理解し難い方に向けて、記事を書きました。 多分相当わかりやすいと思いますので、河川行政に関わる方やコンサルの方に読んで頂きたいです。 全4回の第4回目です。 第1回：不等流計算の基礎 第2回：一般断面の不等流計算 第3回：一般断面の不等流計算2-分割断面法（平均流速公式レベル2） 第4回：一般断面の不等流計算3-分割断面法+分割断面間の干渉を考慮（平均流速公式レベル3） 本記事はGitHub、nbviewer、Colab、Marp（スライド形式）でも公開しています。 ※Colabの解説記事はこちら ※Marp…

A: 動きます。

仕事でちょっとした作業があって、人力でやるのは辛いな～と思って考えていたら以下のツールのことを思い出した。 Markdown で書いた文章がそのままパワポ的なスライドになる。 Marp: Markdown Presentation Ecosystem Marp のマイナー機能いろいろ 作者の方による紹介 そういうものがあるということは知っていたつもりだけど、実際に触ってみたら想像よりも良いものだった。 これは便利だね。 VSCode と Marp で A4 マニュアルを作成する方法 他の方の利用例 スライドのサイズなども CSS を書くことで指定できる Word で資料制作 仕事での作業という…