fix: syntax support extended for latex

src/components/HTMLLoader.jsx

@@ -3,6 +3,24 @@ import PropTypes from 'prop-types';
 
 import MathJax from 'react-mathjax-preview';
 
+const baseConfig = {
+  showMathMenu: true,
+  tex2jax: {
+    inlineMath: [
+      ['$', '$'],
+      ['\\(', '\\)'],
+      ['[mathjaxinline]', '[/mathjaxinline]'],
+    ],
+    displayMath: [
+      ['[mathjax]', '[/mathjax]'],
+      ['$$', '$$'],
+      ['\\[', '\\]'],
+    ],
+  },
+
+  skipStartupTypeset: true,
+};
+
 function HTMLLoader({ htmlNode, componentId, cssClassName }) {
   const isLatex = htmlNode.match(/(\${1,2})((?:\\.|.)*)\1/)
                   || htmlNode.match(/(\[mathjax](.+?)\[\\mathjax])+/)
@@ -10,7 +28,15 @@ function HTMLLoader({ htmlNode, componentId, cssClassName }) {
                   || htmlNode.match(/(\\\[(.+?)\\\])+/);
 
   return (
-    isLatex ? <MathJax math={htmlNode} id={componentId} className={cssClassName} />
+    isLatex ? (
+      <MathJax
+        math={htmlNode}
+        id={componentId}
+        className={cssClassName}
+        sanitizeOptions={{ USE_PROFILES: { html: true } }}
+        config={baseConfig}
+      />
+    )
       // eslint-disable-next-line react/no-danger
       : <div className={cssClassName} id={componentId} dangerouslySetInnerHTML={{ __html: htmlNode }} />
   );

src/components/PostPreviewPane.jsx

@@ -14,7 +14,7 @@ function PostPreviewPane({ htmlNode, intl, isPost }) {
   return (
     <>
       {showPreviewPane && (
-        <div className={`p-2 bg-light-200 rounded shadow-sm ${isPost ? 'mt-3 mb-5.5' : 'my-3'}`}>
+        <div className={`p-2 bg-light-200 rounded shadow-sm ${isPost ? 'mt-3 mb-5.5' : 'my-3'}`} style={{ maxHeight: '200px', overflow: 'scroll' }}>
           <Close onClick={() => setShowPreviewPane(false)} className="float-right text-primary-500 mb" />
           <HTMLLoader htmlNode={htmlNode} />
         </div>