Multiline triple-backtick code block didn't escape JSX like tag in Protocol template.

[doaortu]

Describe the bug When I tried to define apache config example in a mdx page, something like this:

<VirtualHost *:80>
  ServerName website.com

  ProxyRequests off
  ProxyPreserveHost off
  SSLProxyEngine on

  <Location /js/script.js>
    ProxyPass https://mysite.io/js/script.js
    ProxyPassReverse https://mysite.io/js/script.js
  </Location>

  <Location /api/event>
    ProxyPass https://mysite.io/api/event
    ProxyPassReverse https://mysite.io/api/event
  </Location>

</VirtualHost>

The VirtualHost tag and Location tag just didn't show up in page.

To Reproduce Steps to reproduce the behavior:

1. Make a page in Protocol template

2. insert multiline triple backtick code block with this content, or any jsx like tag

   
   <VirtualHost *:80>
   ServerName website.com
   
   ProxyRequests off
   ProxyPreserveHost off
   SSLProxyEngine on
   
   <Location /js/script.js>
   ProxyPass https://mysite.io/js/script.js
   ProxyPassReverse https://mysite.io/js/script.js
   </Location>
   
   <Location /api/event>
   ProxyPass https://mysite.io/api/event
   ProxyPassReverse https://mysite.io/api/event
   </Location>

3. Save it and navigate to page, the jsx like tag wouldn't show up.

**Expected behavior**
The tag should be properly escaped and showed in the page.

**Screenshots**
![image](https://github.com/user-attachments/assets/137d4426-9e1d-4a79-8e1b-ca3f94509e1c)

**Browser/Device (if applicable)**
 - OS: Linux Xubuntu 24.04
 - Browser Chrome 129
 - Version : TailwindUI Protocol version 0.1.0 (according to package.json)

[reinink]

Hey! Good catch — it appears there was a bug in this template where code blocks with HTML code would render as HTML if no language was specified for the snippet.

The simple fix here is to add a language type to your snippet (ie. ```xml), and then you get the benefit of nicer code highlighting as well:

That said, I do think that the Protocol template should handle this more gracefully if you do omit the language. I've just pushed an update to this template to fix this, so you can either download the latest version of the template from the Tailwind UI website, or you can apply this fix yourself in your own project by applying the following change to your ./src/mdx/rehype.mjs file:

  function rehypeParseCodeBlocks() {
    return (tree) => {
      visit(tree, 'element', (node, _nodeIndex, parentNode) => {
-       if (node.tagName === 'code' && node.properties.className) {
-         parentNode.properties.language = node.properties.className[0]?.replace(
-           /^language-/,
-           '',
-         )
+       if (node.tagName === 'code') {
+         parentNode.properties.language = node.properties.className
+           ? node.properties?.className[0]?.replace(/^language-/, '')
+           : 'txt'
+       }
      })
    }
  }

(Note, you'll need to restart your dev server when making changes to this file.)

I hope that helps! 💪

[doaortu]

Hi, Thank you for spending time to fix this problem.

That is indeed solved the bug.