PDF export does not render math from marp-vscode; works from marp-CLI

[jhconning]

When I convert a math-heavy markdown file to PDF via marp-cli eveything works fine.

However, when I attempt to do convert the same file from Marp for vs-code using the convenient export slide deck option the resulting PDF fails to render most of the math blocks (i.e. any math such as $$ x^2$$ in the markdown.. although the inline $x^2$ seem to work). I just get empty space where the equations should be.

It's not much trouble for me to work via the marp-cl, but this seemed a curious thing since I saw you say somewhere that the conversions are in fact outsourced to marp-cli. Any thoughts?

Thanks for an awesome extension.

my setup:
Windows 10
VS code 1.41.1
Marp extension 0.12.0

[yhatt]

As you said the conversion is really outsourced to Marp CLI so I feel weird it too.

Unfortunately I could not reproduce the failure of rendering maths in PDF export via VS Code extension. Could you show me a minimum Markdown example to reproduce it?

[jhconning]

Actually this might turn out to be an issue also for marp-cli because now I'm getting the same non-rendering with the CLI (not sure why it worked once via the CLI) . Here is a minimal example.

Here is markdown for a single slide (in a file called nomath.md on my PC):

---
marp: true

---

# Homogeneous and Homothetic Functions

A function is homogenous of degree $k$ if:

$$F(\tau K,\tau L)=\tau^k F(K,L)$$

Linear-homogeneous or constant returns (k=1): 
$$F(\tau K,\tau L)=\tau F(K,L)$$

The marp-preview in vscode renders the math correctly. Here is a screenshot:

However, now the exported PDF doesn't render the equations between $$ either whether produced via 'Export Slide Deck' is vscode or now from the CLI via:
npx @marp-team/marp-cli nomath.md --pdf

Here is a screenshot of how it looks on the PDF:

These slides used to export fine from the old marp executable.

Thanks for your help.

[yhatt]

Thanks for the details.

At a glance, the screenshot of the output looks like getting similar trouble about auto-scaling like marp-team/marp-cli#168. (Marp Core has enabled auto-scaling for math block and code block in built-in themes, powered by JavaScript) I've confirmed a similar rendering result when opening an exported slide in HTML with disabled JavaScript.

However, I cannot be assumed that the execution of the script is disabled randomly while rendering. 🤔

[jhconning]

Thanks for identifying the problem.

Is there any workaround that you can suggest at this point, or is it something that needs a fix? Can I switch to manual scaling in a custom theme somehow? (Sorry, I don't have a very deep understanding of how the whole system works.)

[yhatt]

The workaround is using custom theme with @auto-scaling false.

/*
 * @theme custom-theme
 * @auto-scaling false
 */

@import 'default';

.katex-display {
  /* Scale down font size of math block if necessary */
  /* font-size: 80%; */
}

---
marp: true
theme: custom-theme
---

...

[jhconning]

Thank you, I was a bit unsure about how to build this custom theme but I see instructions here.

Would this work?

1. My project with the slides md file is in a folder G:\DevII_S20\slides
2. I create slidecustom.css and paste the content from your first code block into that file.
3. I save a vscode workspace named Pslides this saves a file Pslides.code-workspace file into this folder
4. I change vscode Preference_settings and enter the the file name slidecustom.css inot the box like so:
   

At this point the content of my Pslides.code-workspace file is:

{
	"folders": [
		{
			"path": "G:\\GC\\DevII_S20"
		}
	],
	"settings": {
		"markdown.marp.themes": [
			"slidecustom.css"
		]
	}
}

4. I add the theme: slidecustom line to the top of my slides.md file like you indicated.
5. Export slide deck using marp-vscode button

I tried the above but I'm still not seeing the math render on the PDF.

[yhatt]

The theme name is custom-theme defined in CSS @theme custom-theme, so you should add theme: custom-theme instead of theme: slidecustom.

[jhconning]

Thank you. Now it's working and I see the ease and power of custom themes!

Let me summarize in closing for anybody who might want to setup a custom theme using the marp-vscode extension: just follow the instructions above but use custom-theme everywhere I had earlier typed slidecustom

A suggestion: It might be useful to expand the short instructions on the vscode-marp extension page here to make these steps more apparent to a broader audience.

[jhconning]

Sorry to open this issue again but I wanted to report that the original issue: "PDF export does not render math from marp-vscode; works from marp-CLI" actually remains true.

The custom-theme workaround (above) allows PDF conversion to render math correctly via the CLI but it does not appear to have fixed export from vscode (even after adjusting settings as described above).

This leads me to a related question. When I convert from the CLI e.g.

npx @marp-team/marp-cli nomath.md --pdf --allow-local-files

the conversion process takes quite some time as it seems to be extracting node modules and building the marp-cli from scratch. However, when I export from vscode the conversion is very quick, as if it were skipping this build process. Why is that? Is there a way to speed up the marp-cli conversion?

Now that I'm getting the hang of it, I'm loving the power of marp to create customizable markdown slideshows for my teaching. I don't mind conversion via the CLI but it would be great to have the vscode export button working to speed workflow even more. Thanks!

[yhatt]

Unfortunatelly Marp team cannot still reproduce your issue, and we are not recieved the report from other users too. Thus, I suppose it's a environment specific problem.

I think the most likely cause is JavaScript disabled Google Chrome. Marp will convert Markdown into PDF through Google Chrome so the output will be incorrect if the script execution for the local file was disabled or restricted by some reason (e.g. Chrome is managed by enterprise for security).

Please try to export into HTML, and check whether the outputted HTML has the correct math rendering by opening it in your Chrome.

---

npx is the easiest way to run the latest Marp CLI through user's Node.js, but it fetches Marp CLI and dependent modules from remote in each time so it would take a lot of time. If you expect to use Marp CLI many times, we recommend to install marp command (or executable binary) by following the documentation.

Marp for VS Code extension has already included Marp CLI module and dependent packages so it's faster than npx.

[jhconning]

Your guess appears to be correct The export from vscode works from my home computer without problems. It is only from my Windows PC at work, which like is 'managed by enterprise,' where the math scaling doesn't work from vscode (but does work from the CLI).

Thank you for pointing me to the marp executable, it speeds things up a lot.