Coder Social home page Coder Social logo

marp-team / marp-cli Goto Github PK

View Code? Open in Web Editor NEW
1.7K 12.0 96.0 12.54 MB

A CLI interface for Marp and Marpit based converters

License: MIT License

JavaScript 2.22% TypeScript 86.69% CSS 0.01% Dockerfile 0.27% Pug 0.66% SCSS 10.12% Shell 0.03%
markdown deck presentation slides marp cli marpit

marp-cli's Introduction

@marp-team/marp-cli

CircleCI GitHub Workflow Status Codecov npm Docker LICENSE

A CLI interface, for Marp (using @marp-team/marp-core) and any slide deck converter based on Marpit framework.

It can convert Marp / Marpit Markdown files into static HTML / CSS, PDF, PowerPoint document, and image(s) easily.

Try it now!

npx

npx (npm exec) is the best way to use the latest Marp CLI if you wanted one-shot Markdown conversion without install. Just run below if you have installed Node.js v16 and later.

# Convert slide deck into HTML
npx @marp-team/marp-cli@latest slide-deck.md
npx @marp-team/marp-cli@latest slide-deck.md -o output.html

# Convert slide deck into PDF
npx @marp-team/marp-cli@latest slide-deck.md --pdf
npx @marp-team/marp-cli@latest slide-deck.md -o output.pdf

# Convert slide deck into PowerPoint document (PPTX)
npx @marp-team/marp-cli@latest slide-deck.md --pptx
npx @marp-team/marp-cli@latest slide-deck.md -o output.pptx

# Watch mode
npx @marp-team/marp-cli@latest -w slide-deck.md

# Server mode (Pass directory to serve)
npx @marp-team/marp-cli@latest -s ./slides

ℹ️ You have to install Google Chrome or Microsoft Edge to convert slide deck into PDF, PPTX, and image(s).

Docker

Don't you like installing Node.js and Chrome to local? We have an official Docker image marpteam/marp-cli ready to use CLI.

Please refer how to use at Docker Hub.

Install

Use package manager

You can use the package manager to install and update Marp CLI easily.

Disclaimer: Package manifests are maintained by the community, not Marp team.

macOS: Homebrew

brew install marp-cli

Windows: Scoop

scoop install marp

Local installation

We recommend to install Marp CLI into your Node.js project. You may control the CLI version (and engine if you want) exactly.

ℹ️ Marp CLI is working only with actively supported Node.js versions, so Node.js v16 and later is required when installing into your Node.js project.

npm install --save-dev @marp-team/marp-cli

The installed marp command is available in npm-scripts or npx marp.

Global installation

You can install with -g option if you want to use marp command globally.

npm install -g @marp-team/marp-cli

We also provide standalone binaries for Linux, macOS, and Windows. These have bundled Marp CLI with Node.js binary, so no need to install Node.js separately.

⏩ Download the latest standalone binary from release page.

Basic usage

Convert to HTML

The passed markdown will be converted to HTML file by default. In the below example, a converted slide-deck.html will output to the same directory.

marp slide-deck.md

You can change the output path by --output (-o) option.

marp slide-deck.md -o output.html

Marp CLI supports converting multiple files by passing multiple paths, directories, and glob patterns. In this case, --output option cannot use.

When you want to output the converted result to another directory with keeping the origin directory structure, you can use --input-dir (-I) option. --output option would be available for specify the output directory.

Convert to PDF (--pdf)

If you passed --pdf option or the output filename specified by --output (-o) option ends with .pdf, Marp CLI will try to convert Markdown into PDF file through the browser.

marp --pdf slide-deck.md
marp slide-deck.md -o converted.pdf

All kind of conversions except HTML require to install Google Chrome, Microsoft Edge, or Chromium (flavored) browser. When an unexpected problem has occurred while converting, please update your browser to the latest version or try installing Google Chrome Canary.

ℹ️ If you want to use Chromium or flavored browsers to convert, you have to specify the path to the browser binary through CHROME_PATH environment variable. For example: CHROME_PATH=$(which brave) marp --pdf slide-deck.md

PDF output options

  • --pdf-notes: Add PDF note annotations to the lower left when the slide page has Marpit presenter notes.
  • --pdf-outlines: Add PDF outlines/bookmarks.

--pdf-outlines will make outlines based on slide pages and Markdown headings by default. If necessary, you may prevent making outlines from one of them, by setting --pdf-outlines.pages=false or --pdf-outlines.headings=false.

Convert to PowerPoint document (--pptx)

Do you want more familiar way to present and share your deck? PPTX conversion to create PowerPoint document is available by passing --pptx option or specify the output path with PPTX extension.

marp --pptx slide-deck.md
marp slide-deck.md -o converted.pptx

A created PPTX includes rendered Marp slide pages and the support of Marpit presenter notes. It can open with PowerPoint, Keynote, Google Slides, LibreOffice Impress, and so on...

ℹ️ A converted PPTX consists of pre-rendered images. Please note that contents would not be able to modify or re-use in PowerPoint.

Convert to PNG/JPEG image(s)

Multiple images (--images)

You can convert the slide deck into multiple images when specified --images [png|jpeg] option.

# Convert into multiple PNG image files
marp --images png slide-deck.md

# Convert into multiple JPEG image files
marp --images jpeg slide-deck.md

Output files have a suffix of page number, like slide-deck.001.png, slide-deck.002.png, and so on.

Title slide (--image)

When you passed --image option or specified the output path with PNG/JPEG extension, Marp CLI will convert only the first page (title slide) of the targeted slide deck into an image.

# Convert the title slide into an image
marp --image png slide-deck.md
marp slide-deck.md -o output.png

It would be useful for creating Open Graph image that can specify with image global directive and --og-image option.

Scale factor

You can set the scale factor for rendered image(s) through --image-scale option. It is useful for making high-resolution image from the slide.

# Generate high-resolution image of the title slide
marp slide-deck.md -o [email protected] --image-scale 2

ℹ️ --image-scale is not affect to the actual size of presentation.

It is also available for PPTX conversion. By default, Marp CLI will use 2 as the default scale factor in PPTX to suppress deterioration of slide rendering in full-screen presentation.

Export presenter notes (--notes)

You can export presenter notes in Marp / Marpit Markdown as a text file by using --notes option or specifying the output path with TXT extension.

# Export presenter notes as a text
marp --notes slide-deck.md
marp slide-deck.md -o output.txt

Security about local files

Because of the security reason, PDF, PPTX and image(s) conversion cannot use local files by default.

Marp CLI would output incompleted result with warning if the blocked local file accessing is detected. We recommend uploading your assets to online.

If you really need to use local files in these conversion, --allow-local-files option helps to find your local files. Please use only to the trusted Markdown because there is a potential security risk.

marp --pdf --allow-local-files slide-deck.md

Conversion modes

Watch mode (--watch / -w)

Marp CLI will observe a change of Markdown and using theme CSS when passed with --watch (-w) option. The conversion will be triggered whenever the content of file is updated.

While you are opening the converted HTML in browser, it would refresh the opened page automatically.

Server mode (--server / -s)

Server mode supports on-demand conversion by HTTP request. We require to pass --server (-s) option and a directory to serve.

In this mode, the converted file outputs as the result of accessing to server, and not to disk. You can set the server port by setting the environment variable PORT, for example PORT=5000 marp -s ./slides would listen on port number 5000.

You would get the converted PDF, PPTX, PNG, and JPEG by adding corresponded query string when requesting. e.g. http://localhost:8080/deck-a.md?pdf returns converted PDF.

index.md / PITCHME.md

Marp CLI server will provide the list of served files by default, but you can place the default Markdown deck like a common web server's index.html.

Place Markdown named index.md or PITCHME.md (GitPitch style) to served directory. It would be redirected just accessing to http://localhost:8080/.

Preview window (--preview / -p)

When conversions were executed together with --preview (-p) option, Marp CLI will open preview window(s) to check the converted result immediately.

Unlike opening with browser, you may present deck with the immersive window. Watch mode is automatically enabled while using preview window.

ℹ️ --preview option cannot use when you are using Marp CLI through official docker image.

Template

You can choose a built-in HTML templates by --template option. Default template is bespoke.

marp --template bespoke slide-deck.md

bespoke template (default)

The bespoke template is using Bespoke.js as the name implies. It has several features to be useful in a real presentation. A few features may control by CLI options.

Features

  • Navigation: Navigate the deck through keyboard and swipe geasture.
  • Fullscreen: Toggle fullscreen by hitting f / F11 key.
  • On-screen controller: There is a touch-friendly OSC. You may also disable by --bespoke.osc=false if unneccesary.
  • Fragmented list: Recognize Marpit's fragmented list and appear list one-by-one if used * and 1) as the bullet marker.
  • Presenter view: Open presenter view in external window by hitting p key.
  • Progress bar (optional): By setting --bespoke.progress option, you can add a progress bar on the top of the deck.
  • Slide transitions: Support transitions (transition local directive) powered by View Transitions API.

ℹ️ Presenter view may be disabled if the browser restricted using localStorage (e.g. Open HTML in the old Safari with private browsing, or open the local HTML file with Chrome that has blocked 3rd party cookies in chrome://settings/content/cookies).

Docs

bare template

The bare template is a primitive template, and there is no extra features. It only has minimum assets to give your presentation with browser.

Zero-JS slide deck

When the conversion engine is changed to Marpit framework by setting engine option, it would not use any scripts. Even then, it has enough to use for the browser-based presentation.

marp --template bare --engine @marp-team/marpit slide-deck.md

Metadata

Through global directives or CLI options, you can set metadata for a converted HTML, PDF, and PPTX slide deck.

Global directives CLI option Description Available in
title --title Define title of the slide deck HTML, PDF, PPTX
description --description Define description of the slide HTML, PDF, PPTX
author --author Define author of the slide deck HTML, PDF, PPTX
keywords --keywords Define comma-separated keywords HTML, PDF
url --url Define canonical URL * HTML
image --og-image Define Open Graph image URL HTML

*: If could not parse a specified value as valid, the URL will be ignored.

Marp CLI supports additional global directives to specify metadata in Markdown. You can define meta values in Markdown front-matter.

---
title: Marp slide deck
description: An example slide deck created by Marp CLI
author: Yuki Hattori
keywords: marp,marp-cli,slide
url: https://marp.app/
image: https://marp.app/og-image.jpg
---

# Marp slide deck

By CLI option

Marp CLI prefers CLI option to global directives. You can override metadata values by --title, --description, --author, --keywords, --url, and --og-image.

Theme

Override theme

You can override theme you want to use by --theme option. For example to use Gaia built-in theme in Marp Core:

marp --theme gaia

Use custom theme

A custom theme created by user also can use easily by passing the path of CSS file.

marp --theme custom-theme.css

ℹ️ Normally Marpit theme CSS requires @theme meta comment, but it's not required in this usage.

Theme set

--theme-set option has to specify theme set composed by multiple theme CSS files. The registed themes are usable in Marpit's theme directive.

# Multiple theme CSS files
marp --theme-set theme-a.css theme-b.css theme-c.css -- deck-a.md deck-b.md

# Theme directory
marp --theme-set ./themes -- deck.md

Engine

Marp CLI is calling the Marpit framework based converter as "Engine". Normally we use the bundled Marp Core, but you may swap the conversion engine to another Marpit based engine through --engine option.

You can use Marp (and compatible markdown-it) plugins while converting, or completely swap the converter to the other Marpit-based engine which published to npm.

Use Marpit framework

For example, you can convert Markdown with using the pure Marpit framework.

# Install Marpit framework
npm i @marp-team/marpit

# Specify engine to use Marpit
marp --engine @marp-team/marpit marpit-deck.md

Notice that Marpit has not provided theme. It would be good to include inline style in Markdown, or pass CSS file by --theme option.

If you want to use the Marpit-based custom engine by the module name, the specified module must be exporting a class inherited from Marpit as the default export.

Functional engine

When you specified the path to JavaScript file (.js, .cjs, or .mjs) in --engine option, you may use more customized engine by a JavaScript function.

Spec

The functional engine should export a function as the default export, which should have a single argument representing the constructor option of Marpit/Marp Core.

The function must return a class inherited from Marpit, or an instance of Marpit-based engine made by the parameter passed by argument.

// engine.mjs (ES modules)
import { MarpitBasedEngine } from 'marpit-based-engine'

export default () => MarpitBasedEngine // Return a class inherited from Marpit
// engine.cjs (CommonJS)
const { MarpitBasedEngine } = require('marpit-based-engine')

module.exports = function (constructorOptions) {
  // Return an instance of Marpit initialized by passed constructor options
  return new MarpitBasedEngine(constructorOptions)
}

This function can return Promise object so you can use async function too.

export default async (constructorOptions) => {
  const { MarpitBasedEngine } = await import('marpit-based-engine')
  return new MarpitBasedEngine(constructorOptions)
}

ℹ️ Currently ES Modules can resolve only when using Marp CLI via Node.js. The standalone binary cannot resolve ESM due to vercel/pkg#1291.

marp getter property

Marp CLI also exposes marp getter property to the parameter. It returns a prepared instance of the built-in Marp Core engine, so you can apply several customizations to Marp engine with simple declarations.

const marpPlugin = require('marp-plugin-foo')
const andMorePlugin = require('marp-plugin-bar')

module.exports = ({ marp }) => marp.use(marpPlugin).use(andMorePlugin)

It allows converting Markdown with additional syntaxes that were provided by Marp (or compatible markdown-it) plugins.

// engine.mjs
import markdownItMark from 'markdown-it-mark'

export default ({ marp }) => marp.use(markdownItMark)
# Install markdown-it-mark into your project
npm i markdown-it-mark --save

# Specify the path to functional engine
marp --engine ./engine.mjs slide-deck.md

The customized engine will convert ==marked== to <mark>marked</mark>.

Confirm engine version

By using --version (-v) option, you may confirm the version of engine that is expected to use in current configuration.

$ marp --version
@marp-team/marp-cli v1.x.x (w/ @marp-team/marp-core v2.x.x)

Use specific version of Marp Core

Marp CLI prefers to use an installed core to local project by user than the bundled.

If the current project has installed @marp-team/marp-core individually, it would show its version and the annotation: w/ user-installed @marp-team/marp-core vX.X.X or w/ customized engine.

$ npm i @marp-team/marp-cli @marp-team/marp-core@^3.2.0 --save-dev
$ npx marp --version
@marp-team/marp-cli v2.x.x (w/ user-installed @marp-team/marp-core v3.2.0)

Configuration file

Marp CLI can be configured options with file, such as marp.config.js, marp.config.mjs (ES Modules), marp.config.cjs (CommonJS), .marprc (JSON / YAML), and marp section of package.json.

It is useful to configure settings for the whole of project.

// package.json
{
  "marp": {
    "inputDir": "./slides",
    "output": "./public",
    "themeSet": "./themes"
  }
}
# .marprc.yml
allowLocalFiles: true
options:
  looseYAML: false
  markdown:
    breaks: false
pdf: true
// marp.config.mjs
import markdownItContainer from 'markdown-it-container'

export default {
  // Customize engine on configuration file directly
  engine: ({ marp }) => marp.use(markdownItContainer, 'custom'),
}

By default we use configuration file that is placed on current directory, but you may also specify the path for a configuration file by --config-file (--config / -c) option.

If you want to prevent looking up a configuration file, you can pass --no-config-file (--no-config) option.

ℹ️ Currently ES Modules can resolve only when using Marp CLI via Node.js. The standalone binary cannot resolve ESM due to vercel/pkg#1291.

Options

Key Type CLI option Description
allowLocalFiles boolean --allow-local-files Allow to access local files from Markdown while converting PDF (NOT SECURE)
author string --author Define author of the slide deck
bespoke object Setting options for bespoke template
osc boolean --bespoke.osc [Bespoke] Use on-screen controller (true by default)
progress boolean --bespoke.progress [Bespoke] Use progress bar (false by default)
transition boolean --bespoke.transition [Bespoke] Use transitions (Only in browsers supported View Transitions API: true by default)
description string --description Define description of the slide deck
engine string | Class | Function --engine Specify Marpit based engine
html boolean | object --html Enable or disable HTML tags (Configuration file can pass the whitelist object if you are using Marp Core)
image png | jpeg --image Convert the first slide page into an image file
images png | jpeg --images Convert slide deck into multiple image files
imageScale number --image-scale The scale factor for rendered images (1 by default, or 2 for PPTX conversion)
inputDir string --input-dir -I The base directory to find markdown and theme CSS
jpegQuality number --jpeg-quality Setting JPEG image quality (85 by default)
keywords string | string[] --keywords Define keywords for the slide deck (Accepts comma-separated string and array of string)
lang string Define the language of converted HTML
notes boolean --notes Convert slide deck notes into a text file
ogImage string --og-image Define Open Graph image URL
options object The base options for the constructor of engine
output string --output -o Output file path (or directory when input-dir is passed)
pdf boolean --pdf Convert slide deck into PDF
pdfNotes boolean --pdf-notes Add presenter notes to PDF as annotations
pdfOutlines boolean | object --pdf-outlines Add outlines (bookmarks) to PDF
pages boolean --pdf-outlines.pages Make PDF outlines from slide pages (true by default when pdfOutlines is enabled)
headings boolean --pdf-outlines.headings Make PDF outlines from Markdown headings (true by default when pdfOutlines is enabled)
pptx boolean --pptx Convert slide deck into PowerPoint document
preview boolean --preview -p Open preview window
server boolean --server -s Enable server mode
template bare | bespoke --template Choose template (bespoke by default)
theme string --theme Override theme by name or CSS file
themeSet string | string[] --theme-set Path to additional theme CSS files
title string --title Define title of the slide deck
url string --url Define canonical URL
watch boolean --watch -w Watch input markdowns for changes

Some of options that cannot specify through CLI options can be configured by file.

For example, options field can set the base options for the constructor of the used engine. You can fine-tune constructor options for the engine, Marp Core / Marpit.

Example: Customize engine's constructor option
{
  "options": {
    "markdown": {
      "breaks": false
    },
    "minifyCSS": false
  }
}

This configuration will set the constructor option for Marp Core as specified:

⚠️ Some options may be overridden by used template.

Auto completion

For getting the power of auto completion for the config, such as IntelliSense, you can annotate the config object through JSDoc, with Marp CLI's Config type.

/** @type {import('@marp-team/marp-cli').Config} */
const config = {
  // ...
}

export default config

Or you can use Vite-like defineConfig helper from Marp CLI instead.

import { defineConfig } from '@marp-team/marp-cli'

export default defineConfig({
  // ...
})

Config type with custom engine

If you've swapped the engine into another Marpit based engine, you can provide better suggestion for options field by passing the engine type to generics.

/** @type {import('@marp-team/marp-cli').Config<typeof import('@marp-team/marpit').Marpit>} */
const config = {
  engine: '@marp-team/marpit',
  options: {
    // Suggest only Marpit constructor options, not Marp Core
  },
}

export default config

TypeScript (marp.config.ts)

If you installed typescript into your local project together with Marp CLI, you can write a config by TypeScript marp.config.ts. Marp CLI will try to transpile .ts with the project configuration tsconfig.json.

In TypeScript configuration, you can specify the custom engine as the generics for defineConfig helper, like this:

// marp.config.ts
import { Marpit } from '@marp-team/marpit'
import { defineConfig } from '@marp-team/marp-cli'

export default defineConfig<typeof Marpit>({
  engine: Marpit,
  options: {
    // Suggest only Marpit constructor options
  },
})

API (EXPERIMENTAL)

You can use Marp CLI through Node.js if installed Marp CLI into your local project.

const { marpCli } = require('@marp-team/marp-cli')

marpCli(['test.md', '--pdf'])
  .then((exitStatus) => {
    if (exitStatus > 0) {
      console.error(`Failure (Exit status: ${exitStatus})`)
    } else {
      console.log('Success')
    }
  })
  .catch(console.error)

marpCli() accepts an argument of CLI options as array, and returns Promise to resolve an expected exit status in CLI. It would be rejected with the instance of Error if CLI met an error to suspend the conversion process.

Error handling

We have exported CLIError class and CLIErrorCode enum from @marp-team/marp-cli, to allow handling for specific errors that have already known by Marp CLI.

If CLIError instance was thrown, you can identify the reason why CLI throwed error by checking errorCode member.

Wait for observation

marpCli() would not be resolved initiatively if started some observation: Watch mode, server mode, and preview window.

waitForObservation() is helpful to handle them. It returns Promise that would be resolved with helper object when ready to observe resources in marpCli().

const { marpCli, waitForObservation } = require('@marp-team/marp-cli')

marpCli(['--server', './slides/'])
  .then((exitCode) => console.log(`Done with exit code ${exitCode}`))
  .catch(console.error)

waitForObservation().then(({ stop }) => {
  console.log('Observed')

  // Stop observations to resolve marpCli()'s Promise
  stop()
})

The resolved helper has stop() method for telling Marp CLI to stop observation and resolve Promise.

Contributing

Are you interested in contributing? Please see CONTRIBUTING.md and the common contributing guideline for Marp team.

Author

Managed by @marp-team.

License

This tool releases under the MIT License.

marp-cli's People

Contributors

284km avatar 3w36zj6 avatar 9at8 avatar bigwheel avatar chrisns avatar cosnomi avatar davebaird avatar dependabot[bot] avatar guillaumedesforges avatar jlevon avatar kamijin-fanta avatar mouse484 avatar n-ari avatar nuric avatar pataquets avatar rhtenhove avatar saiya avatar syoh avatar tomotargz avatar yhatt avatar zverev-iv avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

marp-cli's Issues

Lose img via marp command

using following command

npx @marp-team/marp-cli slides.md -o slides.pdf

image could be successfully viewed in VS code with following syntax
img

after execute the command above, the pdf shows a img thumbnail instead of the image itself.

like this

image

but once you upload you image to some web host, it works, seems the problem here is Marp Cli doesn't support local images

Animated gifs aren't being exported to pptx

When I'm adding animated gif to my presentation like this:

---
<!--
_class:
-->

<style scoped>
section img{
    position: absolute;
    right: 0;
    bottom: 0;
}
</style>

![bg left:30% fit](images/VM.png)

# Django

- А где логика?

![](images/7VE.gif)

They are being displayed correctly in html, but not in PPTX/PDF, there they are just static images.

--allow-local-files may not be accepted local files depending on the environment

It was reported in marp-team/marp-vscode#64. (marp-team/marp-vscode#64 (comment))

We cannot yet identify this cause. The following is a list of concerns that might be possible to be a cause.

  • The base URI of converting file specified by <base> HTML element would have wrong encoding
  • Something cannot parse special characters like spaces, parentheses, and so on (Similar to #95)
  • Marp CLI may fail handling on-demand files (DropBox, OneDrive, Google Drive etc)

PDF rendering has broken recently

I did a little work to narrow this down, but sometime after this commit 3fe441cf7a406416300735b0f5de4a6e48a6ff69 the PDF rendering started hanging (at least in the docker container). Building the Docker container from this commit, still works.

On HEAD, adding --pdf to the command line causes the container to just hang while rendering.

docker run --rm -v $PWD:/home/marp/app/ marpteam/marp-cli:latest target.md --theme-set spkane.css --pdf --allow-local-files
[  INFO ] Converting 1 markdown...
[  WARN ] Insecure local file accessing is enabled for conversion of target.pdf.

Building from an commit about a month or two older results in a working PDF render:

docker run --rm -v $PWD:/home/marp/app/ 46c6ff46a3d9 target.md --theme-set spkane.css --pdf --allow-local-files
[  INFO ] Converting 1 markdown...
[  WARN ] Insecure local file accessing is enabled for conversion of target.pdf.
[  INFO ] target.md => target.pdf

Convert slide deck to PowerPoint (pptx) that consists of rendered images

By using officegen, we might convert from Marpit / Marp Markdown into PowerPoint slide that consists of pre-rendered images.

It's very useful for mixing a traditional presentation deck and the deck made by Marp. In addition, it could use PowerPoint's presenter tool with Marpit's presenter notes.

Exporting PowerPoint deck was mentioned in the old Marp app by yhatt/marp#23. We'll make it wake up.

I suppose it would have to start working after than implemented #71.

ToDo

  • Implement #71
  • Allow --pptx option and pptx extension in -o option (-o foobar.pptx)

⚠️ People would expect re-editable contents in converted pptx. But it's still super difficult to convert into them with keeping the exact slide design, and there is no solution in FLOSS.

Adobe Acrobat can convert the exported PDF into pptx that includes re-editable contents, and keeps the design to some extent.

marp-cli with server and and preview option

On Linux (Ubuntu 18.04.), I am having some problems with the preview mode. Apparently, the program uses grep internally, resulting in some unwanted behavior, see CLI output below.

$ marp --server --preview ./MarpTest 
[  INFO ] [Server mode] Start server listened at http://localhost:8080/ ...
[  INFO ] [Preview] (EXPERIMENTAL) Opening http://localhost:8080...
grep: /XXX/XXX/.local/share/applications/zotero.desktop: No such file or directory
events.js:183
      throw er; // Unhandled 'error' event
      ^

Error: read ECONNRESET
    at _errnoException (util.js:1022:11)
    at Pipe.onread (net.js:628:25)

During the installation, npm returns the following warning messages

/usr/local/bin/marp -> /usr/local/lib/node_modules/@marp-team/marp-cli/marp-cli.js
- [email protected] node_modules/@marp-team/marp-cli/node_modules/arrify
- markdown-it-katex node_modules/@marp-team/marp-cli/node_modules/markdown-it-katex
/usr/local/lib
└─┬ @marp-team/[email protected] 
  ├─┬ @marp-team/[email protected] 
  │ └─┬ [email protected] 
  │   └── [email protected] 
  ├── @marp-team/[email protected] 
  ├─┬ [email protected]
  │ └── [email protected] 
  └─┬ [email protected] 
    ├─┬ [email protected] 
    │ └─┬ [email protected]
    │   └── [email protected] 
    ├── [email protected] 
    ├── [email protected] 
    ├── [email protected] 
    └── [email protected] 

npm WARN optional Skipping failed optional dependency /@marp-team/marp-cli/chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]

Detect the title of deck from first slide when title option is not passed

It would be good to fill the title for converted HTML automatically from the heading of title slide when --title option (and title global directive) is not passed.

We make this plan from TODO comment in Marp CLI meta plugin.

// TODO: Add rule to fill meta from content of slide deck when directives are not defined.

The other similar tool also has a plan for auto-filling of the title: jxnblk/mdx-deck#103 (v3)

Presenter view for HTML

Will there ever be an option to have a presenter view in the HTML slide show, or to have a “pen” to draw on the slides?

Sorry if this is in the wrong project again—let me know if there’s a better place.

Safari prevents moving slide after too many navigations

When presenting slide deck HTML in Safari, too many navigations per 30 seconds bring SecurityError.

[Error] SecurityError: Attempt to use history.replaceState() more than 100 times per 30.000000 seconds
	replaceState (yhatt-marp-cli-example.netlify.com:39:8347)
	(anonymous function) (yhatt-marp-cli-example.netlify.com:39:8347)
	(anonymous function) (yhatt-marp-cli-example.netlify.com:39:500)
	reduce
	s (yhatt-marp-cli-example.netlify.com:39:2575)
	(anonymous function) (yhatt-marp-cli-example.netlify.com:39:2664)
	(anonymous function) (yhatt-marp-cli-example.netlify.com:39:500)
	reduce
	u (yhatt-marp-cli-example.netlify.com:39:628)
	u
	(anonymous function) (yhatt-marp-cli-example.netlify.com:39:5580)

It's a restriction for security by Safari so we can only follow this. However, we can handle this error with wrapping by try to avoid prevention of remaining works.

Export PDF with presenter notes (Handouts)

Is there a way to export a PDF with Presenter Notes from VS Code?

This closed PR had a feature like it. Is exporting to PPT (via the CLI) the only way to get speaker notes to display?

Change port number for sending reload signal in watch mode

portfinder's breaking reported in #134 was an unexpected trouble, but it tells us to prevent using port number > 40000. That has a good reason exaplined at http-party/node-portfinder#82 (comment).

Marp CLI is using 52000 port resolved by portfinder. We think it would be deprecated soon. So we have to change the base port for sending signals.

ToDo

  • Change base port number for sending reload signal in watch mode to < 40000
  • Update description of Docker Hub to change binding port

Code block does not get rendered while starting a marp server with default theme

Hello, for some weird reason, my code block is no longer working in my browser. It was working a few weeks ago. Would you be able to give me some pointer?

My markdown presentation

---
marp: true
theme: default
---


# Normal

Welcome

---

# Code Block

` ` `js
// apologies for the triple backticks written as so, it's so that it can be previewed properly
console.log('hello');
` ` `

I run the following

npx @marp-team/marp-cli -s ./docs

and I got a blank code block like so

Screenshot from 2019-12-03 00-21-05

workarounds I have tried so far

  • Change theme to uncover and it works, however I can't use that theme because i need a sizeable realestate for my actual code block
  • run the cli with --html and add
<script defer src="https://cdn.jsdelivr.net/npm/@marp-team/marp-core/lib/browser.js"></script>

into the code block but it doesn't help

Thank you 🙏

Consider migration CI for Windows into GitHub Actions

Marp team's primary CI won't change from CircleCI, but I think a new bulit-in CI/CD for GitHub Actions is easier to maintain than Azure Pipelines, that is the current secondary CI for Marp team for running tests and builds in Windows environment.

In fact, GitHub Actions is using Azure Pipelines backend.

ToDo

  • Wait until enabled GitHub Actions for Marp team (-Nov, 13)
  • Set up GitHub Actions
    • Test in Windows environment
    • Create Windows binary via pkg
    • Upload packaged asset of standalone binary for Windows to GitHub release page

CircleCI has started supporting Windows environment too. It provides only to user of performance plan, and not yet provided free plan to OSS projects. We might re-migrate to CircleCI when Windows environment in CircleCI could use in OSS project in future.

marp-cli binary

V0.12.0: Program open the window and closed directly under windows10 (64)

Preview Error: Unknown permission type: clipboardRead

Hi, I have trouble with marp. It works fine last week, but it throw errors as follows this week. Please help. Thanks.

My env info:
npm: 6.9.0
node: 10.16.0
marp-cli: @marp-team/marp-cli v0.16.2 (w/ @marp-team/marp-core v0.15.2)
browser: Chrome canary Version 81.0.3991.0 (Official Build) canary (64-bit)

npx @marp-team/marp-cli foo.md --preview
[  INFO ] Converting 1 markdown...
[  INFO ] foo.md => foo.html
[  INFO ] [Watch mode] Start watching...
[  INFO ] [Preview] (EXPERIMENTAL) Opening
          file:///Users/zhaozhiming/Documents/foo...
(node:36765) UnhandledPromiseRejectionWarning: Error: Protocol error (Browser.grantPermissions): Unknown permission type: clipboardRead
.......
    at process._tickCallback (internal/process/next_tick.js:68:7)
(node:36985) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:36985) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

HTML not interpreted with CLI

I use HTML tags in my presentation to include an image and show it on the right side. Everything works fine while using the marp editor, but when I would like to build it with the CLI version, the HTML tags are not evaluated. Not in server or preview mode and not with allow-local-files and not with pdf or html output.

The pdf gets render correctly only when using the Export to pdf method in the marp editor itself.

Would be great if you could give me a hint. Here are some screenshots of the problem:

image
Marp editor with html tag

marp --pdf --allow-local-files Abstrakteklassen.md

Marp CLI build command

image
Rendered PDF

Navigate twice when hitting space bar after clicked next button on OSC

A focus ring will be kept on the clicked next button on OSC, so space bar brings unexpected twice navigation.

It is same for the other buttons. For example, slide cannot navigate with space bar after clicked previous button. Buttons for bespoke OSC plugin should not keep focus ring.

Generated PPTX is creating Master Slides, not Slides (as I was hoping)

The PPTX output is awesome, but I am having an issue with 2 features. If this is explained somewhere, can you please point me to it.

1- The generated slides are actually creating unique Master Slides and then the slide on the front end is using that Master Slide Template (for example, Slide 1 is using Master Slide 1 and Slide 2 is using Master Slide 2). I was hoping that it would generate a regular slide. There is probably a good reason for this. The secondary issue with this, is if we actually apply a Master Theme to the Slide Deck, the elements of the Master Theme sit on top of the text/table/etc generated by MARP.

  1. Somewhat related to number 1 (as in this is the PPTX generated content). The Slide contents are not editable after the fact. It is some sort of uneditable background image. Even on the Master Slide, I can't edit the contents. Is there a switch or something to output editable text. Going to reboot my machine to see if there is something just not acting right.

By the way, don't take this as negatives. I freaking love the project. Thank you for all of your effort.

`--engine ./engine.js` doesn't render code blocks well

I have the following files.

  • engine.js

    const { Marp } = require('@marp-team/marp-core');
    module.exports = opts => new Marp(opts);
    

    Note: I've also tested module.exports = opts => new Marp();, but there seems no difference.

  • sample.md

    # test
    
    ` ` ` <- We cannot use triple backquoations in clode blocks so I use ` ` ` here instead
    console.log('Hello World!');
    ` ` `
    
  • package.json

    ...
    "devDependencies": {
      "@marp-team/marp-cli": "0.14.1",
      "@marp-team/marp-core": "0.13.1",
      "@marp-team/marpit": "1.4.0",
    ...
    

When I use --engine @marp-team/marp-core, it works well.
Interestingly, when I use --engine ./engine.js, it doesn't render the code block well as follows.

image

Can marpcli's server render user's local images?

Hello.
I'm ganariya who studies in Akita University.

I'd like to use marp-cli to make a slide by markdown.
And I tired to use image syntax

But, If I use

marp --html --server --watch --allow-local-files

above server funtion, image cannot reveal.

However, If I export pdf, I can see image on the pdf.

Can marp-cli's server render user's local images?

Thank you.

Convert to HTML without list animation

Hello @yhatt,

Could it be possible to provide a flag to stop the one-by-one appearance of bullets/lists in html format? I basically want to have my entire list appear at once without having to press 'next' multiple times.

Thanks!

Convert slide deck to multiple images

As I have been pointed out at #68, it is great to get converting the slide deck into multiple images. We want to provide the easiest way to create sequence images.

ToDo

  • Refactor Converter to support multiple output
  • Consider option to output sequence images (--images?)
  • Output only specified page(s) via --page option (In another PR)

Fallback to Microsoft Edge if not installed Chrome

Microsoft has started rolling out new Edge browser based on Chromium. It will gradually be made available on Windows Update.

This fact is lucky for Marp CLI. PDF/PPTX conversion and preview mode has to install an extra Chrome/Chromium browser. Currently, it also works with Edge by setting CHROME_PATH environment variable.

It means the most of Windows 10 user will get the compatible browser without to do anything by user. If Marp CLI was supported fallback to Edge, installing extra browser won't be needed when converting Markdown into PDF/PPTX.

output html does not copy local assets

I use this command to convert a set of markdown files to html files:

marp --input-dir=./slides --output=./dist

However, local assets such as images and videos do not copy to dist directory. Is there possibility that marp could autodect referenced local assets and copy to dist directory?Just like what webpack do? Otherwise, I should manually copy that assets to dist.

PDF renders do not include the mounted CSS themes or background images.

The current release no longer renders an external CSS theme properly. I am not sure when this broke, but I'd guess sometime in the last few months.

It is possible that Puppeter and Chromium are out of sync again in marp-cli, but the last time that happened the rendering completely hung. The initial time this happened was here: #73

Watch mode does not work

When marp-cli was executed in watch mode, an error was output and stopped.
I use macOS Mojave (10.14.6)

% npx @marp-team/marp-cli -w slides.md 
[  INFO ] Converting 1 markdown...
[ ERROR ] Failed converting Markdown. (Provided options.stopPort(40000is less than options.startPort (52000))

"r.emulateMediaType is not a function" error when exporting images

I am running into an error when converting markdown into images using --image or --images flag. This can be reproduced with the following test.md file:

# Title

content

I am running marp-cli using the official Docker image:

$ docker run --rm -v $PWD:/build -w /build marpteam/marp-cli --image png test.md
[  INFO ] Converting 1 markdown...
[ ERROR ] Failed converting Markdown. (r.emulateMediaType is not a function)

Version:

$ docker run --rm marpteam/marp-cli --version
@marp-team/marp-cli v0.16.2 (w/ @marp-team/marp-core v0.15.2)

At the same time, conversion to PDF works fine.

The issue was not present in marpteam/marp-cli:v0.15.1 Docker image.

`--preview` option does not work in macOS Catalina

--preview option does not open Chrome window in macOS Catalina. Carlo seems to be failing a resolution of Chrome.

$ npx @marp-team/marp-cli ~/marp/deck.md --preview
[  INFO ] Converting 1 markdown...
[  INFO ] ../../../marp/deck.md => ../../../marp/deck.html
[  INFO ] [Watch mode] Start watching...
[  INFO ] [Preview] (EXPERIMENTAL) Opening file:///Users/yhatt/marp/deck.html...
^C(node:12987) UnhandledPromiseRejectionWarning: Error: Command failed: /System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/LaunchServices.framework/Versions/A/Support/lsregister -dump  | grep -i 'google chrome canary\?.app$' | awk '{$1=""; print $0}'
    at checkExecSyncError (child_process.js:629:11)
    at execSync (child_process.js:666:13)
    at darwin (/Users/yhatt/.npm/_npx/12987/lib/node_modules/@marp-team/marp-cli/node_modules/carlo/lib/find_chrome.js:33:7)
    at findChrome (/Users/yhatt/.npm/_npx/12987/lib/node_modules/@marp-team/marp-cli/node_modules/carlo/lib/find_chrome.js:222:24)
    at Object.launch (/Users/yhatt/.npm/_npx/12987/lib/node_modules/@marp-team/marp-cli/node_modules/carlo/lib/carlo.js:594:42)
    at Preview.<anonymous> (/Users/yhatt/.npm/_npx/12987/lib/node_modules/@marp-team/marp-cli/lib/marp-cli.js:1:40980)
    at Generator.next (<anonymous>)
    at /Users/yhatt/.npm/_npx/12987/lib/node_modules/@marp-team/marp-cli/lib/marp-cli.js:1:2090
    at new Promise (<anonymous>)
    at __awaiter (/Users/yhatt/.npm/_npx/12987/lib/node_modules/@marp-team/marp-cli/lib/marp-cli.js:1:1864)
(node:12987) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 3)
(node:12987) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

According to GoogleChrome/chrome-launcher#146 (comment), macOS Catalina was changed the output of lsregister but Carlo's Chrome finder is not following this (Carlo might be inactive: GoogleChromeLabs/carlo#163).

Output warning if detected blocking local resources while rendering by Chrome

I've received many feedbacks about rendering the local image file, "Image does not see on rendered PDF". In most cases, a cause is lacking --allow-local-files option.

Accessing the local content is often targeted as a vulnerability, so the user must express intention by the option. However, Marp CLI has not explained this while converting.

It's good to tell that it might lack --allow-local-files option if detected blocking access to the local file. Of course, we should keep in mind that it's just a hint and must keep not to recommend.

How to detect

We don't yet try for detection, but I wonder if Chrome outputs any warnings with its reason when blocked loading image. We should listen to Chrome error through Puppeteer, and detect local file access.

Failed to find `.md` file in non-ASCII directory

marp-cli failed to glob markdown files within non-ASCII directory. Thus marp --server . exits.

Way to reproduce

% grep marp-cli yarn.lock 
"@marp-team/marp-cli@^0.10.0":
  resolved "https://registry.yarnpkg.com/@marp-team/marp-cli/-/marp-cli-0.10.2.tgz#111be76a2df5f3c228f08dc3627eadbe23fbf3e8"

% pwd
/Users/seiya.yazaki/work/github.com/saiya/presentations/190913 RDBMS 実践
# ↑ It contains non-ASCII character in directory name

% ls *.md
-rw-r--r-- 1 seiya.yazaki staff 1.6K  6 24 15:07  slide.md

% yarn marp --server .
yarn run v1.17.0
$ '/Users/seiya.yazaki/work/github.com/saiya/presentations/190913 RDBMS 実践/node_modules/.bin/marp' --server .
Usage:
  marp [options] <files...>
  marp [options] -I <dir>

Basic Options:
  --version, -v      Show versions                                        [真偽]
  --help, -h         Show help                                            [真偽]
    .... snip ....

Expected result

yarn marp --server . should start server, not showing help.

Workaround

Use ASCII directory name:

% pwd
/Users/seiya.yazaki/work/github.com/saiya/presentations/190913 RDBMS Advanced

% ls *.md
-rw-r--r-- 1 seiya.yazaki staff 1.6K  6 24 15:07  slide.md

% yarn marp --server .
yarn run v1.17.0
$ '/Users/seiya.yazaki/work/github.com/saiya/presentations/190913 RDBMS Advanced/node_modules/.bin/marp' --server .
[  INFO ] [Server mode] Start server listened at http://localhost:8080/ ...

Revert CSS hack for Chrome scaling

Now we have already enabled Chrome's BGPT feature in all conversions. (#176 (comment)) Probably removing CSS hack for scaling (#15) makes no problems.

translateZ hack might still cause the glitch at remaining space in scaled slide.

We would remove these hacks if Chrome became to generate property trees by default. Until then we have to choice between to allow glitch on Chrome or to force enabling Chrome option.

Originally posted by @yhatt in #15 (comment)


The same workaround is still applicable in glitched <video> tag on Chromium (marp-team/marpit#205 (comment)). We should apply this in Marpit framework.

Cannot change serif font in pdf output and vscode preview

Serif Chinese font isn't a good choice in slides, so I tried this, but font didn't change.

---
marp: true
theme: gaia
---
<style>
.slide {
  font-family: 'Microsoft YaHei', 'SimHei', sans-serif !important;
}
</style>

<!-- class: lead gaia -->
# 标题
## Title

I didn't try it with html output because html version without <style> worked well with a sans serif font.
So is there any way to change font without editing theme files?

btw Microsoft YaHei might not be a good default font because it is not a free font. Sarasa Gothic may be a good alternative.
screenshot

Cannot find module 'twemoji.npm.js'

I had an error when convert my Markdown to HTML.

$ npx @marp-team/marp-cli KotlinUpdates.md
Cannot find module '/Users/yasuyuki/.npm/_npx/40753/lib/node_modules/@marp-team/marp-cli/node_modules/twemoji/dist/twemoji.npm.js'. Please verify that the package.json has a valid "main" entry

My markdown is here: https://github.com/eyasuyuki/KotlinUpdates

Fragmented list don’t export animations in PowerPoint

(I posted this in Marp VSCode but was told it belonged here instead)

When I used the Fragmented unordered list and export to PPTX, the "fragmented" / animation part doesn't work--that is, all the items appear at once. The fragmented effect works fine in HTML, but not in PPTX
Markdown example:

Title
* item 1
* item 2

My system
OS: Windows 10 Pro version 1803 (build 17134.885)
VSCode: 1.37.1
Marp extension: 0.9.0

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.