feat: add mathjax config

Author: vladislavkeblysh

src/App.jsx

@@ -14,6 +14,7 @@ import { MathJaxContext } from 'better-react-mathjax';
 
 import './App.scss';
 import Head from './components/Head';
+import { mathJaxConfig } from "./utils";
 
 export const App = ({ courseMetadata, isEnabled }) => (
   <Router>
@@ -27,7 +28,7 @@ export const App = ({ courseMetadata, isEnabled }) => (
       />
       {!isEnabled && <DemoWarning />}
       <main data-testid="main">
-        <MathJaxContext>
+        <MathJaxContext config={mathJaxConfig}>
           <ListView />
         </MathJaxContext>
       </main>

src/utils/index.js

@@ -1,2 +1,3 @@
 export { default as StrictDict } from './StrictDict';
 export { default as keyStore } from './keyStore';
+export { default as mathJaxConfig } from './mathJaxConfig';

src/utils/mathJaxConfig.js

@@ -0,0 +1,26 @@
+const mathJaxConfig = {
+  version: 2,
+  tex2jax: {
+    inlineMath: [
+      ['$', '$'],
+      ['\\(', '\\)'],
+      ['[mathjaxinline]', '[/mathjaxinline]'],
+    ],
+    displayMath: [
+      ['$$', '$$'],
+      ['\\[', '\\]'],
+      ['[mathjax]', '[/mathjax]'],
+    ],
+    processEscapes: true,
+  },
+  CommonHTML: { linebreaks: { automatic: true } },
+  SVG: { linebreaks: { automatic: true } },
+  "HTML-CSS": { linebreaks: { automatic: true } },
+  messageStyle: 'none',
+  styles: {
+    '.MathJax_SVG svg': { 'max-width': '100%' },
+    'table>tbody>tr>td>.MathJax_SVG svg': { 'max-width': 'inherit' },
+  },
+};
+
+export default mathJaxConfig;