A loader that automatically escapes text within `<xmp>` tags. This allows you to use `<xmp>` tags within React components and have the inner HTML render correctly:
npm install xmp-escape-loaderA loader that automatically escapes text within tags. This allows you to use tags within React components and have the inner HTML render correctly:
``jsx
function MyXMPComponent () {
return (
I'm outside the xmp tags!
I'm inside the xmp tags!
// Will render:
// I'm outside the xmp tags!
//
I'm inside the xmp tags!
`
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
by passing in a loader option.`jsx
// webpack.config.js
...
rules: [
{
test: /\.js$/,
use: [
'babel-loader',
'xmp-escape-loader',
],
},
...
],// with custom delimiter tag
...
rules: [
{
test: /\.js$/,
use: [
'babel-loader',
{
loader: 'xmp-escape-loader',
options: {
tag: '
'
}
},
],
},
...
],// with custom escape function
...
rules: [
{
test: /\.js$/,
use: [
'babel-loader',
{
loader: 'xmp-escape-loader',
options: {
escape: string => escapeHtml(string).toLowerCase()
}
},
],
},
...
],
``This loader uses block-loader and escape-html 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 pomax!