How to add block comments in HTML? [duplicate] - html

I have some HTML code on a page that I don't want to erase, but make inactive for the short term. How can I make the browser ignore parts of the page in the same way the // works in some programming languages?

Behold HTML comments:
<!-- comment -->
http://www.w3.org/TR/html401/intro/sgmltut.html#idx-HTML
The proper way to delete code without deleting it, of course, is to use version control, which enables you to resurrect old code from the past. Don't get into the habit of accumulating commented-out code in your pages, it's no fun. :)

HTML Comments:
<!-- <div> This div will not show </div> -->
See Reference
CSS Comments:
/* This style will not apply */
See Reference
JavaScript Comments:
// This single line JavaScript code will not execute
OR
/*
The whole block of JavaScript code will not execute
*/
See Reference

To comment block with nested comments: substitute inner (block) comments from "--" to "++"
<!-- *********************************************************************
* IMPORTANT: To uncomment section
* sub inner comments "++" -> "--" & remove this comment
*********************************************************************
<head>
<title>My document's title</title> <++! My document's title ++>
<link rel=stylesheet href="mydoc.css" type="text/css">
</head>
<body>
<++! My document's important HTML stuff ++>
...
...
...
</body>
*********************************************************************
* IMPORTANT: To uncomment section
* sub inner comments "++" -> "--" & remove this comment
*********************************************************************
-->
Thus, the outer most comment ignores all "invalid" inner (block) comments.

Just create a multi-line comment around it. When you want it back, just erase the comment tags.
For example, <!-- Stuff to comment out or make inactive -->

Use:
<!-- This is a comment for an HTML page and it will not display in the browser -->
For more information, I think 3 On SGML and HTML may help you.

If you are using Eclipse then the keyboard shortcut is Ctrl + Shift + / to add a group of code. To make a comment line or select the code, right click -> Source -> Add Block Comment.
To remove the block comment, Ctrl + Shift + \ or right click -> Source -> Remove Block comment.

Reason of comments:
Comment out elements temporarily rather than removing them, especially if they've been left unfinished.
Write notes or reminders to yourself inside your actual HTML documents.
Create notes for other scripting languages like JavaScript which requires them
HTML Comments
<!-- Everything is invisible -->

Related

Deleting comments in MVC view

I want to include html-comment in my view (mvc3-app):
<!-- comment -->
but Razor delete this code on render page. I try to use
#Html.Raw ("<!-- Comment -->")
but without result.
p.s. i need to use comment for google-adsense targeting.
edited:
Add Html.Raw result
Left side -> VS code. Right side -> FireBug
Razor view engine deletes from resulting markup 'server-side' comments within a #* ... *# block, but it keeps 'client-side' comments (i.e. HTML comments) - <!-- ... -->.
They can be deleted by your browser markup viewer. Try to open full page markup or view it in another tool.

How to get Zencoding to add a closing comment to divs in Sublime Text 2?

I had previously managed to get Zencoding in ST2 to autocomment closing tags eg:
I'd type div.my_div and hit tab and as well as creating the div, it would also add a closing comment so that I can easily navigate the closing div tags in my document.
<div class="my_div">
*
</div> <!-- .my_div -->
Do any of you know how to replicate this?
Thank you.
You should use “comment“ filter: http://code.google.com/p/zen-coding/wiki/Filters
.my_tag|c
You can also make ZC to automatically apply “comments” filter to HTML. It‘s a bit hacky, but you need to open zen_settings.py file and add c filter at https://github.com/sublimator/ZenCoding/blob/master/zencoding/zen_settings.py#L511
It should look like this:
"filters": "html,c"

HTML Comments Clarification

Can I use /* */ comment tags in html .
If not why because they are common for comments ?
No you cannot. You can use <!-- -->
As to the second part of the question, I can't really help you there :)
EDIT - Just realized that /* */ wouldn't be tags at all, which would make sense as to why you can't use them,
No, you can't, because the specification says so:
HTML comments have the following syntax:
<!-- this is a comment --> <!-- and so is this one,
which occupies more than one line -->
White space is not permitted between the markup declaration open
delimiter(""). A common error is to include a
string of hyphens ("---") within a comment. Authors should avoid
putting two or more adjacent hyphens inside comments.
Information that appears between comments has no special meaning
(e.g., character references are not interpreted as such).
Note that comments are markup.
That last line tells you why you can't use /* */ - because HTML comments are markup too, just like any other tag, and those "universal comments" would not be tags.
You need to use:
<!-- A Comment -->
in HTMl as far as I'm aware.
/*
*/
is not universal, although it is common for block comments

Prevent CKEditor from formatting code in source mode

How can you prevent any automatic formatting when in CKEditor when viewing in source mode?
I like to edit HTML source code directly instead of using the WYSIWYG interface, but whenever I write new lines, or layout tags how I would indent them, it all gets formatted when I switch to WYSIWYG mode and then back to source mode again.
I stumbled upon a CKEditor dev ticket, Preserve formatting of ProtectedSource elements, that alluded to a setting which may have existed once upon a time which would be exactly what I'm after. I just want to know how I can completely turn off all automatic formatting when editing in source mode.
I came up with a solution I thought would be foolproof (albeit not a pleasant one).
I learned about the protectedSource setting, so I thought, well maybe I can just use that and create an HTML comment tag before all my HTML and another after it and then push a regular expression finding the comment tags into the protectedSource array, but even that (believe it or not) doesn't work.
I've tried my expression straight up in the browser outside of CKEditor and it is working, but CKEditor doesn't protect the code as expected (which I suspect is a bug involving comment tags, since I can get it to work with other strings). In case you are wondering, this is what I had hoped would work as a work-around, but doesn't:
config.protectedSource.push( /<!-- src -->[\s\S]*<!-- end src-->/gi );
and what I planned on doing (for what appears to be the lack of a setting to disable formatting in source mode) was to nest all my HTML within the commented tags like this:
<!-- src -->
<div>some code that shouldn't be messed with (but is)</div>
<!-- end src -->
I'd love to hear if anyone has any suggestions for this scenario, or knows of a setting which I have described, or even if someone can just fill me in as to why I can't get protectedSource to work properly with two comment tags.
I really think it's gotta be a bug because I can get so many other expressions to work fine, and I can even protect HTML within the area of a single comment tag, but I simply cannot get HTML within two different comment tags to stay untouched.
My solution to this was to use comments in my system, but before feeding the page content to CKEditor, convert them to custom HTML tags. Then, upon save, convert them back to my comment tags.
For your syntax that would be something like this in PHP. Before printing the page content to the textarea:
$content = str_replace(array('<!-- src -->','<!-- end src -->'),array('<protected>','</protected>'),$content);
Before saving the resulting content:
$content = str_replace(array('<protected>','</protected>'),array('<!-- src -->','<!-- end src -->'),$content);
In the CKEditor configuration:
protectedSource:[/<protected>[\s\S]*<\/protected>/g]
Hope that helps!
I wanted to preserve newlines in my source, and the protectedSource feature works well for that. I added this to my config.js:
config.protectedSource = [/\r|\n/g];
config.allowedContent=true; will do the trick
Here is the full HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor</title>
<script src="http://cdn.ckeditor.com/4.5.10/standard/ckeditor.js"></script>
</head>
<body>
<textarea name="editor1"></textarea>
<script>
CKEDITOR.config.allowedContent=true;
CKEDITOR.replace( 'editor1' );
</script>
</body>
</html>
I solved this problem by simply surrounding the back-end output of edit form page with a conditional on a $_GET variable - when you click on "Expert Mode" it loads a plain textarea instead of the ckeditor system. Your invocation of the ckeditor object will vary depending on your setup. ( I have a custom class that calls/builds the editor object )
<div id="postdivrich" class="postarea">
<?php
if( isset( $_GET['expert'] ) )
{
print "<div style=\"text-align:right;\">Editor mode</div>\n";
print "<textarea name=\"content\" style=\"height:400px;width:{$nEwidth}px;\">{$aDoc['content']}</textarea>\n";
}
else
{
print "<div style=\"text-align:right;\">Expert mode</div>\n";
require_once( 'admin/editor.class.php' );
$aDoc['content'] = str_replace( "\r", '', str_replace( "\n", '', nl2br( $aDoc['content'] ) ) );
$oEditor = new setEditor( $aDoc['content'], $nEwidth, "400", 'content' );
$oEditor->ShowEditor();
}
?>
</div>
Does this answer help? Basically you can turn off the options adding a javascript, it looks like.

HTML comments break down

I have a page that is generated which inserts an HTML comment near the top of the page. Inside the comment is a *nix-style command.
<!-- command --option value --option2 value2 --option3 -->
This comment breaks the page completely. What is wrong with the comment to cause this to happen, and why is this the case?
Comments in the XML Spec from the w3.org :
For compatibility, the string "--"
(double-hyphen) MUST NOT occur within
comments.
If you really want to keep the comment in your page you could use this instead of an HTML comment:
<div style="display:none">command --option value --option2 value2 --option3 </div>
Or even
<div class="comment">command --option value --option2 value2 --option3 </div>
and specify:
.comment {display:none;}
in your stylesheet.
Comments at the top of the page before <html> will throw IE into quirks mode, which could explain why the page breaks, if that's where your comment appears.
For more information, check out the "Triggering different rendering modes" on this wikipedia page