posthtml-comment-after
v0.5.4
Published
A PostHTML plug-in that adds comments after HTML elements.
Downloads
5
Maintainers
ynakajimaReadme
PostHTML Comment After Plugin
A PostHTML plug-in that adds comments after HTML elements.
Before:
<html>
<body>
<div id="wrapper" class="container">
<p class="wow">OMG</p>
</div>
</body>
</html>After:
<html>
<body>
<div id="wrapper" class="container">
<p class="wow">OMG</p><!-- /.wow -->
</div><!-- /#wrapper.container -->
</body>
</html>Install
npm install posthtml posthtml-comment-after --save-devUsage
const fs = require('fs');
const posthtml = require('posthtml');
const commentAfter = require('posthtml-comment-after');
posthtml()
.use(commentAfter())
.process(html)
.then(result => fs.writeFileSync('./after.html', result.html));Options
- output
- targetAttribute
- match
output.sameline
You can specify whether to insert comments on the same line.
Default
- output.sameline:
true
Add option:
const option = {
output: {
sameline: false
}
};
posthtml()
.use(commentAfter(option))
.process(html)
.then(result => console.log(result.html));Before:
<html>
<body>
<div id="wrapper" class="container">
<p class="wow">OMG</p>
</div>
</body>
</html>After: comment is inserted after a line break.
<html>
<body>
<div id="wrapper" class="container">
<p class="wow">OMG</p>
<!-- /.wow -->
</div>
<!-- /#wrapper.container -->
</body>
</html>
output.idoutput.class
You can specify display / non-display of id and class name in comment.
Default
- output.id:
true - output.class:
true
Add option:
const option = {
output: {
id: true,
class: false
}
};
posthtml()
.use(commentAfter(option))
.process(html)
.then(result => fs.writeFileSync('./after.html', result.html));Before:
<html>
<body>
<div id="wrapper" class="container">
<p class="wow">OMG</p>
</div>
</body>
</html>After: id name is displayed, and class name is hidden.
<html>
<body>
<div id="wrapper" class="container">
<p class="wow">OMG</p>
</div><!-- /#wrapper -->
</body>
</html>Note: If both are set to false, comments will not be inserted.
output.beforeTextoutput.afterText
You can specify the text to insert before and after the comment.
Default
- output.beforeText:
'/' - output.afterText:
''
Add option:
const option = {
output: {
beforeText: 'End of '
afterText: ' !!!!'
}
};
posthtml()
.use(commentAfter(option))
.process(html)
.then(result => fs.writeFileSync('./after.html', result.html));Before:
<html>
<body>
<div id="wrapper" class="container">
<p class="wow">OMG</p>
</div>
</body>
</html>After:
<html>
<body>
<div id="wrapper" class="container">
<p class="wow">OMG</p><!-- End of .wow !!!! -->
</div><!-- End of #wrapper.container !!!! -->
</body>
</html>
output.idTemplateoutput.classTemplate
You can specify how id names and class names are displayed in comments by underscore template format.
Default
- output.idTemplate:
'#<%= attrs.id %>' - output.classTemplate:
'.<% print(attrs.class.trim().replace(/\\s+/g, ".")); %>'
Note: The variables that can be used in the template are PostHTML AST Node properties.
Add option:
const option = {
output: {
idTemplate: ' id: <%= attrs.id.toUpperCase() %>',
classTemplate: ' class: <%= attrs.class.trim().replace(/\\s+/g, ", ") %>'
}
};
posthtml()
.use(commentAfter(option))
.process(html)
.then(result => console.log(result.html));Before:
<html>
<body>
<div id="wrapper" class="container">
<p class="wow foooo">OMG</p>
</div>
</body>
</html>After:
<html>
<body>
<div id="wrapper" class="container">
<p class="wow foooo">OMG</p><!-- / class: wow, foooo -->
</div><!-- / id: WRAPPER class: container -->
</body>
</html>output.template
You can specify the comment format freely by underscore template format.
Note: This option overrides
output.idTemplate,output.classTemplate,output.beforeText, andoutput.afterText.
Default
- output.template:
false
Add option:
const option = {
output: {
template: '<% if (attrs.id) { %>=== end of <%= attrs.id %> ===<% } %>'
}
};
posthtml()
.use(commentAfter(option))
.process(html)
.then(result => console.log(result.html));Before:
<html>
<body>
<div id="wrapper" class="container">
<p class="wow">OMG</p>
</div>
</body>
</html>After:
<html>
<body>
<div id="wrapper" class="container">
<p class="wow">OMG</p>
</div><!-- === end of wrapper === -->
</body>
</html>Note: If the compiled text is empty, comments are not inserted.
output.compiler
You can freely customize the comment contents with the function you created.
Note: This option overrides
output.template,output.idTemplate,output.classTemplate,output.beforeText, andoutput.afterText.
Default
- output.compiler:
false
Add option:
function myCompiler (className) {
return function (node) {
if (!node.attrs || !node.attrs.class) {
return '';
}
if (node.attrs.class.split(' ').includes(className)) {
return `👈 This Element has .${className} !!!`;
}
return '';
};
}
const option = {
output: {
compiler: myCompiler('wow')
}
};
posthtml()
.use(commentAfter(option))
.process(html)
.then(result => console.log(result.html));Before:
<html>
<body>
<div id="wrapper" class="container">
<p class="wow foooo">OMG</p>
</div>
</body>
</html>After:
<html>
<body>
<div id="wrapper" class="container">
<p class="wow foooo">OMG</p><!-- 👈 This Element has .wow !!! -->
</div>
</body>
</html>Note: If the compiled text is empty, comments are not inserted.
output.replaceAdjacentHyphens
You can specify whether to replace adjacent hyphens.
Default
- output.replaceAdjacentHyphens:
false
Note: In WHATWG 's HTML, it is now allowed to accept adjacent hyphens in comments. (Update commit of 2016-06-21)
Add option:
const option = {
output: {
replaceAdjacentHyphens: true
}
};
posthtml()
.use(commentAfter(option))
.process(html)
.then(result => console.log(result.html));Before:
<html>
<body>
<div id="wrapper" class="container">
<a class="btn btn--large">OMG</a>
</div>
</body>
</html>After: If true is specified, it is replaced with '__'.
<html>
<body>
<div id="wrapper" class="container">
<a class="btn btn--large">OMG</a><!-- /.btn.btn__large -->
</div><!-- #wrapper.container -->
</body>
</html>Add option:
const option = {
output: {
replaceAdjacentHyphens: '~~'
}
};
posthtml()
.use(commentAfter(option))
.process(html)
.then(result => console.log(result.html));After:
<html>
<body>
<div id="wrapper" class="container">
<a class="btn btn--large">OMG</a><!-- /.btn.btn~~large -->
</div><!-- #wrapper.container -->
</body>
</html>targetAttribute
Insert comments only on elements with specified attributes.
Default
- targetAttribute:
false
Add option:
const option = {
targetAttribute: 'data-posthtml-comment-after'
};
posthtml()
.use(commentAfter(option))
.process(html)
.then(result => console.log(result.html));Before:
<html>
<body>
<div class="block" data-posthtml-comment-after>
<p class="block__elem"></p>
</div>
<div class="block block--mod">
<p class="block__elem" data-posthtml-comment-after></p>
<p class="block__elem"></p>
</div>
</body>
</html>After:
<html>
<body>
<div class="block">
<p class="block__elem"></p>
</div><!-- /.block -->
<div class="block block--mod">
<p class="block__elem"></p><!-- /.block__elem -->
<p class="block__elem"></p>
</div>
</body>
</html>match
You can specify expression to match the node.
Default
- match:
false
Add option:
const option = {
match: {
attrs: {
class: /^(?!.*__).+$/ // match class not including '__'.
}
}
};
posthtml()
.use(commentAfter(option))
.process(html)
.then(result => console.log(result.html));Before:
<html>
<body>
<div class="block">
<p class="block__elem"></p>
</div>
<div class="block block--mod">
<p class="block__elem"></p>
<p class="block__elem"></p>
</div>
</body>
</html>After: comment is inserted only in BEM Block
<html>
<body>
<div class="block">
<p class="block__elem"></p>
</div><!-- /.block -->
<div class="block block--mod">
<p class="block__elem"></p>
<p class="block__elem"></p>
</div><!-- /.block.block--mod -->
</body>
</html>Contributing
See PostHTML Guidelines and contribution guide.