I have the code like this:
<div class="my-super-class {{#if something}}{{else}}hidden{{/if}}">
Notice the space after 'my-super-class'
Problem:
If to minify this code snippet the space will be removed and we'll get my-super-classhidden class instead of my-super-class hidden.
How to resolve this issue without npm installations?
You should run html-minifier from the command line, with the option
--ignore-custom-fragments "/{{[{]?(.*?)[}]?}}/"
This regex will ignore everything between {{ and }} and minify the rest
PS: you can also add the space right before hidden
<div class="my-super-class{{#if something}}{{else}} hidden{{/if}}">
I haven't found something valuable. The only way for now is to install this minifier and run it on node.js. It also can be well configured in many desired ways. It understands handlebars.js and minifies HTML better than other known minify services.
Related
I am using GitHub pages to write my blog, and an article about regex (regular expression) owns markdown code like this:
---
layout: post
---
inline code blocks: pls replace `(\[(?:[^\]])(.)` by `$1~$2`
However, the resulting page is
(compiling result of the above markdown)
I am new to Jekyll, so can anyone tells me what happens and how to avoid it? Here are my guesses:
Jekyll thinks that there is an equation in (\[(?:[^\]])(.).
all is ok if the two inline code blocks were code blocks, but I think that it is too ugly.
My theme is
gem "minima", "~> 2.5"
Thanks for #Benjamin W. for his direction.
In the document there is an option skipTags that tells mathjax which code are needed to be skipped.
Add code to it solves the problem.
I am developing a project and using Doxygen for the documentation. In the config file, I have put PROJECT_BRIEF = dynamic and effective, but for some weird reason on the HTML, it is appearing as dynamicandeffictive without spaces in between. Is there some sort of configuration which stops this from happening?
As there are spaces in the PROJECT_BRIEF, the sentence should be in quotes like:
PROJECT_BRIEF = "dynamic and effective"
(Pity that you didn't tell us which version of doxygen you are using, so I tried it with the current version 1.8.18, but most likely it will have the same effect on older versions).
I am trying Visual Studio Code lately and i've noticed that when i try to add a line comment in an HTML file (using Ctrl+/ or Ctrl+K Ctrl+C) instead of this: <!-- -->, i get this {# #}.
In JS or CSS files the key bindings work just fine and produce the expected result.
So how can i get the proper type of comments in HTML files?
Finally i found what the problem was. I had installed the twig plugin (for the Twig php template engine) and that was causing the comments issue.
I've just installing VSCode 1.1.1 and try to put a comment in an new html file
To do so, your new file must be,first, save in .html format and after that, you can use CTRL-K CTRL-C to put a comment and it works.
Hope that help you
If you don't want to disable/uninstall any plugin, you can create a snippet to put a comment. For example, I create a snippet that add HTML comments in a PHP file:
"comment HTML": {
"prefix": "chtml",
"body": ["<!-- $1 -->"],
"description": "Comment HTML line"
}
You can insert that right after the comment in File > Preferences > User Snippets > {YourExtension}
Then, when you start typing 'chtml' in that kind of files, IntelliSense will prompt that snippet.
Maybe this is a workarround, but it works excellent for me. Hope it helps!
https://code.visualstudio.com/docs/customization/userdefinedsnippets
For me, it was the (Djaneiro) extension, it made the html files default to django template, so it caused the comments to be wrong in HTML (when pressing ctrl + / )
(commenting them with {% comment %})
List of extensions known to cause this unwanted behavior (Based on my own experience and other answers):
Hugo Language and Syntax Support
Djaneiro
Nunjucks
Tornado
Sublime Babel
Babel
Twig
Django by Baptiste Darthenay (v1.0.0)
(Feel free to edit this answer and add yours)
You may need to restart code after disabling your extension (I did).
In your Visual Studio Code windows, go to File->Preferences->Keyboard Shortcut
This will open two files beside each other like in the screenshot below:
here you can change or create your own shortcuts.
Like I just replaced Ctrl+KU to Ctrl+/
Hope this will work for you !!
For me, the offending extension was Nunjucks (the templating language plugin assumes every .html file is a nunjucks html template)
For others having the problem, the Tornado extension is also a culprit. I had to "disable (workspace)" one by one to find it.
Try uninstalling any python extension packs you may have installed! You can then reinstall the python extension you need individually.
Chances are one of the extensions in the bundle of that extension pack is causing the issue
Click (Ctrl + K C) to comment the html.
Click (Ctrl + K U) to uncomment html.
For me, this was caused by the Sublime Babel extension. Disabling it and restarting VS Code fixed the issue: Cmd+K, Cmd+C works again, as does Cmd+/ for toggling. Also, HTML comment blocks are now correctly styled again.
You can configure the file type at the bottom right corner. you probably are on Django HTML. you can set it to HTML.
I have a simple test jekyll app like so:
index.html is:
<script type="text/javascript" src="/assets/myfile.js"><script>
<p>hi</p>
and the myfile.js files is as follows:
var x = "this is a string";
alert(x + "hi");
I just want to add a plugin so that it can minify the js file before it is written to the _site/assets/myfile.js file
How can i achienve that?
Here's a summary of what I've found while solving this in 2014:
Started with
https://github.com/donaldducky/jekyll-cssminify
Development was going well until it was beat by this project:
http://www.matthodan.com/2012/11/22/jekyll-asset-pipeline.html
...which so far has been my favorite to implement, except it doesn't work now and it looks like development has been halted, so I was forced to turn to
https://github.com/envygeeks/jekyll-assets
...which again, beats #2 but is just a touch trickier to use. Anyway, that's the only one that works, so that's what I'm using now.
There are plugins for HTML and CSS minification with Jekyll, but a search doesn't turn up anything obvious for JS.
However, the source for CSS one above is less than 100 lines and actually uses Juicer to do the minification, which can also do JS, so that plugin could easily be used as a template to implement your own JS minifier (it looks like even just s/css/js/g would be close to working).
I recommend the Jekyll Asset Pipeline gem for this. It supports any language (e.g. Scss, Less, CoffeeScript, Erb, etc.) and has a bunch of features (e.g. asset tagging, compression, gzipping, etc.) that set it apart. It also seems to be the fastest growing Jekyll-related gem these days, which I take to mean that it is gaining traction in the community.
For JS and CSS you can use the Jekyll Asset Bundler It uses the yui-compressor or closure-compiler gems.
For images, I made a drop-in plugin that runs the images through image_optim:
https://gist.github.com/sffc/a828267913591159ab1cc3e1bfde20d7
This one seems fairly updated as compared to other plugins and minifies HTML/XML/CSS/JS Minifier utilising yui-compressor, and htmlcompressor
https://github.com/digitalsparky/jekyll-minifier
My idea is to somehow minify HTML code in server-side, so client receive less bytes.
What do I mean with "minify"?
Not zipping. More like, for example, jQuery creators do with .min.js versions. In other words, I need to remove unnecessary white-spaces and new-lines, but I can't remove so much that presentation of HTML changes (for example remove white-space between actual words in paragraph).
Is there any tools that can do it? I know there is HtmlPurifier. Is it able to do it? Any other options?
P.S. Please don't offer regex'ies. I know that only Chuck Norris can parse HTML with them. =]
A bit late but still... By using output_buffering it is as simple as that:
function compress($string)
{
// Remove html comments
$string = preg_replace('/<!--.*-->/', '', $string);
// Merge multiple spaces into one space
$string = preg_replace('/\s+/', ' ', $string);
// Remove space between tags. Skip the following if
// you want as it will also remove the space
// between <span>Hello</span> <span>World</span>.
return preg_replace('/>\s+</', '><', $string);
}
ob_start('compress');
// Here goes your html.
ob_end_flush();
You could parse the HTML code into a DOM tree (which should keep content whitespace in the nodes), then serialise it back into HTML, without any prettifying spaces.
Is there any tools that can do it?
Yes, here's a tool you could include into a build process or work into a web cache layer:
https://code.google.com/archive/p/htmlcompressor/
Or, if you're looking for a tool to minify HTML that you paste in, try:
http://www.willpeavy.com/minifier/
You can use the Pretty Diff tool: http://prettydiff.com/?m=minify&html It will also minify any CSS and JavaScript in the HTML code, and the minification occurs in a regressive manner so to not prevent future beautification of the HTML back to readable form.
Is there any tools that can do it?
You can use CodVerter Online Web Development Editor for compressing mixed html code.
the compressor was tested multiple times for reliability and accuracy.
(Full Disclosure: I am one of the developers).