QuoteHTML for Sublime Text

Description

Quote HTML snippet as a string.

Example:

Original HTML:

 <div class="demo">
 	<ol>
 		<li>1</li>
 		<li><a href='#'>2</a></li>
 		<li><a href="#">3</a></li>
 	</ol>
 </div>

Quote HTML with Single Quotes:

 '<div class="demo">' +
 	'<ol>' +
 		'<li>1</li>' +
 		'<li><a href=\'#\'>2</a></li>' +
 		'<li><a href="#">3</a></li>' +
 	'</ol>' +
 '</div>';

Quote HTML with Double Quotes:

 "<div class=\"demo\">" +
 	"<ol>" +
 		"<li>1</li>" +
 		"<li><a href='#'>2</a></li>" +
 		"<li><a href=\"#\">3</a></li>" +
 	"</ol>" +
 "</div>";

Quote HTML with Single Quotes include Space:

 '<div class="demo">' +
 '    <ol>' +
 '        <li>1</li>' +
 '        <li><a href=\'#\'>2</a></li>' +
 '        <li><a href="#">3</a></li>' +
 '    </ol>' +
 '</div>';

Quote HTML with Double Quotes include Space:

 "<div class=\"demo\">" +
 "    <ol>" +
 "        <li>1</li>" +
 "        <li><a href='#'>2</a></li>" +
 "        <li><a href=\"#\">3</a></li>" +
 "    </ol>" +
 "</div>";

Quote HTML as Array with Single Quotes:

 [
 	'<div class="demo">',
 		'<ol>',
 			'<li>1</li>',
 			'<li><a href=\'#\'>2</a></li>',
 			'<li><a href="#">3</a></li>',
 		'</ol>',
 	'</div>'
 ].join("");

Quote HTML as Array with Double Quotes:

 [
 	"<div class=\"demo\">",
 		"<ol>",
 			"<li>1</li>",
 			"<li><a href='#'>2</a></li>",
 			"<li><a href=\"#\">3</a></li>",
 		"</ol>",
 	"</div>"
 ].join("");

Quote HTML as Array with Single Quotes include Space:

 [
 	'<div class="demo">',
 	'	<ol>',
 	'		<li>1</li>',
 	'		<li><a href=\'#\'>2</a></li>',
 	'		<li><a href="#">3</a></li>',
 	'	</ol>',
 	'</div>'
 ].join("");

Quote HTML as Array with Double Quotes include Space:

 [
 	"<div class=\"demo\">",
 	"	<ol>",
 	"		<li>1</li>",
 	"		<li><a href='#'>2</a></li>",
 	"		<li><a href=\"#\">3</a></li>",
 	"	</ol>",
 	"</div>"
 ].join("");

Installation

OPTION 1 - with Package Control (recommended)

The easiest way to install this package is through Package Control.

Install Package Control, follow instructions on the website.
Open command panel: Ctrl+Shift+P (Linux/Windows) or Cmd+Shift+P (OS X) and select Package Control: Install Package.
When packages list appears, type QuoteHTML and select it.

OPTION 2 - with Git

Clone the repository in your Sublime Text "Packages" directory:

git clone git://github.com/mutian/Sublime-Quote-HTML.git "QuoteHTML"

You can find your "Packages" inside the following directories:

OS X: ~/Library/Application Support/Sublime Text 2/Packages/
Windows: %APPDATA%/Sublime Text 2/Packages/
Linux: ~/.Sublime Text 2/Packages/

OPTION 3 - without Git

Download the latest source zip from Github and extract it into a new folder named QuoteHTML in your Sublime Text "Packages" folder.

Usage

Select the code, or place cursor in the document, and execute commands in one of the following ways:

Edit Menu: Edit > Quote HTML.
Command Panel: Open command panel: Ctrl+Shift+P (Linux/Windows) or Cmd+Shift+P (OS X) and select Quote HTML.

Shortcuts

By default QuoteHTML provides no keyboard shortcuts to avoid conflicts, but you can view the included Example.sublime-keymaps file to get an idea how to set up your own.

Author

Created by Mutian (http://mutian.wang).

For more info, you can send email to me: mutian(a)me.com!