search

hagenburger / pimd

PIMD – Processing Instructions for Markdown
https://hagenburger.github.io/pimd-docs/
MIT License
20 stars 5 forks source link

HTML injector plugin #51

Closed hagenburger closed 5 years ago

hagenburger commented 5 years ago

@benevbright I renamed it as you suggested :)

benevbright commented 5 years ago

The highlight breaks the HTML tag in the code example. After the code example passes the highlight, HTML tag in the example became a real tag. I'm finding what causes the problem.

hagenburger commented 5 years ago

@benevbright could you provide a test case?

benevbright commented 5 years ago

@hagenburger Yes, I will. But it takes time because I'm not familiar with test code yet. In the meanwhile, you can simply reproduce it with html.

code example I used is

<p>example</p>
code = code || false;

And result is

screen shot 2018-09-08 at 12 15 32 pm
hagenburger commented 5 years ago

@benevbright thanks, I just wanted an example I can use. No automated test needed for now. I’ll have a look. :)

hagenburger commented 5 years ago

@benevbright I tried this code inside the project folder – can you add when you did anything in addition to this?

const { Document } = require(".")
const Config = require("./lib/config")
const htmlInjectorPlugin = require("./plugins/html-injector")

const config = new Config()
config.use(htmlInjectorPlugin)

let doc = new Document(
  `
~~~ html
<p>example</p>
code = code || false;
~~~
`,
  config
)

console.log(doc.render())

The result is:

<div class="pimd-example"><div class="pimd-code"><pre><code class="lang-html">&lt;p&gt;example&lt;/p&gt;
code = code || false;
</code></pre></div></div>

When using:

doc.renderDocument().then(console.log)

The result is:

<html><head><style></style><script></script></head><body><div class="pimd-example"><div class="pimd-code"><pre><code class="lang-html">&lt;p&gt;example&lt;/p&gt;
code = code || false;
</code></pre></div></div></body></html>
benevbright commented 5 years ago

Hm.. this is my code. Do you think is there anything I did wrong?

const fs = require('fs');

const { Document } = require('pimd');
const Config = require('pimd/lib/config');

const input = `
# Hello
This is pimd experiment.

~~~ html
<p>example</p>
code = code || false;
~~~
`

const config = new Config();
config.highlight = (code, lang) => {
  return code.replace(/false/, '<b>false</b>');
}
const doc = new Document(input, config);

doc.renderDocument().then(res => {
  fs.writeFile('index.html', res, error => console.log('error: ', error));
})

result is

<html><head><style></style><script></script></head><body><h1>Hello</h1><p>This is pimd experiment.</p><div class="pimd-example"><div class="pimd-code"><pre><code class="lang-html"><p>example</p>
code = code || <b>false</b>;
</code></pre></div></div></body></html>
hagenburger commented 5 years ago

@benevbright it is expected that the highlight function returns HTML-escaped code. If it would be HTML-escaped afterwards, the syntax highlighting <span>s would be escaped.

hagenburger commented 5 years ago

For example this is how Prism works:

const Prism = require("prismjs")
const source = `
<p>example</p>
code = code || false;
`
const result = Prism.highlight(source, Prism.languages['html'])
console.log(result)
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>example<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>\ncode = code || false;
benevbright commented 5 years ago

I can't understand correctly because of my lack of knowledge about HTML. So, HTML tag in code example and highlighting, those two are not compatibility?