xmp-escape-loader
A loader that automatically escapes text within <![CDATA[</code> tags. This allows you to use <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><xmp></code> tags within React components and have the inner HTML render correctly:</p><p class="my-3">``<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx</p><p class="my-3">function MyXMPComponent () {<br /> return (<br /> <div><br /> <p> I'm outside the xmp tags! </p><br /> <xmp><br /> <p> I'm inside the xmp tags! </p><br /> ]]>
)
}
// Will render:
// I'm outside the xmp tags!
//
I'm inside the xmp tags!
`
$3
To load your code with this loader, simply add it to your existing JS loaders in your webpack config. It's also possible to use a tag other than
<![CDATA[<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> by passing in a loader option.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br />// webpack.config.js<br /> ...<br /> rules: [<br /> {<br /> test: /\.js$/,<br /> use: [<br /> 'babel-loader',<br /> 'xmp-escape-loader',<br /> ],<br /> },<br /> ...<br /> ],</p><p class="my-3">// with custom delimiter tag<br /> ...<br /> rules: [<br /> {<br /> test: /\.js$/,<br /> use: [<br /> 'babel-loader',<br /> {<br /> loader: 'xmp-escape-loader',<br /> options: {<br /> tag: '<pre>'<br /> }<br /> },<br /> ],<br /> },<br /> ...<br /> ],</p><p class="my-3">// with custom escape function<br /> ...<br /> rules: [<br /> {<br /> test: /\.js$/,<br /> use: [<br /> 'babel-loader',<br /> {<br /> loader: 'xmp-escape-loader',<br /> options: {<br /> escape: string => escapeHtml(string).toLowerCase()<br /> }<br /> },<br /> ],<br /> },<br /> ...<br /> ],<br /></code>``</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">This loader uses <a href="https://www.npmjs.com/package/block-loader" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">block-loader</a> and <a href="https://www.npmjs.com/package/escape-html" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">escape-html</a> under the hood to parse and format input text. This package is an abstracted implementation of the use case outlined in the block-loader readme, so lots of credit is due to <a href="https://www.npmjs.com/~pomax" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">pomax</a>!</p><p class="my-3"></p><p class="my-3"></p></div></div></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div><template id="P:3"></template></div></div></div><script>self.__next_f.push([1,"23:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n24:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^21.2.1\"}]\n"])</script><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><script>$RC("B:1","S:1")</script></body></html>]]>