I want to surround some HTML code with <div> - how to do it in Eclipse with some shortcuts or macros. I do not want to repeat surrounding manually.
<p>some text</p>
I want to surround with <div> and achieve
<div><p>some text</p></div>
Follow below mentioned steps :
Select the text that you want to surround with tag.
Go to 'Edit > Quick Fix' or press 'Ctrl + 1'.
Double click "Surround with new element"
The auto completion is pretty much default right now. If I type
<p{tab}
I get
<p></p>
Is it possible to configure it so that instead I end up with
<p>
</p>
This is just an example. I'd like it to be more comprehensive beyond just the <p></p> tags.
It seems I've been doing it wrong. I've been looking at what happens only when I tab-complete a tag as in my example. It did not occur to me that simply pressing enter after the auto completion that it would actually set me up the way I would like and even better than I was asking for.
After pressing enter I end up with
<p>
_
</p>
with the cursor (represented by the _) indented two spaces on the blank line.
In ST2, highlighting some text and pressing alt + shift + w (on Windows) will wrap the current selection in <p></p> tags. But is there a way to specify which tag to wrap with? Because maybe I want to wrap in a span, or a div instead.
Using Emmet, place the cursor in the tag you want to wrap and press ctrl + w (for MacOS) or Alt+Shift+W (for Windows), a box will pop up to enter the type of tag you want to wrap with.
Single line
If you want to convert this
Lorem ipsum dolor sit amet.
to this
<div>Lorem ipsum dolor sit amet.</div>
do this:
Select the text, or press CTRL + L (it will select the current line)
Press ALT + SHIFT + W
Type the desired tag (it will overwrite the default p tag)
Multiple lines
If you want to convert this
Item 1
Item 2
Item 3
to this
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
do this:
Select the text, or press CTRL + L multiple times
Press CTRL + SHIFT + L (it will make one selection per line)
Press ALT + SHIFT + W
Type the desired tag (it will overwrite the default p tag)
You can also select the text using SHIFT + MOUSE RIGHT BUTTON, and in this case you can skip the second step.
Using Emmet
If you want to convert this
Item 1
Item 2
Item 3
to this
<nav>
<ul class="nav">
<li class="nav-item1">Item 1</li>
<li class="nav-item2">Item 2</li>
<li class="nav-item3">Item 3</li>
</ul>
</nav>
do this:
Select the text
Press SHIFT + CTRL + G (wrap with abbreviation)
Type nav>ul.nav>li.nav-item$*>a
Note for Mac users:
ALT + SHIFT + W = CTRL + SHIFT + W
CTRL + SHIFT + L = CMD + SHIFT + L
The answers are all good. Here is where key bindings are for customizing:
In Preference: Key Bindings - Default:
{
"keys": ["ctrl+shift+w"], "command": "insert_snippet",
"args": { "name": "Packages/XML/long-tag.sublime-snippet" }
}
If you have Emmet, the emmet version is
{ "keys": ["super+shift+w"], "command": "wrap_as_you_type"}
Edit them in Preferences: Key Bindings - User to your liking,
Create a custom snippet, for example, to insert a span tag. Go to the app menu: Tools > New Snippet ..., and copy to the window the snippet below:
<snippet>
<content><![CDATA[
<span style="color:#0000FF">$SELECTION$1</span>
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>span</tabTrigger>
<description>HTML - span - color - blue</description>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.html</scope>
</snippet>
... then save the snippet to file with e.g. html-span--color name and bind that snippet to a key combination in Preferences > Key Bindings-User, creating a new key entry, for example:
{ "keys": ["alt+shift+c"], "command": "insert_snippet", "args": { "name": "Packages/User/html-span--color.sublime-snippet" } }
It is supposed that a location of the snippet is Packages/User/ directory.
Now select any text that you need to wrap in the span tag and press Alt+Shift+c or type 'span', press Tab, a cursor will be set to required position within the tag, just type your text.
I have successfully tested the snippet and key binding with Sublime Text 3 in Ubuntu Linux.
to make your life easy while you are in Sublime text3:
type any of these(p, h1, div, header, footer, title...) and hit Tab
for example if you want div Just type div and hit Tab
in ST2 type a tag without brackets and hit Tab. It will automatically give you open and closed tag
This system of inserting snippets is very cumbersome compared to the mechanism provided in Dreamweaver. In that case you build a snippet of any kind. It is stored in an in-RAM library and displayed in a directory-style structure. You declare whether the snippet is of type INSERT (at cursor position), or of type SPAN (span selected text). In the first case the entire snippet is inserted. In the second case the snippet is created with a "before" part and and an "after" part. Typically the "after" part is just the closing tag. To use INSERT HERE mode, you position the cursor, and double-click on the snippet in the library and it inserts it at cursor position. To use SPAN SELECTED TEXT mode, highlight the text you want, and double-click the snippet in the library. The selected text is surrounded by the "before" and "after" parts of the snippet.
This is very intuitive, easy to use, and enables the user to build unlimited kinds of snippets which can span selected text.
WOULD SOME VERY SMART PROGRAMMER PLEASE BUILD AN EXTENSION LIKE THIS FOR SUBLIME 3 ?
Note: In comparison, Bracket Highlighter is a Sublime plugin with a wrapping function that would seem to have such functionality, but on close inspection it is way too cumbersome to use if you want to build an efficient snippet library on-the-fly.
Thanks,
Peter Rosti
In ST2 when you type div.foo and then press tab it goes to <div class="foo"></div>
Is there any setting to do autocompletion like that?
<div class="foo">
// 4spaces here.
</div>
Thank you.
UPDATED
Didn't find a special setting but found where to change snippet if someone intested.
In Sublime Text 2/Packages/HTML/html_completions.py just change
snippet = "<{0} class=\"{1}\">$1$0".format(tag, arg)
to
snippet = "<{0} class=\"{1}\">\n\t$1\n$0".format(tag, arg)
Solved.
You must be using emmet.... stock sublime text 2 does not auto complete class attribute from typing element.class that is emmet's doing. I use it... I love that emmet magic.
Similarly you could type element>element to make the second one nest on the first one. or element#id to add an id instead of a class...
Here is an entire cheat sheet for emmet for more completions using emmet plugin on ST2.
Make sure your page is on HTML. You can do this with CTRL+SHIFT+P. Then type 'set html'.
Then you can type div.class_name followed by TAB.
I want foo foo foo ... to be aligned next to be an image, but for bar bar bar ... start a new block of text which is not aligned with fig.jpg. Can this be arranged with some special syntax in org-mode?
#+ATTR_HTML: height="100" align="left"
[[./img/fig.jpg]]
foo foo foo ...
bar bar bar ...
Edit
Just wanted to add that when bar bar bar ... is also another section heading, for instance ** Section 2 or something similar, it seems like a new section should not be wrapped with the previous figure by default, but perhaps there is some org-syntax to specify this?
Upon HTML export, the image is wrapped in a <div class="figure">...</div> environment. The org-mode #+ATTR_HTML: informatio gets added specifically to the <img> tag within the <div>.
If you are wanting all of your figures to be "floating" such that the text wraps it, you need to modify the style used in the HTML. This can be done manually in the default style sheet added to the top of the exported HTML file. A better option is to specify the style you want within the .org file itself. Something like:
#+STYLE: <style type="text/css">
#+STYLE:<!--/*--><![CDATA[/*><!--*/
#+STYLE: div.figure { float:left; }
#+STYLE: /*]]>*/-->
#+STYLE: </style>
at the beginning of your .org file. This will set the style of all <div class="figure"> elements to be floating on the left with text wrapping around on the right hand side. The following text after the figure will also be wrapped to the right, so you'll want to clear the style with something like a <br style="clear:both;" /> statement.
This worg page has a lot of information about figure placement with captions and word wrapping. There is more detailed information there.