Im using sublime 2 with Emmet plugin. Is there a way to write a comment with speed coding that would produce me something like that:
<div class="container">
Lorem ipsum
</div> <!-- custom comment -->
I've tried
div.container
And it's not working.
Is it possible to add comments to each div or element created via speed coding snippets?
You can write quick comand c+tab for simple comment or you can write in this form c{my comment}+tab to add text into de comment tags
Use filters:
div>div#page>p.title+p|c
Reference: http://docs.emmet.io/filters/
c>{some comment} will give you a comment with text "some comment" in it.
To have a comment after a div, you can use the following:
div.container+c{custom comment}
If you also want to have some text inside the div, you can use the following:
div.container{Hello World}+c>{custom comment}
If you want to have something after the comment, you need to group it using brackets as shown below:
div.container{Hello World}+(c>{custom comment})+div#nav
I believe this is what you're looking for:
c{test}+div>p{Comments!}^c{/test}
Related
I love emmet. div.container and then pressing tab has made my life so much easier.
But assume you have a div like this:
<div class="myDiv"> </div> and you want to wrap that inside a container.
What I've been doing so far is typing out
<div class="container">
</div>
Then I copy paste myDiv in between.
There has to be a simpler way, no?
What I'm looking for is being able to put my cursor in front of <div class="myDiv">, type out div.container then press tab, and the result would end up like this:
<div class="container">
<div class="myDiv">
</div>
</div>
Not even sure what the term for this would be. Searching for "phpstorm wrapping" doesn't give me what I need.
Is there a setting for this somewhere that I've missed?
Select your text/code
Code | Surround With... (or Code | Surround with Live Template... -- the menu will be almost the same for HTML context)
Choose Emmet option in appeared popup
Type your emmet sequence
P.S.
It's possible to assign custom shortcut to Surround with Emmet action so it can be called directly (one shortcut that would replace steps #2 and #3). This can be done in Settings/Preferences | Keymap -- just search for the aforementioned action (using search field).
You don't need div.container. A simple .container does the job also. A div is automatically generated if you don't specify the element.
You can do nested elements with >.
In your case it would be: .container>.myDiv. If you want to surround existing items, look at #LazyOne answer. The shortcut for it is [Ctrl] + [Alt] + j (on default settings at least).
For more information look here. (was just a quick google search for "emmet PHPstorm" but it looks good)
I've been looking around and I can not find an answer to this.
Suppose I put the cursor right between the number 2 and the greater than sign in the following h2's opening tag.
<h2>Hello world!</h2>
And then I type .text-uppercase which gives me:
<h2.text-uppercase>Hello world!</h2>
After which I expand the abbriviation and I get
<h2 class="text-uppercase">Hello world!</h2>
Is there a way to achieve this by another method?
Maybe this works in your editor, in my personal VS Code installation, its not working, the action is Update Tag
your question is not that clear
i think you want this
var h2 = document.getElementsByTagName("h2");
h2.classList.add('text-uppercase');
now you can do it onClick or using some other trigger
happy coding!!!
hope it helps
I had previously managed to get Zencoding in ST2 to autocomment closing tags eg:
I'd type div.my_div and hit tab and as well as creating the div, it would also add a closing comment so that I can easily navigate the closing div tags in my document.
<div class="my_div">
*
</div> <!-- .my_div -->
Do any of you know how to replicate this?
Thank you.
You should use “comment“ filter: http://code.google.com/p/zen-coding/wiki/Filters
.my_tag|c
You can also make ZC to automatically apply “comments” filter to HTML. It‘s a bit hacky, but you need to open zen_settings.py file and add c filter at https://github.com/sublimator/ZenCoding/blob/master/zencoding/zen_settings.py#L511
It should look like this:
"filters": "html,c"
In below div, I want to break the text of title property(want to display company id, name and activities in different lines). Can anyone suggest me the best way to solve this problem.
Thanks
DIV id="window6" class="component window" style="top:300px;left:250px;" title="CompanyID:25 Name:Company 25 Activities:,INVHLDGS, MallOwned:123 "
6000000
/DIV
If you'd like the tool tip displayed for the div title to have line breaks then how about using a jquery plugin like this one: http://twitter.github.com/bootstrap/javascript.html#popovers
You can add <br /> tags to the pop up content (data-content):
hover for popover
I see the JS Bootstrap online example uses an "a" tag, but it should also work with a "div" tag. NB: this plugin also requires that the Tooltip library be included. Read their documentation if you like this plugin. Of course their are many other similar plugins, especially with jQuery that may have this specific function.
I am looking for some textarea that help me to translate text to HTML. Like what stackoverflow input area does.
For example
**bold** is translated to <span><b>bold</b></span>
I am not sure what this is called. Thanks!
Stackoverflow is actually using WMD editor. Please refer to https://github.com/derobins/wmd