Closed hagenburger closed 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.
@benevbright could you provide a test case?
@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
@benevbright thanks, I just wanted an example I can use. No automated test needed for now. I’ll have a look. :)
@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"><p>example</p>
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"><p>example</p>
code = code || false;
</code></pre></div></div></body></html>
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>
@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.
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"><</span>p</span><span class="token punctuation">></span></span>example<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>\ncode = code || false;
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?
@benevbright I renamed it as you suggested :)