Process currency signs as text

I am battling with a website that looks like this (Minimal Reproducible Example):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MathJax Test</title>
    <script type="text/javascript" defer="" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script type="text/javascript">
  window.MathJax = {
    loader: {
      load: ['[tex]/boldsymbol'],
    },
    tex: {
      packages: {
        '[+]': ['boldsymbol'],
      },
      inlineMath: [['$', '$'], ['\\(', '\\)']],
      processEscapes: true
    },
  };



</script>
<script defer="" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/input/tex/extensions/boldsymbol.js" charset="UTF-8"></script>
</head>
<body>
    <p>The price: \( €0.7 \)</p>
</body>
</html>

Through a browser, the price appears as "Math input error", because of the € sign.

Obviously, the body should be like this, and I would have no problem:

<p>The price: \( \text{€0.7} \)</p>

For various irrelevant reasons, I cannot modify the body of the html, however I can modify the head.

Can anyone help me find a solution so that these badly formatted math input appears as intended?

Solution

Use this :

Use this :  inlineMath: [['$', '$'], ['\f(', '\f)']],

Instead of : inlineMath: [['$', '$'], ['\\(', '\\)']],

Form feed (/f) is commonly used to begin new sections in printed texts, providing a simple yet effective method for controlling page breaks.

This is the desired output with (/f)