md2googleslides
0.5
マークダウンと HTML から Google スライドを生成します。コマンドラインから実行するか、別のアプリケーションに埋め込みます。
このプロジェクトは、Slides API の使用方法の例として開発されました。
まだ驚くほど美しいデッキは作成されていませんが、プレゼンテーションのプロトタイピングを迅速に作成するためにこのツールを使用することをお勧めします。
貢献は大歓迎です。
コマンドラインで使用する場合は、md2gslides をグローバルにインストールします。
npm install -g md2gslides次に、OAuth クライアント ID 認証情報を取得します。
client_id.json (名前は一致する必要があります) にコピーし、 ~/.md2googleslidesに保存します。インストール後、次のコマンドを実行してスライドをインポートします。
md2gslides slides.md --title " Talk Title "これにより、アカウントにTalk Titleタイトルの新しい Google スライドが生成されます。
注: コマンドを初めて実行すると、認証を求めるプロンプトが表示されます。 OAuth トークンの資格情報は、 ~/.md2googleslides/credentials.jsonという名前のファイルにローカルに保存されます。
上記のコメントを実行するたびに、新しいスライドデッキが生成されます。まったく同じデッキで作業するには、すでに生成されたスライドの ID を取得するだけです。たとえば、次のコマンドを使用できます。
# To reuse deck available at: https://docs.google.com/presentation/d/<some id>/edit#
md2gslides slides.md --title "Talk Title" --append <some id> --erase
md2gslides は、マークダウンに CommonMark および Github Flavored Markdown ルールのサブセットを使用します。
各スライドは通常、ヘッダーとそれに続く 0 個以上のブロック要素によって表されます。
横罫線 ( --- ) を使用して新しいスライドを開始します。最初のスライドではセパレータを省略することもできます。
次の例は、さまざまなレイアウトのスライドを作成する方法を示しています。
---
# これはタイトルスライドです
## ここにあなたの名前を入れてください
---
# これはセクションのタイトルです
---
# セクションのタイトルと本文のスライド
## これはサブタイトルです
これが本体です
---
# タイトルと本文のスライド
こちらはスライド本体です。
タイトルに{.big}を追加すると、大きなポイントが 1 つだけ記載されたスライドが作成されます
---
# ここが重要なポイントです {.big}
ヘッダーでも本文と組み合わせて{.big}を使用します。
---
# 100% {.big}
これが本体です
列は{.column}で区切ります。マーカーは、前後に空白を入れて単独の行に表示する必要があります。
---
# 2 列レイアウト
こちらは左の列です
{。カラム}
これは右の列です
md2googleslidesテーマ関連のオプションを編集または制御しません。 Google スライド上で必要な基本テーマを直接設定するだけです。 --appendオプションを使用してデッキを再利用しても、テーマは変更されません。
画像タグを使用してスライドに画像を配置できます。複数の画像を含めることもできます。 1 つの段落内の複数の画像は列に配置され、複数の段落は行に配置されます。
注: 現在、画像はスライド テンプレートに合わせて拡大縮小され、中央に配置されています。
---
# スライドには画像を含めることができます
画像 URL の末尾に{.background}を追加して、スライドの背景画像を設定します。
---
# スライドには背景画像を含めることができます
{.background}
画像タグを変更した YouTube 動画を含めます。
---
# スライドにはビデオを含めることができます
@[youtube](MG8KADiRbOU)
HTML コメントを使用してスライドにスピーカー ノートを含めます。コメント内のテキストには書式設定のためのマークダウンを含めることができますが、許可されるのはテキスト書式のみです。ビデオ、画像、表はスピーカー ノート内では無視されます。
---
# スライドのタイトル
{.background}
<!--
これらはスピーカーノートです。
-->
次のような基本的な書式設定ルールが許可されます。
次のマークダウンは、いくつかの一般的なスタイルを示しています。
**太字**、*斜体*、および ~~取り消し線~~ を使用できます。 順序付きリスト: 1. 項目 1 1. 項目 2 1. 項目 2.1 順序なしリスト: * 項目 1 * 項目 2 * 項目 2.1
さらに、インライン HTML タグのサブセットがスタイル設定用にサポートされています。
<span><sup><sub><em><i><strong><b> <span>要素で使用するためにサポートされている CSS スタイル:
colorbackground-colorfont-weight: boldfont-style: italictext-decoration: underlinetext-decoration: line-throughfont-familyfont-variant: small-capsfont-size (単位にはポイントを使用する必要があります)マークダウン要素の後に{style="..."}属性を使用してスタイルを適用することもできます。これはヘッダー、インライン要素、コード ブロックなどで使用できます。
:emoji:を使用して、テキスト内で Github スタイルの絵文字を使用します。
次の例では、スライドのヘッダーと本文に絵文字を挿入します。
### 私:心:猫 :heart_eyes_cat:
インデントされたコード ブロックとフェンスで囲まれたコード ブロックの両方がサポートされており、構文が強調表示されます。
次の例では、強調表示されたコードをレンダリングします。
＃＃＃ こんにちは世界
```JavaScript
console.log('Hello world');
「」
構文ハイライトのテーマを変更するには、コマンド ラインで--style <theme>オプションを指定します。すべてのhighlight.jsテーマがサポートされています。たとえば、github テーマを使用するには
md2gslides slides.md --style githubフォント サイズの変更など、追加のスタイル変更をブロック全体に適用することもできます。
＃＃＃ こんにちは世界
```JavaScript
console.log('Hello world');
```{style="font-size: 36pt"}
テーブルは GFM 構文を介してサポートされます。
注: 同じスライドに表やその他のブロック要素を含めると、要素が重なり合って悪い結果が生じる可能性があります。スライドの生成後にレイアウトを回避するか、手動で調整します。
次の例では、スライド上に 2x5 の表を生成します。
### 米国で人気のペット 動物 |番号 -------|---------- 魚 | 1億4,200万 猫 | 猫8,800万 犬 | 7,500万 鳥 | 1600万
ローカル パスを参照する画像は、一時的に file.io にアップロードされ、ホストされます。 File.io は、アップロード ファイルへの短期間のランダムな URL を生成し、使用後すぐにコンテンツを削除する一時的なファイル サービスです。
ローカル画像はサードパーティにアップロードされるため、この機能を使用するには明示的なオプトインが必要です。画像のアップロードをオプトインするには、 --use-fileioオプションを含めます。これは、ファイルベースの画像だけでなく、数式や SVG などの自動的にラスター化されたコンテンツにも当てはまります。
スライドには、データに$$$フェンスで囲まれたブロックを使用して、生成された画像を含めることもできます。現在サポートされている生成画像は、数式 (TeX および MathML) と SVG です。ラスター化された画像はローカル画像のように扱われ、 --use-fileioオプションを介してサードパーティのサービスに画像をアップロードするにはオプトインが必要です。
TeX を使用する:
# 数学はどうですか? $$$ 数学 cos (2theta) = cos^2 theta - sin^2 theta $$$
SVG
# それとも SVG ですか?
$$$ SVG
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 48 48">
<定義>
<path id="a" d="M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z"/>
</defs>
<clipPath id="b">
<use xlink:href="#a" overflow="visible"/>
</クリップパス>
<path Clip-path="url(#b)" fill="#EA4335" d="M0 11l17 13 7-6.1L48 14V0H0z"/>
<path Clip-path="url(#b)" fill="#34A853" d="M0 37l30-23 7.9 1L48 0v48H0z"/>
<path Clip-path="url(#b)" fill="#4285F4" d="M48 48L17 24l-4-3 35-10z"/>
</svg>
$$$
ローカル イメージと同様に、生成されたイメージは file.io 経由で一時的に提供されます。
他の画像ジェネレーター (mermaid、chartjs など) のプル リクエストは大歓迎です。
ファイル名引数を省略して、マークダウンをツールにパイプすることもできます。
/bin/md2gslides.jsを除き、TypeScript が全体で使用され、Babel でコンパイルされます。テストにはモカとチャイを使用します。
何よりもまず、すべての依存関係があることを確認してください。
npm installコンパイルするには:
npm run compile単体テストを実行するには:
npm run testテストを lint/フォーマットするには:
npm run lint追加の条件については、「貢献」を参照してください。
このライブラリは、Apache 2.0 に基づいてライセンスされています。ライセンスの完全なテキストは LICENSE で入手できます。
