1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

JetBrains IDE × Marp でMarkdownスライドを快適編集!リアルタイムプレビュー環境の作り方

Posted at

Marpは、Markdownで手軽にスライド資料を作成できるオープンソースツールです。VS Code向けの拡張機能(Marp for VS Code - Visual Studio Marketplace)がよく知られていますが、JetBrains系IDEでもCLIを活用することで、リアルタイムプレビューやPDF出力といった便利な機能をローカル環境で再現できます。
本記事では、JetBrains IDEとMarp CLIを組み合わせた活用方法をご紹介します。

目次

  • 使用環境と前提条件
  • JetBrains IDEでのMarpプレビュー手順
  • 参考文献

使用環境と前提条件

今回の手順では、以下のバージョンと環境を前提としています。

  • macOS Sequoia 15.4.1
  • marp-cli v4.1.2
  • JetBrains IDE(例:IntelliJ IDEA、RubyMineなど)

Marp CLIのインストール

ターミナルから以下のコマンドでMarp CLIをインストールします。

$ brew install marp

インストール後、marpコマンドが使用可能になります。
その他のインストール方法は、こちら

JetBrains IDEでのMarpプレビュー手順

JetBrains IDEでMarpを利用してMarkdownファイルをプレビューする手順は以下のとおりです。

1. Markdownファイルの作成

拡張子が .md のMarkdownファイル(例:slide.md)を作成します。

2. CLIでスライドをウォッチする

Marp CLIを使って、対象のMarkdownファイルをウォッチ状態にします。これにより、ファイル保存のたびにスライドが自動更新されます。

$ marp -w slide.md

3. JetBrains IDEでプレビュー表示する

  1. ウォッチ中に生成されるHTMLファイル(例:slide.html)をプロジェクトビューから選択します。
    スクリーンショット 0007-05-17 12.18.04.png

  2. IDE内の「ビルトインプレビュー」機能を使ってスライドを確認できます。
    スクリーンショット 0007-05-17 12.20.10.png

4. Markdownの編集と即時反映

Markdown(例:slide.md)を編集して Command + S で保存すると、自動的に生成ファイルが更新され、プレビューにも即時反映されます。

画面キャプチャ.gif

参考文献

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?