samuele-cozzi / obsidian-marp-slides

Create markdown-based Marp presentations in Obsidian
MIT License
80 stars 6 forks source link

Marp Core's browser script has not loaded in the preview correctly #60

Closed yhatt closed 1 year ago

yhatt commented 1 year ago

I tried this extension and it works like a charm. Awesome job, from Marp maintainer! :+1:

While testing the extension, I found out that Marp Core's fitting header <!--fit--> and some auto-scaling features, for the code block and KaTeX typesetting, did not work in the preview.

Regularly they are powered by an injected JavaScript by script constructor option in Marp Core, but many Electron apps also including Obsidian do not allow to run injected <script> through innerHTML due to security reasons.

Instead, I recommend disabling the script injection via script: false, and executing browser() exported from @marp-team/marp-core/browser early in the extension. It registers Marp-specific Web Component elements to the app and activates some auto-scaling features provided by Marp Core.

import { browser } from '@marp-team/marp-core/browser'

// Run in the browser (Electron app) context to activate some auto-scaling features
browser()

In fact, the script for the preview context of Marp for VS Code is executing browser(). https://github.com/marp-team/marp-vscode/blob/5dbd2439249d5df614e4e8e605d048bf16be53a0/src/preview.ts#L16

And also in Marp renderer working on Marp website: https://github.com/marp-team/marp/blob/d98bd2a26f01861f96228e725b2745654a6aac10/website/components/Marp.tsx#L78

Again, thanks to create this extension, and expand the ecosystem of Marp! 😄

samuele-cozzi commented 1 year ago

With release 0.30.2