MathJax: How to make math copyable?

<!DOCTYPE html>
<html>

<head>
    <title>Math in HTML</title>
    
    <meta charset="utf-8">
    <script>
    MathJax = {
      tex: {
        inlineMath: [['$', '$'], ['\\(', '\\)']]
      },
      svg: {
        fontCache: 'global'
      }
    };
    </script>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
</head>

<body>
        <h1>Mathematic equations</h1>
        <p>I cannot select this equation:
                
                $$\intop_0^1f(x)dx=\pi$$
            
            nor this one $x^2 + 3x - 2 = \zeta$.
        </p>
        
        <p>I would like that when someone copy-pastes the previous paragraph he/she would get:
        <code>I cannot select this equation:
                
                $$\intop_0^1f(x)dx=\pi$$
            
            nor this one $x^2 + 3x - 2 = \zeta$.</code>
</body>

</html>