Как убрать верхний / нижний отступ математики в MathJax? - PullRequest
Новая
       10

Как убрать верхний / нижний отступ математики в MathJax?

0 голосов
/ 07 ноября 2018

Как установить верхний и нижний отступ в элементах div и ul на 0?

Вот скриншот с эффектом, который я хотел бы:

Вот мой код: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
    prefer: {
    Chrome: "CommonHTML"
    },
    jax: ["input/TeX", "output/HTML-CSS"],

    tex2jax: {
    inlineMath: [['$','$'], ['\\(','\\)']],
    "HTML-CSS": { color: "red"}
    },
    displayAlign: "left"
    });
</script>
<script type="text/javascript" async
        src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js? 
config=TeX-MML-AM_CHTML">
</script>
</head>
<body id="body">
<div>
    <div style="border: 1px solid">
        \[My custom text\]
    </div>

    <ul style="border: 1px solid">
        <li style="border: 1px solid blue">\[x^2+x^4-x^5\]</li>
        <li style="border: 1px solid red">\[y^2+y^4-y^5\]</li>
    </ul>    
</div>  
</body>
</html>

1 Ответ

0 голосов
/ 08 ноября 2018

Мало css (с соответствующими селекторами) может решить проблему:

  • скрыть пустые элементы
  • сброс полей 

li *:empty{
  display: none;
}


.mjx-chtml.MJXc-display{
  margin: 0;
}
<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
    prefer: {
    Chrome: "CommonHTML"
    },
    jax: ["input/TeX", "output/HTML-CSS"],

    tex2jax: {
    inlineMath: [['$','$'], ['\\(','\\)']],
    "HTML-CSS": { color: "red"}
    },
    displayAlign: "left"
    });
</script>
<script type="text/javascript" async
        src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML">
</script>
</head>
<body id="body">
<div>
    <div style="border: 1px solid">
        \[My custom text\]
    </div>

    <ul style="border: 1px solid">
        <li style="border: 1px solid blue">\[x^2+x^4-x^5\]</li>
        <li style="border: 1px solid red">\[y^2+y^4-y^5\]</li>
    </ul>    
</div>
...