0
Help us understand the problem. What are the problem?
Organization

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

やること

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つのテーマが用意されているので、まずはそちらを確認するのが良いと思います。
ダークテーマも充実しているため、設定が面倒ならこれを使うだけでもいいんじゃないかと思います。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
0
Help us understand the problem. What are the problem?