How to render \newline of MathType in MathJax

[SangVoM]

Issue Summary

I have a text of MathType, when I use MathJax render text, The text does not render \newline. How to render it

Text: \( a)-16x^{2}+24x y^{2}-9y^{4} \) \( =-\left(16x^{2}-24x y^{2}+9y^{4}\right) \) \( =-[(4x)^{2}-2.4x.3y+(3y)^{2}] \) \( =-(4x-3y)^{2} \) \( b)-8x^{3}+12x^{2}y-6x y^{2}+y^{3} \) \( =y^{3}-6x y^{2}+12x^{2}y-8x^{3} \) \( =y^{3}-3.y^{2}.2x+3.y.(2x)^{2}-(2x)^{3} \) \( =(y-2x)^{3} \) \( c)~\dfrac{x^{5}}{5}-x=x(x^{4}-1)=x(x^{2}-1)(x^{2}+1)=x(x-1)(x+1)(x^{2}+1) \) \( d)~56(x-2)^{2}-126 \) \( =14[4(x-2)^{2}-9] \) \( =14[(2x-4)^{2}-3^{2}] \) \( \left[4(x-2)^2=\left[2(x-2)\right]^2=(2x-4)^2\right] \) \( =14(2x-4-3)(2x-4+3) \) \( =14(2x-7)(2x-1) \) \( e)~64x^{4}+81y^{4} \) \( =(8x^{2})^{2}+(9y^{2})^{2} \) \( =(8x^{2})^{2}+2.8x^{2}.9y^{2}+(9y^{2})^{2}-2.8x^{2}.9y^{2} \) \( =(8x^{2}+9y^{2})^{2}-144x^{2}y^{2} \) \( =(8x^{2}+9y^{2})^{2}-(12x y)^{2} \) \( =(8x+9y+12x y)(8x+9y-12x y) \) \( =(8x+9y+12x y)(8x+9y-12x y) \) \begin{tabular}{|l|l|} \hline \multirow{1}{*}{Câu 7 $\newline$ 0.45đ}&\( 7x^{3}+12x^{2}+6x+1 \) $\newline$ \( =(8x^{3}+12x^{2}+6x+1)-x^{3} \) $\newline$ \( =[(2x)^{3}+3(2x)^{2}.1+3.2x.1^{2}+1^{3})-x^{3} \) $\newline$ \( =(2x+1)^{3}-x^{3} \) $\newline$ \( =(2x+1-x)[(2x+1)^{2}+(2x+1).x+x^{2}] \) $\newline$ \( =(x+1)(4x^{2}+4x+1+2x^{2}+x+x^{2}) \) $\newline$ \( =(x+1)(7x^{2}+5x+1) \) $\newline$ \( \textbf{g})\left(x-2y\right)^3-6xy\bigl(2y-x\bigr)+16y^{3} \) $\newline$ \( =x^{3}-3.x^{2}.2y+3.x.(2y)^{2}-(2y)^{3}-12x y^{2}+6x^{2}y+16y^{3} \) $\newline$ \( =x^{3}-6x^{2}y+12x y^{2}-8y^{3}-12x y^{2}+6x^{2}y+16y^{3} \) $\newline$ \( =x^{3}+8y^{3}=x^{3}+(2y)^{2}=\left(x+2y\right)\!\left(x^{2}-2x y+4y^{2}\right) \) $\newline$ \( \mathrm{~h})\stackrel{\mathrm{x}^{2}}{\longrightarrow}\!\left\{\begin{array}{ll}{x^{2}y(x-3y)^{2}+x y^{2}(y-3x)^{2}}\\ {=x y[x(x-3y)^{2}+y(y-3x)^{2}]}\\ {=x y[x(x^{2}-6x y+9y^{2})+y(y^{2}-6x y+9x^{2})]}\\ {=x y(x^{3}-6x^{2}y+9x y^{2}+y^{3}-6x y^{2}y)}\\ {=x y(x^{3}-3x^{2}y+3x y^{2}+y^{3})=x y(x+y)^{3}}\end{array}\right. \) &0,80đ $\newline$ 0,70đ $\newline$ 0,65đ $\newline$ 0,50đ $\newline$ 0,40đ\\ \hline \end{tabular}

My Code:

import CKEditorWithMathType from 'components/CKEditorWithMathtype'
import { Eye, Pencil } from 'lucide-react'
import { useEffect, useState } from 'react'

interface IEditorProps {
  value?: string | null
  onChangeLabelValue?: (value: string) => void
}
export default function CKEditorCustom({
  value,
  onChangeLabelValue
}: IEditorProps) {
  const [labelValue, setLabelValue] = useState<string>('')
  const [isShow, setIsShow] = useState<boolean>(false)

  useEffect(() => {
    if (!isShow) {
      const output = document.getElementById('preview')
      output!.innerHTML = ''
      const options = {
        htmlTags: true
      }
      const html = (window as any).markdownToHTML(
        labelValue || value || '',
        options
      )
      output!.innerHTML = html
    }
  }, [labelValue, isShow])

  const handleChangeValue = (value: string) => {
    onChangeLabelValue?.(value)
    setLabelValue(value)
  }

  return (
    <div className="flex flex-col gap-1 rounded-md border border-gray-500 bg-white p-3">
      <div className="flex justify-end gap-4 py-2">
        <Eye
          size="20"
          className={`hover:cursor-pointer hover:text-blue-500 ${
            !isShow && 'active:text-blue-500'
          }`}
          onClick={() => setIsShow(false)}
        />
        <Pencil
          size="20"
          className={`hover:cursor-pointer hover:text-blue-500 ${
            isShow && 'focus:text-blue-500'
          }`}
          onClick={() => setIsShow(true)}
        />
      </div>
      {isShow ? (
        <div className="">
          <CKEditorWithMathType
            data={labelValue || value || ''}
            onChange={handleChangeValue}
          />
        </div>
      ) : (
        <div className="">
          <div className="min-h-[1000px] w-full overflow-auto ">
            <MathJaxContext config={mathJaxConfig}>
              <MathJax>
                <div id="preview"></div>
              </MathJax>
            </MathJaxContext>
          </div>
        </div>
      )}
    </div>
  )
}