Work Life Fun

仕事も人生も楽しむ社労士

Marp for VSCodeで独自CSSが効かない場合の対応(marp-cli)

※当サイトはリンクに広告ページが含まれている場合があります

依頼に基づくセミナーの場合はPowerPoint縛りが多いですが、自主開催のセミナーの場合は、簡単・手軽、そして検索・バージョン管理が可能なMarpを愛用しています

Marp for VSCodeで独自CSSを使う方法は以下で紹介していますが、なぜか独自CSSが効かない場合があります。

関連:Marpで独自CSSを使う方法

Marp for VSCodeで独自CSSが効かない場合はmarp-cli

色々調べても原因がわからなかったので、以下の記事を参考に、Marp for VSCodeの利用を諦め、marp-cliを用いることにしました。

参考:marp自作テーマが適用できない人はmarp-cliを使えばいいと思う

ちなみに、CLIとは、Command Line Interface(コマンドラインインターフェース)の略です。

marp-cliのインストール方法は、上の参考記事そのままなので、この記事では割愛します。

インストールが完了した後は以下を実行すれば、プレビュー画面が出ます。

$ marp --preview --theme ./marp-themes/mystyle.css test.md

以下はプレビュー画面

コマンドを補足しておくと、

  • –preview:プレビュー画面の表示
  • –theme ./marp-themes/mystyle.css:適用するCSSの部分
  • test.md:marpを実行するファイル

言葉で表現すると、

  • テーマは「marp-themes」フォルダにある「mystyle.css」を適用して
  • 「test.md」をプレビューで表示してね

ということです。

あとは、Markdown形式でテキストを書いていけば、リアルタイムでスライド資料が変更されていきます。

Marpを使うようになると、PowerPointやKeynoteで資料を作るのが面倒になります。。。😅

【無料】効率的に人事労務の情報を入手しませんか?
  • 毎年のように改正される労働法令への対応に頭を悩ませている
  • 総務や経理などの他の業務を兼務しているので、人事労務業務だけに時間を割けない

といった悩みを抱える企業の経営者・人事労務担当者向けに、公開型のブログでは書けない、本音を交えた人事労務に関する情報・ノウハウ、時期的なトピックに関するメールマガジンを「無料」で配信しています。

過去の配信分は公開しません。

情報が必要な方は、いますぐ以下のフォームから購読の登録をしてください。購読して不要と思ったら簡単に解除できますのでご安心ください。


up_line