# Combine multiple modes (htmlmixed and stex)

Hi Community! Hope you are doing fine. I’m working with Codemirror inside a React app, and I wanted to know if there’s a way to combine two modes: htmlmixed and stex. I managed to get both modes working separately, but there are some cases were I want to highlight html tags and latex code.
I saw an example that hoes something like this:

CodeMirror.defineMode('stex_html', function (config) {
return CodeMirror.multiplexingMode(
CodeMirror.getMode(config, 'text/html'), {
mode: CodeMirror.getMode(config, 'text/stex')
})
})


But I can’t get it working.
Here’s an example of the code I want to parse:

<p>A \$$???mA??? \text{-kg} \$$ object A is connected with a massless string across a massless, frictionless pulley to a \$$???mB??? \text{-kg} \$$ object B. Object A rests on a nearly frictionless plane, which is tilted at an angle \$$\theta \$$ of \$$???thetadeg???^{\circ} \$$ as shown.</p>



Thanks in advance for the help!

You may be able to set up a multiplexing mode with HTML as the base mode, switching to stex when it finds an escaped paren.

Thanks for the reply marijn! I managed to solve this. Here’s the fix:

CodeMirror.defineMode('html_in_stex', function (config) {
return CodeMirror.multiplexingMode(
CodeMirror.getMode(config, 'text/x-stex'),
{ open: '\\text{',
close: '}',
mode: CodeMirror.getMode(config, 'text/html'),
delimStyle: 'delimit' }
)
})

CodeMirror.defineMode('html_stex', function (config) {
return CodeMirror.multiplexingMode(
CodeMirror.getMode(config, 'text/html'),
{ open: '\\\$$', close: '\\\$$',
mode: CodeMirror.getMode(config, 'html_in_stex'),
delimStyle: 'delimit' },
{ open: '$$', close: '$$',
mode: CodeMirror.getMode(config, 'html_in_stex'),
delimStyle: 'delimit' }
)
})


This snippet consider stex inside html, and also html inside stex (if the user want to include some HTML entities inside a latex text)