marked js exclude highlight regex - javascript-marked

Question

I am using marked.js to present a code editor. I want to embed an input box whenever content wrapped in {% %}. and the correct value to that input box, is the content between. for example, {% I love husky %}, will indicate I love husky to be correct answer.
<script>
// Set options
// `highlight` example uses `highlight.js`
marked.setOptions({
renderer: new marked.Renderer(),
highlight: function(code, language) {
const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
return hljs.highlight(validLanguage, code).value
.replace(/&/g, '&');
},
pedantic: false,
gfm: true,
breaks: false,
sanitize: false,
smartLists: true,
smartypants: false,
xhtml: false,
});
</script>
to parse content into element:
function rego(element, content) {
element.innerHTML = marked(content.trim());
element.querySelectorAll('p').forEach(pt => {
pt.innerHTML = marked(pt.innerHTML.replace('>', '>').replace('<', '<'));
});
codeInput(element, element.innerHTML);
MathJax.typesetPromise([element]);
}
Apply regex to replace {% %} in braces to input box:
function codeInput(code, raw) {
code.innerHTML = raw.replace(/\{\%(.*)\%\}/g, a => `<input autocomplete="off" class="what" value="${a.slice(2, -2).trim()}" />`);
code.querySelectorAll('input.what').forEach(input=>{
if(input.value){
input.data = input.value;
input.value = null;
}
});
}
it works most of the time, however in code block quote, which sometimes marked highlight will mess it up, for example, when content is this:
```py
print({% 1 %})
```
highlight will capture 1 because it is integer type and parse something like:
<pre><code class="language-py">print({% <span class="hljs-number">1</span> %})</code></pre>
which looks like (there is an input box successfully parsed between print( and 1" />)):
print(1" />)
is there a way I can configure marked.js highlight.js to avoid highlighting content between {% %}
thanks very much.