https://github.com/launchpadlab/xmp-escape-loader
Escape HTML in <xmp> tags
https://github.com/launchpadlab/xmp-escape-loader
Last synced: about 1 year ago
JSON representation
Escape HTML in <xmp> tags
- Host: GitHub
- URL: https://github.com/launchpadlab/xmp-escape-loader
- Owner: LaunchPadLab
- License: mit
- Created: 2017-11-16T22:25:16.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-07-19T20:32:30.000Z (almost 8 years ago)
- Last Synced: 2025-04-09T19:55:12.873Z (about 1 year ago)
- Language: JavaScript
- Size: 43.9 KB
- Stars: 1
- Watchers: 19
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# xmp-escape-loader
A 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!
```
### Usage
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()
}
},
],
},
...
],
```
### How it works
This loader uses [block-loader](https://www.npmjs.com/package/block-loader) and [escape-html](https://www.npmjs.com/package/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](https://www.npmjs.com/~pomax)!