從 Markdown 和 HTML 產生 Google 幻燈片。從命令列運行或嵌入到另一個應用程式中。
該專案是作為如何使用 Slides API 的範例而開發的。
雖然它還沒有產生令人驚嘆的美麗甲板,但我們鼓勵您使用此工具快速製作簡報原型。
歡迎貢獻。
對於命令列使用,請全域安裝 md2gslides:
npm install -g md2gslides
然後取得您的 OAuth 用戶端 ID 憑證:
client_id.json
(名稱必須匹配)並保存到~/.md2googleslides
。安裝後,透過執行導入幻燈片:
md2gslides slides.md --title " Talk Title "
這將在您的帳戶中產生新的 Google 投影片,標題為Talk Title
。
注意:第一次執行該命令時,系統將提示您進行授權。 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 規則的子集進行 Markdown。
每張投影片通常由標題表示,後面跟著零個或多個區塊元素。
使用水平線 ( ---
) 開始新投影片。對於第一張投影片,可以省略分隔符號。
以下範例展示如何建立各種版面的投影片:
--- # 這是標題投影片 ## 這裡是你的名字
--- # 這是章節標題
--- # 章節標題和正文投影片 ## 這是一個副標題 這是身體
--- # 標題和正文投影片 這是幻燈片主體。
在標題中加入{.big}
即可製作一張只有一個大點的幻燈片
--- # 這是重點{.big}
在標題上也使用{.big}
並與正文結合使用。
--- # 100% {.大} 這是身體
用{.column}
分隔列。標記必須獨佔一行,前後都有空白。
--- # 兩列佈局 這是左欄 {。 這是右欄
md2googleslides
不編輯或控制任何主題相關選項。只需直接在 Google 投影片上設定您想要的基本主題。即使您將使用--append
選項來重複使用套牌,主題也不會更改。
可以使用圖像標籤將圖像放置在幻燈片上。可以包含多個圖像。單一段落中的多個影像按列排列,多個段落按行排列。
注意:影像目前已縮放並居中以適合幻燈片範本。
--- # 投影片可以有影像 
透過將{.background}
加入到圖像 URL 的末尾來設定幻燈片的背景圖像。
--- # 投影片可以有背景圖片 {.background}
包含帶有修改後的圖像標籤的 YouTube 影片。
--- # 幻燈片可以有視頻 @[youtube](MG8KADiRbOU)
使用 HTML 註解新增投影片的演講者註解。註釋中的文字可能包含用於格式化的降價,但僅允許文字格式。演講者備註中的影片、圖像和表格將被忽略。
--- # 投影片標題 {.background} <!-- 這些是演講者筆記。 -->
允許基本的格式規則,包括:
以下 Markdown 說明了一些常見的樣式。
可使用**粗體**、*斜體*和~~刪除線~~。 有序列表: 1. 第 1 項 1.第2項 1. 第 2.1 條 無序列表: * 第 1 項 * 第 2 項 * 第 2.1 項
此外,也支援內嵌 HTML 標籤的子集進行樣式設定。
<span>
<sup>
<sub>
<em>
<i>
<strong>
<b>
支援與<span>
元素一起使用的 CSS 樣式:
color
background-color
font-weight: bold
font-style: italic
text-decoration: underline
text-decoration: line-through
font-family
font-variant: small-caps
font-size
(必須使用點作為單位)您也可以在 Markdown 元素後使用{style="..."}
屬性來套用樣式。這可以用在標題、內聯元素、程式碼區塊等。
使用:emoji:
在文本中使用 Github 風格的表情符號。
以下範例在投影片的標題和正文中插入表情符號。
### 我:心:貓 :心眼貓:
支援縮排和圍欄程式碼區塊,並具有語法突出顯示。
以下範例呈現突出顯示的程式碼。
### 你好世界 ```javascript console.log('你好世界'); ````
若要變更語法反白主題,請在命令列上指定--style <theme>
選項。支援所有highlight.js 主題。例如,使用github主題
md2gslides slides.md --style github
您也可以對整個區塊套用其他樣式更改,例如更改字體大小:
### 你好世界 ```javascript console.log('你好世界'); ```{style="font-size: 36pt"}
透過 GFM 語法支援表。
注意:在同一張投影片上包含表格和其他區塊元素可能會因元素重疊而產生較差的結果。產生投影片後避免或手動調整版面。
下面在投影片上產生一個 2x5 的表格。
### 美國頂級寵物 動物 |數位 --------|-------- 魚 | 1.42億 貓 | 8800萬 狗 | 7500萬 鳥類 | 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 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 視圖框=“0 0 48 48”> <定義> <路徑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-5.8-13-13s5.8-13 13-13c3.1 19. l6.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-. </defs> <clipPath id="b"> <使用xlink:href =“#a”溢位=“可見”/> </剪輯路徑> <路徑 Clip-path="url(#b)" fill="#EA4335" d="M0 11l17 13 7-6.1L48 14V0H0z"/> <路徑 Clip-path="url(#b)" fill="#34A853" d="M0 37l30-23 7.9 1L48 0v48H0z"/> <路徑 Clip-path="url(#b)" fill="#4285F4" d="M48 48L17 24l-4-3 35-10z"/> </svg> $$$
與本機影像一樣,產生的映像會暫時透過 file.io 提供。
歡迎對其他影像產生器(例如 mermaid、chartjs 等)提出拉取請求!
您也可以透過省略檔案名稱參數將 markdown 透過管道傳輸到工具中。
除了/bin/md2gslides.js
之外,整個過程中都使用 TypeScript 並使用 Babel 進行編譯。 Mocha 和 Chai 用於測試。
在進行任何操作之前,請確保您擁有所有依賴項:
npm install
編譯:
npm run compile
運行單元測試:
npm run test
若要對測試進行 lint/格式化:
npm run lint
有關附加條款,請參閱貢獻。
該程式庫已獲得 Apache 2.0 授權。完整的許可證文字可在許可證中找到。