Merge pull request #556 from marp-team/enable-png-transparency

Enable PNG image transparency

Author: yhatt

CHANGELOG.md

@@ -8,6 +8,10 @@
 - Upgrade Marp Core to [v3.9.0](https://github.com/marp-team/marp-core/releases/v3.9.0) ([#557](https://github.com/marp-team/marp-cli/pull/557))
 - Upgrade dependent packages to the latest versions ([#557](https://github.com/marp-team/marp-cli/pull/557))
 
+### Fixed
+
+- Enable PNG image transparency ([#555](https://github.com/marp-team/marp-cli/issues/555), [#556](https://github.com/marp-team/marp-cli/pull/556))
+
 ## v3.3.1 - 2023-10-01
 
 ### Fixed

src/converter.ts

@@ -392,6 +392,13 @@ export class Converter {
       await render()
       await page.emulateMediaType('print')
 
+      if (opts.type === ConvertType.png) {
+        // Enable transparency
+        await page.addStyleTag({
+          content: ':root,body { background:transparent !important; }',
+        })
+      }
+
       const screenshot = async (pageNumber = 1) => {
         const clip = {
           x: 0,
@@ -406,7 +413,11 @@ export class Converter {
             type: 'jpeg',
           })
 
-        return await page.screenshot({ clip, type: 'png' })
+        return await page.screenshot({
+          clip,
+          omitBackground: true,
+          type: 'png',
+        })
       }
 
       if (opts.pages) {