Visual Studio - how to quickly wrap text in HTML tags?

Question

The new HTML editor in VS 2013 removed WYSIWYG mode and the Formatting toolbar is disabled. This is for the good, generally, but it also made simple edits like making some text bold or italics harder.

What I currently do to make some text bold is:

1. Type <b>
2. VS autocompletes </b>
3. I select the end tag and press Ctrl+X
4. I go to the end of the text that should be bold and press Ctrl+V

This is much less convenient than just pressing Ctrl+B or something similar. I know there is the "Surround with" command in Visual Studio, there are customizable keyboard shortcuts etc. so my hope is that the Ctrl+B functionality can somehow be achieved in Visual Studio. Is there some clever trick or am I possibly missing something other, rather simple?

Answer 1

Web Essentials 2013 has a Surround with tag... feature (Alt+Shift+W) that is more fluid than the built-in Surround with . I'm probably just going to stick with it as I am using Web Essentials anyway.

Answer 2

A good suggestion from How to quickly surround text with HTML markup in VS 2008? is this:

1. Select your text
2. Press Ctrl + X to cut it to clipboard
3. Type your <strong> tag, which Visual Studio will automatically close with your cursor remaining in the middle of the start and end tag
4. Press Ctrl + V to re-insert your text between the tags

Answer 3

You could also add a custom snippet (I don't know why Visual Studio didn't provide a snippet for the strong tag by default).

To create the snippet:

1) Create a text file in C:\\Users\\USERNAME\\Documents\\Visual Studio 2013\\Code Snippets\\Visual Web Developer\\My HTML Snippets named strong.snippet

2) Place the following text inside the text file:

<CodeSnippet Format="1.1.0" xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
  <Header>
    <Title>strong</Title>
    <Author>YOUR NAME</Author>
    <Shortcut>strong</Shortcut>
    <Description>Markup snippet for a strong text</Description>
    <SnippetTypes>
      <SnippetType>Expansion</SnippetType>
      <SnippetType>SurroundsWith</SnippetType>
    </SnippetTypes>
  </Header>
  <Snippet>
    <Code Language="html"><![CDATA[<strong>$selected$$end$</strong>]]></Code>
  </Snippet>
</CodeSnippet>

To use the snippet:

1) Select your text

2) Right-click text and choose "Surround With...", or press Ctrl-K,Ctrl-S

3) Open "My HTML Snippets" folder in the popup menu and choose your strong snippet

Answer 4

Create an HTML Custom Code-Snippet in Visual Studio

1. Create a new .xml file

2. Use the following snippet template:

 <CodeSnippet Format="1.1.0" xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
  <!-- HTML Anchor Snippet -->
  <Header>
    <Title>P</Title>
    <Author>Microsoft Corporation</Author>
    <Shortcut>P</Shortcut>
    <Description>Markup snippet for a Paragraph</Description>
    <SnippetTypes>
      <SnippetType>Expansion</SnippetType>
      <SnippetType>SurroundsWith</SnippetType>
    </SnippetTypes>
  </Header>
  <Snippet>
    <Declarations>
      <Literal>
        <ID>Paragraph</ID>
        <ToolTip>Paragraph</ToolTip>
        <Default>p</Default>
      </Literal>
      <Literal>
        <ID>selected</ID>
        <ToolTip>content</ToolTip>
        <Default>content</Default>
      </Literal>
    </Declarations>
    <Code Language="html"><![CDATA[<p>$selected$</p>$end$]]></Code>

  </Snippet>
</CodeSnippet>

3. Give a name to your snippet, and save-it-as using( YourFileName.snippet ) extention

Add snippet to Visual Studio

1. Use Code Snippets manager: Go to: Tools/Code Snippets Manager/

2. Choose HTML from a DropDown list, and open HTML folder by DoubleClick on it.

4. Click Import button, and browse to your newly .snippet file

Use Your Custom Snippet

1. Select some text in the Text-Editor .

2. use combination of CTRL+K CTRL+X to open Insert Snippet dialog window

3. Choose HTML from a DropDown list where you previously saved your .snipped file

4. Choose your custom snippet from a list. It should now wrap your text with <p></p> tag for example

★ Follow the above procedure again for creating a new snippents.

☀ Read More about custom snippets

☕ HINT (just like in Sublime text editor build in feature)
You could create a Lorem Ipsum custom snippet just like this in a seconds:

<CodeSnippet Format="1.1.0" xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
  <!-- HTML Anchor Snippet -->
  <Header>
    <Title>LoremIpsum</Title>
    <Author>Microsoft Corporation</Author>
    <Shortcut>Lorem</Shortcut>
    <Description>Markup snippet for a Lorem Ipsum</Description>
    <SnippetTypes>
      <SnippetType>Expansion</SnippetType>
      <SnippetType>SurroundsWith</SnippetType>
    </SnippetTypes>
  </Header>
  <Snippet>
    <Declarations>
      <Literal>
        <ID>Lorem</ID>
        <ToolTip>LoremIpsum</ToolTip>
        <Default>Lorem</Default>
      </Literal>
      <Literal>
        <ID>selected</ID>
        <ToolTip>content</ToolTip>
        <Default>content</Default>
      </Literal>
    </Declarations>
    <Code Language="html"><![CDATA[$selected$Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit nunc eget consectetur aliquet. Vivamus feugiat ipsum ex, eget egestas erat condimentum eget. Suspendisse luctus velit ac purus venenatis imperdiet sed vel mauris. Ut tempus risus elit, eget molestie purus hendrerit a. Curabitur ac urna posuere, lacinia neque quis, facilisis libero. Cras viverra tellus eu lacus hendrerit, in auctor neque sodales. Pellentesque et finibus lectus. Vestibulum pulvinar, lorem in dignissim fermentum, nunc ipsum luctus arcu, non malesuada nisi sem nec libero. Integer eget arcu interdum, elementum lacus et, ornare arcu. Phasellus quis nulla non enim porta ornare non eget ex. Mauris at purus sed ipsum congue facilisis. Donec tempor, eros ac posuere tempus, velit sapien faucibus augue, vitae convallis augue nulla ut felis. Nunc sapien libero, dictum non finibus nec, rutrum at odio. Nulla facilisi. $end$]]></Code>
  </Snippet>
</CodeSnippet>

☕ HINT
You Can create almost any code snippet you want by providing a language="" property, and by setting up right description in<code> section
The following is the example of a JavaScript Alert() function code snippet

<Code Language="JavaScript"><![CDATA[alert($selected$);$end$]]></Code>

Answer 5

单击要包装的标签，然后按 Ctrl + Alt + W 。

Answer 6

In visual studio code you can use the extension by name htmltagwrap

Link

https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap

Installation Options

Option 1. Search for htmltagwrap in VS Code extensions tab and install it.

Option 2. Go to the marketplace link mentioned above and click on install, it will prompt you to open it with VS Code and once you do that it'll be installed.

Usage

• Select one or more blocks of text or strings of text.
• Press Alt + W or Option + W for Mac.
• Type the tag name you want.