Emmet Wrap With Abbreviation Cheatsheet

This article was originally posted on May 6, 2020.

Emmet Wrap With Abbreviation

I learned about Emmet from Brad Hussey. I took his course on building WordPress themes with Bootstrap. In the course, he used Coda 2, an Apple web development code editor, and Emmet, a tookit designed to improve your HTML & CSS workflow. Coda 2 has an Emmet plugin.

Here are some Emmet Wrap with Abbreviation tricks that didn’t come to me so easily. That’s one of the reasons why I am coming up with this cheatsheet, so I can reference in the future and maybe you will, too.

If you’re using Coda 2 for your code editor, the shortcut for Wrap with Abbreviation is Ctrl+A.

Table of Contents

  1. Wrap Each New Line of Text with a Tag
  2. Put Your Selected Text in Your Desired Tag Attribute
  3. Place Your Own Text Wherever You Want
  4. Removing List Markers from Other Editors

Wrap Each New Line of Text with a Tag

If you had content on separate lines like so:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

If you wanted to convert the above text into unordered list items, you would use ul>li*, and you’d get this:

<ul>
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>

The * is what puts each separate line in a tag. If you wrapped the unformatted text above with p*, you’d get this:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

Put Your Selected Text in Your Desired Tag Attribute

Let’s say you had a list of urls that you needed to convert into anchor tags like this:

www.site1.com
www.site2.com
www.site3.com

If you wrapped these lines with an abbreviation and used a*, you would get this:

<a href="http://www.site1.com">www.site1.com</a>
<a href="http://www.site2.com">www.site2.com</a>
<a href="http://www.site3.com">www.site3.com</a>

What if I didn’t want my anchor tag text to be the url? Well, you could use a[href=https://$#]*, and you would get this:

<a href="https://www.site1.com"></a>
<a href="https://www.site2.com"></a>
<a href="https://www.site3.com"></a>

Using $# allows you to place your selected text wherever you want. For instance, if you had these lines for image descriptors:

Image 1
Image 2
Image 3

You could specify these to lines to be alt tag text for each image by using img[alt=$#]*:

<img src="" alt="Image 1">
<img src="" alt="Image 2">
<img src="" alt="Image 3">

Place Your Own Text Wherever You Want

In the examples above, I showed you anchor tags with no text and image tags with no url. Let’s I had these 3 urls that I wanted to be links or images:

www.site1.com
www.site2.com
www.site3.com

If you wanted to convert these urls into anchor tags with anchor text, you would use a[href=https://$#]{Website Number $}* to get this:

<a href="https://www.site1.com">Website Number 1</a>
<a href="https://www.site2.com">Website Number 2</a>
<a href="https://www.site3.com">Website Number 3</a>

Let’s say I wanted to wrap an img tag and add around these urls and add some alt text to each image:

www.site1.com/image1.jpg
www.site1.com/image2.jpg
www.site1.com/image3.jpg

I would wrap the urls with img[src=$# alt=”My Image $”]*. The result would look like this:

<img src="www.site1.com/image1.jpg" alt="My Image 1">
<img src="www.site1.com/image2.jpg" alt="My Image 2">
<img src="www.site1.com/image3.jpg" alt="My Image 3">

Start Numbering from Any Number

Just add an @ after the $. I’m not wrapping anything here, I am just creating the abbreviation. Going off the last example, if you wanted to add 6 more img tags after you created the first three, but wanted to start at image4.jpg, you would use img[src=//www.site1.com/image$@4.jpg alt=”My Image $@4″]*6. The result would look like this:

<img src="www.site1.com/image4.jpg" alt="My Image 4">
<img src="www.site1.com/image5.jpg" alt="My Image 5">
<img src="www.site1.com/image6.jpg" alt="My Image 6">
<img src="www.site1.com/image7.jpg" alt="My Image 7">
<img src="www.site1.com/image8.jpg" alt="My Image 8">
<img src="www.site1.com/image9.jpg" alt="My Image 9">

Removing List Markers from Other Editors

Often times, clients will give you a document from an editor like Microsoft Word that has ordered or unordered lists in it. If you paste an unordered list from Word into Coda 2, you’ll get something like this:

• Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu dapibus turpis.
• Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu dapibus turpis. 
• Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu dapibus turpis.

To strip bulletpoints from this pasted text and add in the unordered list items, you would use ul>li*|t. Doing so, would get you this:

<ul>
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu dapibus turpis.</li>
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu dapibus turpis.</li>
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu dapibus turpis.</li>
</ul>

I plan on updating this blog post as I learn new tricks.

Leave a Comment





This site uses Akismet to reduce spam. Learn how your comment data is processed.