How to quickly surround text with HTML markup in VS 2008? - html

I am working with Visual Studio 2008 editor. Is there a way to take a piece of text for example, highlight it and use shortcuts to quickly add markup?
For example, lets say I have a text, I went to: the store and I want to bold it, I have to type <b>the store</b>. Is there a quicker and easier way to do this?

Select text, Ctrl+X, type in your tags which will be autoclosed by vs, Ctrl+V

With HTML Editor just press Ctrl+B...
With regular text editor VS does not provide something build-in, but you can add custom macros. Something like the following will do job for you.
Sub MakeSelectionBold()
DTE.ActiveDocument.Selection.Text = "<b>" + DTE.ActiveDocument.Selection.Text + "</b>"
End Sub
You can then assign it to the short-cut or add button to your toolbar.

Related

Add HTML tags to selected text

Sounds simple but I really can't find the answer. I would like to be able to select text and add a tag without typing opening/closing tags manually, because it's a waste of time.
<p> selected text </p>
<ul>
<li> selected text </li>
<li> selected text </li>
...
What comes to my mind are workarounds like Notepad++ (find & replace) or Autohotkey scripts (copy, add tags and paste) + StrokesPlus mouse gestures.
Is there any editor where I could do it quickly with a shortcut? I'm new to HTML and I just want to find the most efficient solutions.
Many editors support this feature and if not, there are mostly extensions you can add for html language support.
In sublime-text for example if you write div then hit the tab-key you get <div></div> with the cursor positioned within the div scope, which makes life way easier.
One other solution that you might find interesting is writing with the template engine Jade. Just have a look its pretty straight forward.
With notepad++
if you want to change some lines as list ( < li > )
Select your text and press CTRL+H (to replace)
write in the first input (find what): (.*)
and in the second input (replace with):
< li >\1< /li >
check in the options: "In selection" and "regular expression"
Finaly click on replace all
You can use emmet with the editors that emmet supports, to create a tag you only need to type the word that you want to create and press Tab.
I love brakets editor; if you´re editing html code it has a live mode to view in real time the changes in your document.

Sublime Text: Accept Suggested Autocomplete Without Expanding it

In Sublime Text, I have installed Emmet so that I can do zen coding. Now, the problem is that when I'm typing, and get an autocomplete suggestion, as soon as I accept that autocomplete suggestion (either by entering tab, enter, or even pressing space bar), the suggested tag is expanded; this causes me not to be able to continue the zen coding.
To give you an example, say I want to insert a <select> with 6 <option> child elements. If I enter select>opt, then autocomplete suggests option, but as soon as I accept option, that expands to select<option></option>.
What I want is to accept option, but that it won't expand to <option></option>.
Is there anyway to accomplish this?
Actually, the answer is very simple. In your example, when you get the autocomplete suggestions for option, you will get 2 of them. One is the tag, the other is text. Use Ctrl+Space to go through all the suggestions, and select the text version of option and not the tag version.
In Sublime Text completions consists of a 2-tuple containing the showed string and the inserted characters/snippet. I don't think know whether it is possible to just insert the showed string. However if you search for any way, there is a way to establish: modify the source code of the html tag completion file.
Install PackageResourceViewer, then press ctrl+shift+p write PackageResourceViewer: Open Resource. Select HTML >>> html_completions.py.
If you save the file it will shadow (not overwrite) the original completions file. Hence just remove it to get the original behavior.
In this file:
in line 15 replace return (tag + '\tTag', tag + '>$0</' + tag) by return (tag + '\tTag', tag).
in line 245 replace completion_list = [(pair[0], '<' + pair[1]) for pair in completion_list] by completion_list = [(pair[0], pair[1]) for pair in completion_list]
Now it should insert the tag names instead of the whole tags.

Break line on each tag attribute and keep them aligned in Visual Studio HTML code editor

If you'd like to see this implemented in the next version of VS, please vote for it here.
Suppose the following horizontally lengthy <button> HTML declaration:
<button type="submit" class="btn btn-primary" id="save" name="action:#ViewContext.RouteData.Values["action"]"><i class="icon-save icon-large"></i> #Localization.Save</button>
As you see all tag attributes are inline such that they extend a long way to right in the code editor...
Do you know of any Visual Studio option or extension that allows it to be formatted with Ctrl + K then Ctrl + F like this:
<button type="submit"
class="btn btn-primary"
id="save"
name="action:#ViewContext.RouteData.Values["action"]">
<i class="icon-save icon-large"></i>#Localization.Save
</button>
I think the above format makes it easy to spot a given attribute although it'll clearly make the vertical scroll-bar a little longer. :)
I tried fiddling with Visual Studio options in TOOLS => Options... => Text Editor => HTML but didn't find an option to control this behavior.
Of course I can align it manually but then if I hit Ctrl + K then Ctrl + F by mistake I lose all the custom made formatting.
If there's no such a thing available, I think this makes a great idea for a Visual Studio extension. As a plus it could even alphabetically order the attributes. :)
Doing a little bit more Googling I found that the XAML editor in Visual Studio has what I'd like to have in the HTML editor:
Position each attribute on a separate line
I asked this same question at the Visual Studio Extensibility forum:
http://social.msdn.microsoft.com/Forums/en-US/vsx/thread/0d97c205-9f29-4ba7-9d0b-253413077dce/
If you'd like to see this implemented in the next version of VS, please vote for it here.
Well, I found a trick at the ASP.NET Forums:
Positioning each attribute on a separate line
It's not like the XAML feature described in my question but it works.
In Options/Text Editor/HTML/Format you can check "Wrap tags when
exceeding specific length" and set the length to 1. That will cause
the formatter to wrap like crazy.
Another option is:
Go to TOOLS => Options... => Text Editor => XML => Formatting => Align attributes each on a separate line.
Close the .cshtml file. Right click it in Solution Explorer and select Open With... then select XML (text) Editor. Select all content and do Ctrl + K then Ctrl + F.
* This second option is tedious! :(
If you feel brave, you can write an editor extension that does this for you. Take a look at the align extension that Noah wrote a while ago for ideas: https://github.com/NoahRic/AlignAssignments
This has been implemented in the new HTML editor in Visual Studio 2013 Preview, which has been released. This is a feature of the new editor only, which works for html and cshtml files, but not for aspx/ascx files.
If you hit [return] after each value, the attributes will stack up under the first attribute definition. Format Document will not undo these changes anymore.
Copy the html to the xml editor let it format it for you, then save it back to the html file
you can Find/Replace < with /n< + don't forget to click Use Regular Expressions setting

Format Code In MonoDevelop

I am using MonoDevelop on Mac to write MonoTouch apps. Automatica code indenting/formatting works great while I am typing.
The problem is that when I copy and paste code snippets, in many cases I lose the formatting and lines are combined together, indenting is lost, and it is a huge pain to implement the tabs, spacing, and line breaks manually. Is there anyway I can use a command in monoDevelop to automatically indent and apply the formatting to existing code.
I thought maybe Edit|Format|Format Document/Selection would work, but these commands don't have any affect on the code at all.
Any help?
To format the entire document in one keystroke: control-I
To format a selection: Edit->Format->Format Selection
To customize the formatting: MonoDevelop->Preferences->Source Code->Code Formatting
You actually need to select all your text, and then go to Edit->Format->Format Document. It doesn't seem to work otherwise.
For me on macOS, the shortcut for "auto-format" is CTRL + i.
You can change the shortcut if you want. To change it, go to Preferences -> Key Bindings, then type "format" in the search box and edit the "Format Document" shortcut/key binding.

Surround selection with html tag

Is there any eclipse shortcut/trick/plugin/whatever that will allow me to select a section of text and surround it with an arbitrary html/xml tag when using the html editor.
Something like this textmate video
EDIT: not sure If my Eclipse setup is the same as yours, but...
I have the HTML Editor installed, and if I switch to the Java perspective, I can use Edit -> Quick Fix and then choose Surround with new element to get exactly the effect in your video. (On a Mac, the shortcut for this is ⌘1).
Hope this is helpful.
In the C++ editor, you can try Source -> Surround With... -> Configure Templates to add the tag you want.
The following works and allows for entering random/arbitrary tags:
Select the desired text that you want wrap.
Go to 'Edit > Quick Fix' or press 'Ctrl + 1'.
In the new menu that appears select 'Surround with new element'
However there is an annoyance, please upvote Bug 494169