从 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.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"> <使用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 许可。完整的许可证文本可在许可证中找到。