Quick way to wrap new tags around existing html tags?

Is there a quick way to wrap the href lines with list item tags instead of having to do it manually? Or replace tags with something else like span tags with P tags or div tags with Section tags or whatever?

<ul class="list-group">
    <li>
        <a href="#" class="list-group-item">Link</a>
    </li>
    <li><a href="#" class="list-group-item">Link</a></li>
    <a href="#" class="list-group-item active">Link</a>
    <a href="#" class="list-group-item">Link</a>
    <a href="#" class="list-group-item">Link</a>
    <a href="#" class="list-group-item">Link</a>
    <a href="#" class="list-group-item">Link</a>
    <a href="#" class="list-group-item">Link</a>
    <a href="#" class="list-group-item">Link</a>
    <a href="#" class="list-group-item">Link</a>
</ul>

@Terry44 this can be done by selecting the list-group in the DOM and click on the Action menu then edit code. When the code editor opens Command-click (Mac), I assume Control-click (on Windows) at the start of each line you want to edit so that you make a multi-select then just start typing and it will insert the new code on each line. Just make sure you are only selecting the lines you want to edit and remember it will insert it in the same place on each select line. I’ve uploaded a short video to demonstrate multi-select editing. Hope you find this to be helpful.

No, you’re still doing it manually that way. I want to highlight a line and have it auto-magically surrounded by tags of my choosing or if I hand add the begin tag it should auto close the end tag at the end of the line and not right after the opening tag like it does now. I didn’t know if Pinegrow had this, I don’t see that it does.

@Terry44 If you have Atom installed and the Emmet Package added you can select the line of code and Wrap with Abbreviation and add whatever tag of your choosing. See screenshots.

1 Like

Thanks. I use Brackets and Notepad++. Both have similar plugins available which I use.

I just find it strange that these TO ME basic editing features are not available directly in Pinegrow. The thing I am concerned with in using pinegrow with an external editor is that it reformats the code and I don’t want it’s formatting to contaminate my other code base in the other editor. I am on day 5 of trial so will continue to test and experiment with Pinegrow to see if it is worth it for me to use or not.

Not really what you are asking but try this approach:

  1. Add List group from LIB

  1. Double click on text in one of the list items to edit text

  1. Click Link in bar

  1. add the URL

Finished List Group:

Now you can duplicate the li item with the link each time you want to add another one instead of having to do it each time.

One of the issues I would see with this is how do you define the end of the line? Some lines of code can have multiple elements on it so how would any program know where to insert the closing tag correctly.

The end of the actual line? Dreamweaver does this. OR if you are surrounding an existing tag surround that opening and closing tag… Also if I highlight a section surround the highlighted section. I can do this in the editors I currently have and they are free.


[quote="Rob, post:6, topic:378"] Now you can duplicate the li item with the link each time you want to add another one instead of having to do it each time. [/quote]

I see the ability to create your own code blocks and duplicate them and existing ones. What I am saying is if I have existing code and I want to convert a line or multiple lines in the already existing code the only way to do it is the manually do it, line by line, beginning and then at end close the tag myself… line by line. Annoying and very cumbersome and waste of my time.

Hi @Terry44. I’ve just tried what I suggested here in the above reply within Pinegrow and good news it works similar to how Dreamweaver seems to do it as can be seen here at approximately 1:17 in the video. It might not be ideal but its better than having to do it line by line! Give it a try and let me know how you get on with it.

That’s nice Rob. I don’t use Atom and if I am going to use another editor why do I need Pinegrow I am thinking to myself.

I am playing more with the visual editing aspect of PG right now and seeing what it can and can’t do. So far I have been coming across quite a few limitations especially in the editor aspect of the program.

Can I install other frameworks into PG like JQuery and JQuery UI or JQuery Mobile and use those the same way bootstrap is being used?

I don’t use frameworks all that often but I will probably use them more if I had a program like this that easily implemented and allowed changing of options for those frameworks. Still playing with the Trial.

Out of curiosity how does your current editor(s) handle these things?

In Brackets if you highlight a selection and press ctrl + shift + J a popup appears that lets you enter an opening tag and then the entire selection is surrounded by the opening and closing of that tag.

I also use Emmet in both Notepad++ and Brackets but I prefer Brackets implementation much better because you can test expressions live and really learn the commands and what you can and can’t do with Emmet.

All of the wrapping occurs within a parent tag so if you don’t want to you don’t have to hilight any of the lines you want to wrap it will just wrap everything by default within whatever parent tags you are in. For the most part I just use the keyboard for everything in code editing, I rarely touch the mouse.

I had some custom macros I created also within Notepad++ but after upgrade they disappeared for some reason, there are a lot of line manipulation plugins and functions in NotePad++ that allow you to really create compact code which I am used to.

I mean having multiple lines of code having all the extra white space taken out and joined together on one line with a couple keyboard taps. Then my macros got hosed so now it is not that easy. Now when I am completed with a page I just compress all the lines I can down on to one line which makes for faster loading. I could of just said minimizing the html like JS is minimized for web.

I try to do same for CSS though for some reason sometimes my style sheets don’t work right all minimized so I don’t do this so much for independent CSS style sheets. JS, I can’t manually minimize without it breaking the code, I know there are online minimizers but I am not all that certain they don’t steal your code.

I have no doubt the samething can be done in Atom. I have used it before but I don’t know, I just like Brackets better.