vuejs / vitepress

Vite & Vue powered static site generator.
https://vitepress.dev
MIT License
13.17k stars 2.12k forks source link

when the length of the Math Equation is too long #3914

Closed DrAugus closed 5 months ago

DrAugus commented 5 months ago

Is your feature request related to a problem? Please describe.

If the length of a mathematical formula is too long and exceeds the page width, can a scrollbar be added to the mjx-container?

https://github.com/vuejs/vitepress/blob/49dbfb4ea37e22f38946218e9beda5b511713ce1/src/client/theme-default/styles/base.css#L244-L247

phone screenshot ![img_v3_02b6_900219f1-55ba-4b50-95cd-f3d987c9a21g](https://github.com/vuejs/vitepress/assets/34206897/80adcbca-5a67-4d40-a0e7-7360c435122d)

Describe the solution you'd like

css add

mjx-container {
  display: inline-block;
  margin: auto 2px -2px;
  overflow-x: auto;
  max-width: 100%;
}

Describe alternatives you've considered

No response

Additional context

No response

Validations

laplacetw commented 5 months ago

I made vitepress-theme-trigger for my blog and optimized MathJax style for mobile with Tailwind CSS :

mjx-container[style*="display: block;"] {
  @apply overflow-x-auto overflow-y-hidden;
}

mjx-container > svg {
  @apply inline-block;
}
Phone Screenshot for Demo ![demo](https://github.com/vuejs/vitepress/assets/14951574/de42c970-45d2-4c55-98ad-2e235203531b)

Link for online demo➡️