Example
``` When you want to display HTML in HTML, `<` and `>` need to be escaped with `<` and `>` first and put into a `` and `` block:
```html +highlight=/x/g
<p>Example</p>
```
Afterwards you can insert the `` and ``:
```html +highlight=/x/g
<p>Example</p>
```
With syntax highlighting (for example with PrismJS) enabled, this simple right
aboce example already gets quite complex:
```html +highlight=/x/g
<
p
>
Example
</
p
>
```
For readability issues, all examples above got formatted and indented. In real
life, this would be one line without whitespace.
## Usage
With this plugin enabled, you only need to know the offset and what to insert:
```javascript +highlight=/(?Example
// 01234567890123
example.insertAt(4, "") // Before the `x`
example.insertAt(4 + 1, "") // After the `x`
```
This is best put into a `example:beforeRender` hook:
```javascript +highlight="example:beforeRender"
const myPlugin = function(config) {
config.hooks.add("example:beforeRender", "my-plugin", function(example) {
example.insertAt(4, "") // Before the `x`
example.insertAt(4 + 1, "") // After the `x`
})
}
```
This of course would format every 4th character of every code example in italic.
A real live example would make use of more dynamic code:
```javascript
const myPlugin = function(config) {
config.hooks.add("example:beforeRender", "my-plugin", function(example) {
const offset = example.content.indexOf("x")
example.insertAt(offset, "") // Before the `x`
example.insertAt(offset + 1, "") // After the `x`
})
}
```
To add this to specific examples only, use a _InfoStringParser:_
```javascript
const myPlugin = function(config) {
config.addInfoStringParser(/italicx/, function(match, rules) {
this.hooks.add("example:beforeRender", "my-plugin", function(example) {
const offset = example.content.indexOf("x")
example.insertAt(offset, "") // Before the `x`
example.insertAt(offset + 1, "") // After the `x`
})
})
}
```
Back to Markdown, the plugin can be used as simple as:
````markdown
```html italicx
Example
```
````
## Setup
To render the Markdown example right above, install this plugin:
```sh
npm i @pimd/html-injector-plugin
```
This requires the _HTML injector_ plugin to be loaded first:
```javascript +highlight=/htmlInjectorPlugin/g,"require(\"@pimd/htmlInjector-plugin\")",/(?Example
\`\`\`
`
const doc = new Document(markdown, config)
const html = doc.render()
console.log(html)
```
---
## Copyright
Copyright 2018++ [Nico Hagenburger](https://www.hagenburger.net). See
[MIT-LICENSE](MIT-LICENSE) for details. Get in touch with
[@hagenburger](https://twitter.com/hagenburger) on Twitter or
[open an issue](https://github.com/hagenburger/pimd/issues/new).
---
_Source: https://npm.io/package/@pimd/html-injector-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._