前提
Node.js環境のPuppeteerでMathJaxを使用して数式の画像を出力しようとしています。
発生している問題
下のコードから上の画像の様な出力を期待しているのですが、
実際には下の画像のような出力になってしまいます。(上の画像はコードのHTML部分を通常のChromeでレンダリングしたものです)
正しくレンダリングされるようにする方法を教授いただけないでしょうか
↑
↓
javascript
const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.setViewport({ width: 1440, height: 900 }); const html = `<!DOCTYPE html> <html> <head> <meta lang="ja"> <meta charset="utf-8"> <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script> <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script> </head> <body> 一次方程式 \(ax+b=0\) の解は \[ x = -\frac{b}{a} \] です。 </body> </html>`; try { await page.setContent(html); await page.waitForTimeout(10000); await page.screenshot({ path: './image.png' }); } catch (err) { await browser.close(); } finally { await browser.close(); }})();
環境
Ubuntu 22.04 LTS
Node.js v16.16.0
Puppeteer v16.1.0
0 コメント