Marp VS Code export differs from marp-cli - automate or watch in VS Code?

[Kugeleis]

I use the marp VS Code extension. Exporting to pdf or ppt work there via the menu. Exporting vis marp-cli fails in various ways (pictures missing, embedded html not rendered).
How can I automate or --watch the export with the VS Code extension?

[yhatt]

Exporting vis marp-cli fails in various ways (pictures missing, embedded html not rendered).

Probably you are just missing to enable opt-in options of Marp CLI such as --allow-local-files to use local file assets and --html to use HTML tags. In Marp CLI, these options are disabled by default due to security reasons so you have to explicitly enable them, with agreement to their security risks.

How can I automate or --watch the export with the VS Code extension?

If you installed Marp CLI into your Node.js project, you can use watch mode from VS Code by setting up .vscode/launch.json configuration.

This example allows running --watch for every Markdown files in the current workspace from VS Code Run → Start Debugging (F5).

package.json

The watch script is defined to start watching the change of Markdown files in the current workspace. This example is also setting to allow local file assets (allowLocalFiles) and HTML tags (html) as the project entire settings.

{
  "scripts": {
    "watch": "marp --no-stdin --watch ."
  },
  "marp": {
    "allowLocalFiles": true,
    "html": true
  },
  "dependencies": {
    "@marp-team/marp-cli": "^3.4.0"
  }
}

.vscode/launch.json

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Start Marp watch mode",
      "skipFiles": ["<node_internals>/**"],
      "cwd": "${workspaceRoot}",
      "runtimeExecutable": "npm",
      "windows": {
        "runtimeExecutable": "npm.cmd"
      },
      "runtimeArgs": ["run", "watch"]
    }
  ]
}

[Kugeleis]

I tried marp --html --allow-local-files slides.md and marp slides.md with a
.marprc.ylm

allowLocalFiles: true
html: true

but both are far from the result from the VS Code GUI button. Both can't find the pictures included in the slides from subfolder pictures and the formatting is quite poor. Will marp-cli understand e.g. the theme from the markdown frontmatter?

[yhatt]

Note

This answer is marked as the answer by original poster but might be getting off topic from the request in a topic title. If you are here to find a way for automation/watch Marp conversion in VS Code, please check out https://github.com/orgs/marp-team/discussions/528#discussioncomment-10383087.

If you are using Marp built-in themes default, gaia, or uncover, Marp CLI can use the theme defined in Markdown front-matter out of the box. If not (using custom themes from community), you have to tell Marp CLI where theme CSS files are located expected to use like a setting of Marp for VS Code markdown.marp.themes.

marp --html --allow-local-files --theme-set ./themes/custom-theme.css -- slides.md

If still failed, could you provide a minimal reproducible example with including Markdown, themes, assets, the expected result and the actual result? You may get better answers from Marp team and Marp community.

[Kugeleis]

thanks