​[Feature Request] Add mobile pinch-to-zoom support

[cnlnr]

💡 Feature Description

Please add support for mobile pinch-to-zoom gestures (touch scaling) in prism-code-editor.

Currently, the editor lacks support for native two-finger pinching/zooming on mobile screens, making it impossible to scale or zoom in on code snippets when needed.

---

🎯 Use Case / Motivation

When accessing the editor on mobile devices (or within a desktop-simulated viewport like <meta name="viewport" content="width=1280">):

1. Code text can be too small to read on smaller screens.
2. Users cannot use the standard mobile two-finger pinch gesture to zoom in on code or zoom out for a broader view.

Adding this feature will significantly improve readability and accessibility for mobile users and WebView environments.

---

🛠️ Requested Behavior

• Allow users to scale/zoom the editor content using native mobile pinch-to-zoom gestures.
• Ensure touch events don't block mobile browser gesture scaling.

---

📷 Environment

• Platform: Mobile Browsers (iOS Safari / Android Chrome / Android WebView)

[jonpyt]

Mobile browsers already allow users to pinch and zoom in on the page (unless you have a <meta name="viewport"> with maximum-scale=1, although iOS will ignore this). If the font size is too small, they can just zoom in on the page.

When accessing the editor on mobile devices (or within a desktop-simulated viewport like ):

1. Code text can be too small to read on smaller screens.
2. Users cannot use the standard mobile two-finger pinch gesture to zoom in on code or zoom out for a broader view.

Adding this feature will significantly improve readability and accessibility for mobile users and WebView environments.

If users cannot pinch and zoom in on your page, then maybe something is wrong with your <meta name="viewport"> tag?

Controlling the font size of the editor should be the role of the application developer, not this library. You can configure the font size with CSS on .prism-code-editor , and since almost all the styles use em units, the editor will just scale perfectly to fit the font size. If you're worried about the font size being to small, maybe add an "editor font size" setting to your web page or something?

[cnlnr]

What I mean is, it works like a map: code zooms and pans, but line numbers are fixed on the left and never move horizontally.

[cnlnr]

Mere scaling feels stiff and unlike a map, without zooming centered between two fingers.

[jonpyt]

The current layout does not make it possible to scale the editor's font size without scaling the line numbers and editor padding as well. Changing the layout to make this possible would be a breaking change (probably a rather big one as well). This is also very difficult to implement in a usable manner. Ideally, the code won't shift under your finger while pinching, which would require updating the scroll position of the content.

Mere scaling feels stiff and unlike a map, without zooming centered between two fingers.

It would, but why isn't the native pinching implemented in mobile browsers sufficient? Yes, the line numbers won't be in a fixed position when pinching in the browser, but this is not necessary to make the content legible.