Generate Google Slides from markdown & HTML. Run from the command line or embed in another application.
This project was developed as an example of how to use the Slides API.
While it does not yet produce stunningly beautiful decks, you are encouraged to use this tool for quickly prototyping presentations.
Contributions are welcome.
For command line use, install md2gslides globally:
npm install -g md2gslides
After installing, import your slides by running:
md2gslides slides.md
The first time the command is run you will be prompted for authorization. Credentials
will be stored locally in a file named ~/.credentials/md2gslides.json.
md2gslides uses a subset of the CommonMark and Github Flavored Markdown rules for markdown.
Each slide is typically represented by a header, followed by zero or more block elements.
Begin a new slide with a horizontal rule (---). The separator
may be omitted for the first slide.
The following examples show how to create slides of various layouts:
---
# This is a title slide
## Your name here
---
# This is a section title
---
# Section title & body slide
## This is a subtitle
This is the body
---
# Title & body slide
This is the slide body.
Add {.big} to the title to make a slide with one big point
---
# This is the main point {.big}
Use {.big} on a header in combination with a body too.
---
# 100% {.big}
This is the body
Separate columns with {.column}. The marker must appear
on its own line with a blank both before and after.
---
# Two column layout
This is the left column
{.column}
This is the right column
Images can be placed on slides using image tags. Multiple images can be included. Mulitple images in a single paragraph are arranged in columns, mutiple paragraphs arranged as rows.
Note: Images are currently scaled and centered to fit the slide template.
---
# Slides can have images
Set the background image of a slide by adding {.background} to
the end of an image URL.
---
# Slides can have background images
{.background}
Include YouTube videos with a modified image tag.
---
# Slides can have videos
@[youtube](MG8KADiRbOU)
Include speaker notes for a slide using HTML comments. Text inside the comments may include markdown for formatting, though only text formatting is allowed. Videos, images, and tables are ignored inside speaker notes.
---
# Slide title
{.background}
<!--
These are speaker notes.
-->
Basic formatting rules are allowed, including:
The following markdown illustrates a few common styles.
**Bold**, *italics*, and ~~strikethrough~~ may be used. Ordered lists: 1. Item 1 1. Item 2 1. Item 2.1 Unordered lists: * Item 1 * Item 2 * Item 2.1
Additionally, a subset of inline HTML tags are supported for styling.
<span><sup><sub><em><i><strong><b>Supported CSS styles for use with <span> elements:
colorbackground-colorfont-weight: boldfont-style: italictext-decoration: underlinetext-decoration: line-throughfont-familyfont-variant: small-capsfont-size (must use points for units)You may also use {style="..."} attributes
after markdown elements to apply styles. This can be used on headers, inline
elements, code blocks, etc.
Use Github style emoji in your text using
the :emoji:.
The following example inserts emoji in the header and body of the slide.
### I :heart: cats :heart_eyes_cat:
Both indented and fenced code blocks are supported, with syntax highlighting.
The following example renders highlighted code.
### Hello World
```javascript
console.log('Hello world');
```
To change the syntax highlight theme specify the --style <theme> option on the
command line. All highlight.js themes
are supported. For example, to use the github theme
md2gslides slides.md --style github
You can also apply additional style changes to the entire block, such as changing the font size:
### Hello World
```javascript
console.log('Hello world');
```{style="font-size: 36pt"}
Tables are supported via GFM syntax.
Note: Including tables and other block elements on the same slide may produce poor results with overlapping elements. Either avoid or manually adjust the layout after generating the slides.
The following generates a 2x5 table on the slide.
### Top pets in the United States Animal | Number -------|-------- Fish | 142 million Cats | 88 million Dogs | 75 million Birds | 16 million
Images referencing local paths temporarily uploaded and hosted to file.io. File.io is an emphemeral file serving service that generates short-lived random URLs to the upload file and deletes content shortly after use.
Since local images are uploaded to a thrid party, explicit opt-in is required to use this feature.
Include the --use-fileio option to opt-in to uploading images. This applies to file-based images as well
as automatically rasterized content like math expressions and SVGs.
Slides can also include generated images, using $$$ fenced blocks
for the data. Currently supported generated images are math expression (TeX
and MathML) as well as SVG. Rasterized images are treated like local images are require
opt-in to uploading images to a 3rd party service via the --use-fileio option.
Using TeX:
# How about some math? $$$ math \cos (2\theta) = \cos^2 \theta - \sin^2 \theta $$$
SVG
# Or some SVG?
$$$ svg
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 48 48">
<defs>
<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"/>
</clipPath>
<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>
$$$
Like local images, generated images are temporarily served via file.io.
Pull requests for other image generators (e.g. mermaid, chartjs, etc.) are welcome!
You can also pipe markdown into the tool by omitting the file name argument.
With the exception of /bin/md2gslides.js, TypeScript is used throughout and compiled
with Babel. Mocha and Chai
are used for testing.
To compile:
npm run compile
To run unit tests:
npm run test
To lint/format tests:
npm run lint
See CONTRIBUTING for additional terms.
This library is licensed under Apache 2.0. Full license text is available in LICENSE.
FAQs
Convert Markdown to Google Slides
The npm package md2gslides receives a total of 27 weekly downloads. As such, md2gslides popularity was classified as not popular.
We found that md2gslides demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
Security News
This episode explores the hard problem of reachability analysis, from static analysis limits to handling dynamic languages and massive dependency trees.
Security News
/Research
Malicious Nx npm versions stole secrets and wallet info using AI CLI tools; Socket’s AI scanner detected the supply chain attack and flagged the malware.