I can implement VSCODE_MATHPIX_MARKDOWN in ReactJS ?

[SangVoM]

I need it on ReactJS, can I use it there? Please guide me to implement it. Thanks And I found lib https://github.com/Mathpix/mathpix-markdown-it, It can render, So how to get editor for it, which editor should I use that has mathType input?

[OlgaRedozubova]

@SangVoM vscode-mathpix-markdown is a vsCode plugin that uses mathpix-markdown-it

You can use mathpix-markdown-it for ReactJS Information can be found here.

So how to get editor for it, which editor should I use that has mathType input?

You can use any text editor. It can be just textarea. Also, you can use codemirror for it.

Example using textarea: https://github.com/Mathpix/mathpix-markdown-it/blob/master/examples/react-app/use-parseMarkdownByHTML-method/README.md

[SangVoM]

@SangVoM vscode-mathpix-markdown is a vsCode plugin that uses mathpix-markdown-it

You can use mathpix-markdown-it for ReactJS Information can be found here.

So how to get editor for it, which editor should I use that has mathType input?

You can use any text editor. It can be just textarea. Also, you can use codemirror for it.

Example using textarea: https://github.com/Mathpix/mathpix-markdown-it/blob/master/examples/react-app/use-parseMarkdownByHTML-method/README.md

Okay, I will try it. Thanks a lot

[SangVoM]

@OlgaRedozubova I tried one case with mathpix-markdown-it demo but it couldn't render tabular's newline, but in vscode it was able to render, can you support me?

Example tabular has $\newline$:

 \begin{tabular}{|l|l|}
\hline
ACTIVITIES OF TEACHER AND STUDENT & MAIN CONTENT \\
\hline
Step 1. Assigning tasks 
 - Teacher: Organizes students for testing 
 $\newline$ - Student: Understands the teacher's requirements. $\newline$ Step 2. Performing tasks $\newline$ - Student: Takes the test seriously & * Test content: $\newline$ Question 1: State the basic content of $\newline$ the current civil air defense work?. $\newline$ Question 2: Explain the tasks of national $\newline$ security protection?. $\newline$ Question 3: What are the students' responsibilities $\newline$ in the task of national security protection?. \\
\hline
\end{tabular}

VSCode:

DEMO:

• Format not support: \textbf{\textit{\underline{formatting}}}

VScode:

DEMO:

[OlgaRedozubova]

@OlgaRedozubova I tried one case with mathpix-markdown-it demo but it couldn't render tabular's newline, but in vscode it was able to render, can you support me?

Demo uses an outdated version of mathpix-markdown-it. I'll fix it.

Just change this script.src = "https://cdn.jsdelivr.net/npm/mathpix-markdown-it@1.0.40/es5/bundle.js"; to script.src = "https://cdn.jsdelivr.net/npm/mathpix-markdown-it@2.0.6/es5/bundle.js"

[SangVoM]

@OlgaRedozubova I tried one case with mathpix-markdown-it demo but it couldn't render tabular's newline, but in vscode it was able to render, can you support me?

Demo uses an outdated version of mathpix-markdown-it. I'll fix it.

Just change this script.src = "https://cdn.jsdelivr.net/npm/mathpix-markdown-it@1.0.40/es5/bundle.js"; to script.src = "https://cdn.jsdelivr.net/npm/mathpix-markdown-it@2.0.6/es5/bundle.js"

Thanks a lot, Can you suggest an editor that can input MathType and render HTML (i use Mathpix-markdown-it) to view and output Latex?

[OlgaRedozubova]

Thanks a lot, Can you suggest an editor that can input MathType and render HTML (i use Mathpix-markdown-it) to view and output Latex?

You can use Snip Web Snip web app is a simple online editor powered by Mathpix Markdown.

Documentation https://mathpix.com/docs/snip/editor-overview#create-and-edit-documents

[SangVoM]

Thanks a lot, Can you suggest an editor that can input MathType and render HTML (i use Mathpix-markdown-it) to view and output Latex?

You can use Snip Web Snip web app is a simple online editor powered by Mathpix Markdown.

Documentation https://mathpix.com/docs/snip/editor-overview#create-and-edit-documents

I need to implement this into my project, how can do it

[OlgaRedozubova]

I need to implement this into my project, how can do it

For the editing side, you can use any text editor, for example, Codemirror Then you need to render the entered text content into HTML using mathpix-markdow-it And paste the resulting HTML into the preview side

[SangVoM]

@OlgaRedozubova I tried one case with mathpix-markdown-it demo but it couldn't render tabular's newline, but in vscode it was able to render, can you support me?

Demo uses an outdated version of mathpix-markdown-it. I'll fix it.

Just change this script.src = "https://cdn.jsdelivr.net/npm/mathpix-markdown-it@1.0.40/es5/bundle.js"; to script.src = "https://cdn.jsdelivr.net/npm/mathpix-markdown-it@2.0.6/es5/bundle.js"

Hi I changed https://cdn.jsdelivr.net/npm/mathpix-markdown-it@2.0.6/es5/bundle.js in source but result not change

[SangVoM]

can you give me demo code ?

[OlgaRedozubova]

Hi I changed https://cdn.jsdelivr.net/npm/mathpix-markdown-it@2.0.6/es5/bundle.js in source but result not change

It works:

Example: https://github.com/Mathpix/mathpix-markdown-it/blob/master/examples/html/input-mmd-to-html.html

[SangVoM]

Hi I changed https://cdn.jsdelivr.net/npm/mathpix-markdown-it@2.0.6/es5/bundle.js in source but result not change

It works:

Example: https://github.com/Mathpix/mathpix-markdown-it/blob/master/examples/html/input-mmd-to-html.html

But \newline not down the line ?

[SangVoM]

And why not render table HTML

<table>

 <tr>

   <th>Company</th>

   <th>Contact</th>

   <th>Country</th>

 </tr>

 <tr>

   <td>Alfreds Futterkiste</td>

   <td>Maria Anders</td>

   <td>Germany</td>

 </tr>

 <tr>

   <td>Centro comercial Moctezuma</td>

   <td>Francisco Chang</td>

   <td>Mexico</td>

 </tr>

 <tr>

   <td>Ernst Handel</td>

   <td>Roland Mendel</td>

   <td>Austria</td>

 </tr>

 <tr>

   <td>Island Trading</td>

   <td>Helen Bennett</td>

   <td>UK</td>

 </tr>

 <tr>

   <td>Laughing Bacchus Winecellars</td>

   <td>Yoshi Tannamuri</td>

   <td>Canada</td>

 </tr>

 <tr>

   <td>Magazzini Alimentari Riuniti</td>

   <td>Giovanni Rovelli</td>

   <td>Italy</td>

 </tr>

</table>

[OlgaRedozubova]

But \newline not down the line ?

This is the behavior of MathJax https://mathjax.github.io/MathJax-demos-web/input-tex2svg.html

You can try wrapping this in block math separators $$\newline$$

And why not render table HTML

Do you get it here? https://htmlpreview.github.io/?https://github.com/Mathpix/mathpix-markdown-it/blob/master/examples/html/input-mmd-to-html.html

Everything works here:

The option htmlTags: true must be set to render HTML

const options = {
        htmlTags: true
};
const html = window.markdownToHTML(input, options);

[OlgaRedozubova]

For correct display of tabular if line breaks are needed you can use nested tables.

\begin{tabular}{|l|l|}
\hline
ACTIVITIES OF TEACHER AND STUDENT & MAIN CONTENT \\
\hline
\begin{tabular}{l}
Step 1. Assigning tasks \\
- Teacher: Organizes students for testing\\
- Student: Understands the teacher's requirements.\\
Step 2. Performing tasks\\
- Student: Takes the test seriously
\end{tabular}
& 
\begin{tabular}{l}
* Test content:\\
Question 1: State the basic content of\\
the current civil air defense work?.\\
Question 2: Explain the tasks of national\\
security protection?.\\
Question 3: What are the students' responsibilities\\
in the task of national security protection?. 
\end{tabular}
\\\hline
\end{tabular}

[SangVoM]

Hi @OlgaRedozubova I have tried adding theinclude_table_html option but still cannot render the table html, please support me on : codesanbox thanks very must.

[OlgaRedozubova]

Hi @OlgaRedozubova I have tried adding the include_table_html option but still cannot render the table html, please support me on : codesanbox thanks very must.

You need to add htmlTags: true,

__html: MM.markdownToHTML(mathMl, {
    htmlTags: true,
        outMath: {
          include_asciimath: true,
          include_mathml: true,
          include_latex: true,
          include_svg: true,
          include_tsv: true,
          include_table_html: true,
         },
      }),

[SangVoM]

HI @OlgaRedozubova, I am currently using the library function fetchLatexFromMathML in demo codesanbox to convert from MathML to Latex. This API is a demo and may not last long. Do you have any solution to help me with this problem?