2.7 HTML Wrapper

Hello, and welcome back. In this lesson, I wanna talk about a wonderful time-saving extension for when you need to copy and paste text into your document that needs to be inside list items or something like that. So again, this is gonna save us a lot of time. I'm gonna jump over to the Extensions button. And we're gonna do a search for a plugin called HTML Wrapper. And it's this one right here, let's go ahead and install it. And as you can see before we install it, it works with unordered list, ordered list, navs, selects, and trs, or table rows. So let's install that, click on Close, we'll Close again. And let's say that we need an unordered list. Let's go ahead and get rid of this one here. So we need an unordered list, and somebody has given us all the copy we need for our website, but they've given it to us in a text document. And so we need to pull that text document in, but then we need to stick all of these items inside list items. Which can be a real pain if you need to create each list item individually and then paste each individual item inside those list items. Well, these particular plugin can save us a lot of time. So the first thing we need to do is to create the parent element, which in this case is an unordered list. And then with our cursor inside that parent element, I'm going to jump into Notepad and grab this list of authors and copy that list. And then we'll go inside the unordered list and paste it. Now, just pasting it here doesn't do the trick for us, we have to do one more thing. What I'm gonna do is I'm gonna highlight our selection here, right-click on it, and I'm gonna click on HTML Wrapper. And the HTML Wrapper plugin knows that since we're inside an unordered list that all of these items need to be wrapped in li tags. So if we were to undo that, And change this to an ordered list, so we'll do ol instead of ul, it will do the same thing for us. We'll highlight that again, right-click, and you'll see there is a shortcut for it Ctrl+Shift+E. But again, with an ordered list it will still put it inside li tags. So let's undo that again. This time instead of an ordered list, let's do a nav and see what happens. So we'll put our closing nav tag here. And then we'll highlight all of that, and this time I'll use the shortcut, Ctrl+Shift+E, and you'll see that it puts all of our items here inside anchor tags. And it even guesses at what the URLs are gonna be. Now 90% of the time, you're gonna go through and change those URLs, but you get the basic idea. So let's undo that again, and instead of a nav, let's say that we have a table. So let's actually do this separately. Let's just grab all of that and delete it. And we'll use our Emmet plugin to create a table and a table row. So with our table row created, all we need to do inside that is to paste that same list of authors. And we don't even really need to worry about the indentions here because it's gonna take care of that for us. So we're gonna highlight all of that, Ctrl+Shift+E, and there we go. It knows that since we're inside a table row, that all of these items need to be surrounded by td tags. And finally, we can do this with a select element as well. So if we have our select element and we put our cursor in between the opening and closing tags there and we paste that same text, let's highlight the text, Ctrl+Shift+E, and now it puts it inside options. And again, it guesses at the values that we might want inside those options. And we can, obviously, go in and change those if we want but it gives us some nice defaults. So, again, this is a great time saving tool and it's definitely an extension I would highly suggest having inside Brackets. So thank you for watching, and I'll see you in the next lesson.