Noob question but I want to be able to quickly comment HTML code using keyboard shortcuts in VS code. Problem is I get this:-
<!-- <div class="whatever">
<h1>Hellow World!</h1>
<p>this is code I wrote in HTML</p>
</div> -->
instead of this:-
<!-- <div class="whatever"> -->
<!-- <h1>Hellow World!</h1> -->
<!-- <p>this is code I wrote in HTML</p> -->
<!-- </div> -->
Anyone know a good extension for this in VS Code? Thanks
Julien
See this extension written by me, Toggle Line Comments, that will do what you want.
-- or older answer --
Select through your text - i.e., from some part of the first line to some part of the last line you want separately commented. I.e., highlight your block of html to comment.
Shift-Alt-I will put a cursor at the end of each line.
Ctrl-/ will comment each line separately.
This only seems necessary for html, not js or scss for example.
I suppose if you wanted to reduce keystrokes you could make a macro for steps 2 and 3 combined.
Related
I want to know if is possible to add comments to existing html closing tags, for example:
<div class="container">
Content
</div>
And I want to format it to be like this:
<div class="container">
Content
</div> <!-- /.container -->
With emmet (.container>{Content}) I will have to rewrite all my code to get the comments, so it's possible to add closing comment with sublime text 3 to an existing html code instead to rewrite it again using emmet?
I'm not sure I understand the end of your post regarding emmet, but adding a comment after the HTML closing tag should be fine as any comments in an HTML file are ignored by the browser regardless of where they are placed.
Hope this helps.
I am currently tweaking a BigCommerce theme for my employer. They have asked me to remove and change a few CSS / HTML elements to fit the style and functionality that they are after.
Rather than just DELETING the functionality within the theme, I was hoping to just comment it out in case it is needed later. But I am having an issue with the formatting.
The following is the code as displayed in the ProductDetails.html Panel file:
<div class="Content" id="prodAccordion">
%%Panel.ProductTabs%%
%%Panel.ProductDescription%%
%%Panel.ProductVideos%%
%%Panel.ProductWarranty%%
%%Panel.ProductOtherDetails%%
%%Panel.SimilarProductsByTag%%
%%Panel.ProductReviews%%
%%Panel.ProductByCategory%%
%%Panel.SimilarProductsByCustomerViews%%
</div>
I am trying to comment out the last 3 lines only.
However, when I do, the end of the comment ( --> ) shows up in the browser. I have closed the comments correctly but there must be some simple concept that I am missing. Hoping the good people at SO can help.
Below is the code as I have saved it and a screenshot of the display in my browser. The first screen shot is how it looks before I add any comments and the second is after I add them. You can clearly see the closing comment in the second image, can anyone tell me why??
Thanks in advance for any help.
<div class="Content" id="prodAccordion">
%%Panel.ProductTabs%%
%%Panel.ProductDescription%%
%%Panel.ProductVideos%%
%%Panel.ProductWarranty%%
%%Panel.ProductOtherDetails%%
%%Panel.SimilarProductsByTag%%
<!--%%Panel.ProductReviews%%-->
<!--%%Panel.ProductByCategory%%-->
<!--%%Panel.SimilarProductsByCustomerViews%%-->
</div>
Nicole, I've dealt with this and can definitely explain why it's happening and how to avoid it.
Why It's Happening
It's happening because this is how BigCommerce's server side PHP processor parses the code you're looking at. The code is basic HTML, while the %%Panel.something%% are simply ways for BigCommerce's processor to recognize as a command for BigCommerce.
Anytime the BC site sees %%Panel.Name%%, it knows that this is not HTML, but rather a place where BC server-side processor should insert the Panel file before serving this HTML to the user.
How to Avoid it and Comment-out Correctly
Simply, remove the % symbols and use regular commenting. This will work:
<!-- Panel.ProductReviews-->
So will this:
<!--%%Panel.ProductReviews-->
And this:
<!-- Panel.ProductReviews%%-->
Or even this:
<!-- %Panel.ProductReviews% -->
Mainly, you have to make sure that each side of a Panel.Name reference, doesn't have 2 % symbols on each side.
To Restore the Correctly Commented Out Code/Panel
Simply restore the 2 % symbols on each side like so (the spaces between - and % don't matter, you can have none or 10):
<!-- %%Panel.ProductReviews%% -->
Why You're Seeing --> On Live Site
As broached/explained in the comments of your question, you're seeing --> when commenting out a Panel like so <!--%%Panel.Name%%--> because by commenting out the Panel that way without removing at least one of the % symbols, you're still telling BigCommerce to load the Panel HTML file, but to place it within the
<!-- [HTML code from panel goes here] -->
The problem with that is simply that some of these Panel files contain comments themselves.
For example, let's say you comment out %%Panel.Header%% like so !<--%%Panel.Header%%-->. The Header.html Panel may be code like this:
<!-- this is the header code panel-->
<div class"MainHeader">
<ul class="TopNav">
...
</ul>
</div>
By commenting out the code without removing the % symbols, BigCommerce will load this:
<!--
<!-- this is the header code panel-->
<div class"MainHeader">
<ul class="TopNav">
...
</ul>
</div>
-->
when a user open a page that uses the Header.html panel, they will see this code as commented <!--<!-- this is the header code panel-->, because the browser will start the comment at the first <!-- and end the comment at the first appearance of -->.
In the browser, the user will see the uncommented remains:
<div class"MainHeader">
<ul class="TopNav">
...
</ul>
</div>
-->
And hence you'll see some extra, probably broken HTML, plus the stray --> somewhere at the end of the improperly commented code.
Again, to avoid all this, just remove one of the % symbols, then use regular commenting to comment out a Panel file reference.
Let me know if this helps and if you have any other questions.
I've got an issue where my some of my markup from a file in my _/includes folder, is being printed to my page inside <p> tags.
Here's what's inside my _includes/gallery.html file:
{% assign rows = page.gallery[include.gallery] %}
</section> <!-- close this -->
</div> <!-- and this -->
</div> <!-- this too -->
<section class="image-gallery">
...
</section>
<div class="container"> <!-- open this -->
<div> <!-- and this -->
<section> <!-- this too -->
I'm trying to close out some elements, and re-open them after my .image-gallery. But for some reason, my closing and opening tags are being printed inside <p> tags
Like this:
<pre><code></section>
</code></pre>
<p></div>
</div></p>
<section class="image-gallery">
...
Is there any way to stop this from happening? It seems to only affect non-closed tags, like the ones in my example. Everything inside .image-gallery displays correctly.
Anyone know why this is happening? Any help is appreciated. Thanks in advance!
Ok, I get it.
You including _includes/gallery.html from a .md file, so markdown first includes, then try to parse the code.
As you code has unopened tags at the beginning (</section></div></div>) they are treated as markdown, not html.
Edit:
The solution is to surround your code with :
{::nomarkdown}
your code here
{:/nomarkdown}
This avoid your html to be parsed by kramdown.
Is there a plugin to help with HTML commenting a block of code that may already contain other comments?
<div class="wrapper">
<div class="container"></div>
<!-- /.container -->
</div>
<!-- /.wrapper -->
BBEdit has a built in feature where if you select all of this code and apply a block comment, it will change the existing comments temporarily so that the main block comment can be applied. The output in the editor would look like:
<!--
<div class="wrapper">
<div class="container"></div>
<!~~ /.container ~~>
</div>
<!~~ /.wrapper ~~>
-->
Uncommenting the block would set the ~ characters back to dashes - so the individual comments would still be in place.
I am not looking for this specific functionality, but something that allows for block commenting content that already contains HTML comments without having to manually remove/edit the existing comments.
I could not find a plugin that does this, so I wrote one.
Installation instructions are available at https://github.com/philsinatra/HTMLNestedComments
Often while coding view templates in html, my habit of adding some helpful comments causes lots of time-consuming effort while testing.
Consider this code...
<!-- Here starts the sidebar -->
<div id="sidebar">
....
</div>
<!-- Here starts the main contents pane -->
<div id="main-contents">
...
</div>
<!-- Here starts the footer -->
<div id="footer">
...
</div>
Now, if I have to hide out some portion of the view template, in case of php I would just select the desired code and put single-line comments (using a shortcut key most of the times).
However, in html code, where only the block comments work, I end-up removing all the closing comment tags (-->) till the position I want the commenting to occur - something like this...
<!-- Here starts the sidebar
<div id="sidebar">
....
</div>
<!-- Here starts the main contents pane
<div id="main-contents">
...
</div>
<!-- Here starts the footer
<div id="footer">
...
</div>-->
Then when I'm done testing I have to go through the agony of putting back those closing tags.
Is there a better and time saving way of block commenting in HTML?
Yes, to comment structural metadata out,
Using <script>/* ... */</script> in .html
Comment out large sections of HTML (Comment Out Block)
my personal way in a .html file is opening: <script>/* and close it with */</script>
<script>/* hiding code go here */</script>
Is a workaround to the problem since is not HTML.
Considering your code in .html...
<!-- Here starts the sidebar -->
<div id="sidebar">
....
</div>
<script>/*
<!-- Here starts the main contents pane -->
<div id="main-contents">
...
</div>
<!-- Here starts the footer -->
<div id="footer">
...
</div>
*/</script>
And in a case is HTML inside PHP file using comment tag <?/* or <?php /* and close it with */?> . Remember that the file must be .php extension and don't work in .html.
<?/* hiding code go here */?>
Considering your code in .php...
<!-- Here starts the sidebar -->
<div id="sidebar">
....
</div>
<?/*
<!-- Here starts the main contents pane -->
<div id="main-contents">
...
</div>
<!-- Here starts the footer -->
<div id="footer">
...
</div>
*/?>
Is worth nothing that is not HTML but a common developer practice is to comment out parts of metadata so that it will not be rendered and/or executed in the browser. In HTML, commenting out multiple lines can be time-consuming. It is useful to exclude pieces of template structural metadata containing comments, CSS or code and systematically commenting out to find the source of an error.
It is considered a bad practice to comment blocks out and it is recommended to use a version control system.
The attribute "type" is required in HTML4 and optional in HTML5.
Depends on the extension. If it's .html, you can use <? to start and ?> to end a comment. That's really the only alternative that I can think of. http://jsfiddle.net/SuEAW/
you can try to replace --> with a different string say, #END# and do search and replace with your editor when you wish to return the closing tags.
I find this to be the bane of XML style document commenting too. There are XML editors like eclipse that can perform block commenting. Basically automatically add extra per line and remove them. May be they made it purposefully hard to comment that style of document it was supposed to be self explanatory with the tags after all.
Put a space between the "-->" of your header comments. e.g. "- ->"
My view templates are generally .php files. This is what I would be using for now.
<?php // Some comment here ?>
The solution is quite similar to what #Robert suggested, works for me. Is not very clean I guess.
Eclipse Juno has a good way for it. You just do the cmd+/
The following works well in a .php file.
<php? /*your block you want commented out*/ ?>
No. Unless you find a tool that does what you described for you.
Depending on your editor, this should be a fairly easy macro to write.
Go to beginning of line or highlighted area
Insert <!--
Go to end of line or highlighted area
Insert -->
Another macro to reverse these steps, and you are done.
Edit: this simplistic approach does not handle nested comment tags, but should make the commenting/uncommenting easier in the general case.
/* (opener)
*/ (closer)
for example,
<html>
/*<p>Commented P Tag </p>*/
<html>