In most code editors, there are two shortcuts for two different types of comments: line and block. Here at CodePen, we do both too.

Line Comments

Line comments are your standard ctrl + / on Windows/Linux or cmnd + / on OSX. In languages where there are more than one type of comment, like JavaScript and most preprocessors, line comments only comment out a single line. In languages where there is only one type of comment, like vanilla CSS and HTML, line comments will behave similarly to block comments (/* */ and <!-- -->).

Unless there is no true line comment (vanilla HTML and CSS), the line comment shortcut will comment out the entire line your cursor is in (even if you haven’t selected the whole line):

When you have many lines selected, the line comment shortcut will comment out each line with a line comment:

Block Comments

To make a block comment:

• On a PC: Ctrl + Shift + /
• On a Mac: Command + Opt + /

The biggest difference with block comments is that they are very selection-sensitive. If nothing is selected, the block comment shortcut typically injects an empty block comment at the cursor position. If you have a selection, it will only wrap the selection:

In most preproscessors, line comments are hidden from compiled output, but block comments will be compiled into valid comment markup. For example, in SCSS:

// this line comment will not compile into a CSS comment
.thing {
 /* but this block comment will */
 color: #FFBB00;
}

Compiles to:

.thing {
  /* but this block comment will */
  color: #FFBB00;
}

Whitespace-Sensitive Block Comments

For some HTML preprocessors (Pug, Slim, and Haml), block comments do not have a closing comment flag. Instead, they use an open flag and then indentation.

Comment Flag List

Here is a list of all of our editor languages and their corresponding comment flags:

Flavor	Line	Block Open	Block Close	Whitespace?
HTML		<!--	-->
Markdown		<!--	-->
Slim	/	/!		true
Pug	//-	//		true
Haml	-#	/		true
CSS		/*	*/
PostCSS		/*	*/
Sass	//	/*	*/
SCSS	//	/*	*/
LESS	//	/*	*/
Stylus	//	/*	*/
JavaScript	//	/*	*/
CoffeeScript	#	###	###
TypeScript	//	/*	*/
LiveScript	#	/*	*/