Code Block HTML code parse

[25ganesh92]

I want to parse html code from code block dynamically

I'm using Input field in .md file as

<input class="textbox-value md-input" type="text" placeholder="$name" onkeyup="e_name(this);"/>

and to view this input on mulple places of same .md file I used .js as MKDocs Material custom js Feature

// Name
function e_name(a) {
    const elements = document.querySelectorAll(".e_name");
    elements.forEach((e) => {
        e.innerHTML = a.value;
    })
}

Repository for your reference : - https://github.com/25ganesh92/mkdocs-material-test
GitHub Pages for Live Demo : - https://25ganesh92.github.io/mkdocs-material-test/

---

But when Im using Markdown to print this input in Code Block

Using Markdown Method

```bash title="echo Example"
echo "{++Hello++} <span class="name">$name</span>"

Markdown Code Screenshot

Output

But when using HTML Code insted of Markdown Code Block then

<div class="highlight"><span class="filename">echo Example</span><pre><code>echo "{++Hello++} <span class="e_name">$name</span>"</code></pre></div>

Output

Here I found that {++Hello++} is parsed from Markdown Code Block.
So can you Please Guide me to Parse <span class="e_name">$name</span> , as HTML method is working but language color highlighting is missing

[facelessuser]

1. Code blocks take exactly what you give them and preserve it. This is so you can include HTML in code blocks and show the HTML code, not the browser rendered elements.
2. If you want to preserve HTML and have the browser rendered HTML elements, you have two choices:
   1. Use raw HTML (as you've already demonstrated).
   2. Use custom fences: https://facelessuser.github.io/pymdown-extensions/extensions/superfences/#custom-fences.

I do not have time to code up a custom solution for you though, but generally, it is possible, though I cannot tell you at this time how complicated it may be. Your best bet may be to use raw HTML if you are not keen on trying to code up a custom fence.

[25ganesh92]

Thank You @facelessuser for explanation.
Ill continue use raw HTML and try to code up a custom fence as coding custom fence is new for me..

When you have time and If possible for you then please provide solution from you to built MKDocs Material with variables that can Reuse Dynamically..

Thank you once again..

[ajsteen]

Hello, I am wondering if you were able to code up a custom fence to utilize the tracked value? Also, do you have a method for multiple inputs being able to be tracked and output later on in the document?