7
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【Marp】Web上で公開されているthemeを読み込む【VSCode】

Posted at

やること

Marp for VS Code環境で、公開されているthemeを読み込む例として、Marp向けのDraculaテーマを読み込んでみます。

やり方

Marp for VS Codeに設定する方法をメインに書きます。

Marp for VS Codeにthemeを加える

まず、Show Quick Pick Of Marp Commands...(二重になっている⊿マーク)から、Open Extension Settingsを選びます。
スクリーンショット 2022-04-11 2.13.29.png

スクロールするとMarkdown › Marp: Themesという項目があるので、追加ボタンを押します。
スクリーンショット 2022-04-11 2.18.26.png

すると、入力欄が開くため、そこに値を入力し、OKを押します。
スクリーンショット 2022-04-11 2.20.42.png

ここにはURLを入力できるため、例ではdracula.cssの生ファイルのURLを設定しています。

もちろん、相対パスや絶対パスで指定することもできます。

確認方法

themeを設定した際に警告が出ていなければOKです。
スクリーンショット 2022-04-11 2.28.17.png

設定が上手くできていない場合、The specified theme "..." is not recognized...というような警告が出ます。
スクリーンショット 2022-04-11 2.26.13.png

公式で紹介されている方法

個人的には上記の方法が最も楽に感じたため説明を省きますが、公式でのインストール方法は以下のURLに公開されています。

補足

Marpには公式で3つのテーマが用意されているので、まずはそちらを確認するのが良いと思います。
ダークテーマも充実しているため、設定が面倒ならこれを使うだけでもいいんじゃないかと思います。

7
8
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
7
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?