I am new to react and WebStorm.
I used to using Emmet.
but some of the Emmet operation seems not working well on WebStorm.
How to solve it?
my WebStorm version is 11.0.1
#Tiper You may need to update your version. Also, remember to hit tab after typing that out :
ul>li*5 then tab
Will create :
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Works fine in mine and I'm using version 11.0.3
Related
I'm having a issue when I build my project!
All my <p> tag become centered after Build and on Dev instance, they stay on Left side...
Example:
<div class="pt-3">
<h4>Forma de acesso:</h4>
<p>Certificado Digital (Token) <i>OU</i></p>
<p>CPF e Senha</p>
</div>
On dev server:
On live server (after build):
Any advice of why is this happening?
If helps, I'm using Bootstrap-Vue and yarn to build project!
Edit: using text-left class not work, text keeps centered.
I've used a text-center on my html css on App.vue...
My mistake.
I'm writing an IntelliJ plugin, which should recognize rythm engine code in .html files.
Rythm is a template engine an the syntax starts with #
I've already done the custom language plugin tutorial from the JetBrains doc.
So far I got Syntax Highlighting partially working for rythm.
If I would copy and paste the code below in a .rythm file everything would be well recognized. But then HTML wouldn't be recognized.
I tried the language injection from the IntelliLang plugin but now it recognizes the rythm code only between HTML tags.
In this example #i18n and #something would be recognized as rythm. But #rythmCode is still unhighlighted.
Any ideas how I can get it working even if #rythmCode is outside of HTML tags?
#rythmCode {
<li>
#i18n("xxx")
</li>
<li>
#something.getSomething():#something.getSomething()
</li>
}
#rythmCode() {
<div class="row">
<div class="col-md-6 word-wrap">
#something.getSomething(): #something.getSomething()
</div>
<div class="col-md-6 align-right">`
edit:
Finally it works. Now I want to implement a formatter. How can I implement a HTML formatter for the HTML part and a Rythm formatter for the Rythm part?
edit 2:
HTML formatter works. Now I need a bit help with the Rythm Formatting. I think something is wrong with my .bnf file.
As we also missed Rythm template engine support in IntelliJ we worked on a plugin which now supports:
syntax highlighting
brace matcher
code completion for basic rythm keywords (e.g. #import, ...)
and HTML formatting (autoformatting in IntelliJ will no longer destroy templates)
Its not jet available in the Jetbrains plugin repo (but will be in the near future) but you can just download the jar and install the plugin from disk.
Also its open source: Rythm Engine Detector R.E.D GitHub
I would like to know how to prevent showing emojis from bootstrap's glyphicons?
This
<span class="glyphicon glyphicon-tent"></span>
Renders to this (opera, moz)
I Stumbled across this:
https://apple.stackexchange.com/questions/41228/why-do-emoji-like-appear-when-i-use-safari-but-not-chrome
Unicode here :
http://www.fileformat.info/info/unicode/char/26fa/index.htm
Solution: Update your Bootstrap to the latest version.
Better alternative to avoid such problems is to use font-awesome instead of twitter bootstrap glyphicons and as a bonus you could get more icon set than glyphicons provide. But if you still want to use bootstrap glyphicons it is better to copy the unicode for that glyphicons (since glyphicons use unicode internally) and append the code as given in this answer.
use i tag insted of span like <i class="glyphicon glyphicon-tent"></i> may be it will help
Using emmet extension to expand html tag abbreviations in Brackets when live preview is active, it doesn't update and shows
Live Preview (not working due to syntax error)
If for example I write:
ul>li*3
and press tab it expands into
<ul>
<li></li>
<li></li>
<li></li>
</ul>
and Brackets stop its live preview update.
Are you putting the <ul> inside a <p> tag? Technically that isn't legal HTML – for example see this SO answer. Lists can be inside a div, but not a paragraph.
If that's not the problem, could you post a code snippet that shows where you're inserting the <ul>?
One of my most common operations in textmate is to encapsulate a block of text in a <div>.
How can i create a keyboard shortcut for this? I do not really feel like learning anything complex, so simple solutions would work best - thanks!
Maybe I didn't understand your question, but what about the "Wrap Selection in Open/Close Tag" (Ctl-Shift-W) from the HTML bundle? Having a block of text selected then overtyping the default <p> with <div> does the work. See http://manual.macromates.com/en/bundles#html
But the following snippet :
${0:${TM_SELECTED_TEXT/\A(.)<\/div>\z|./(?1:$1:$0<\/div>)/m}}
does the same thing without even typing the tag ...
HTH
This might slightly off topic, but you might be interested in using Zen coding for Textmate, which allows you produce lots of HTML with a few key strokes.
You write:
div#page>div.logo+ul#navigation>li*5>a
You get:
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
(disclaimer: the example code is from the above mentioned site)
Besides that it adds features for easy navigation of editable parts of HTML, for easy wrapping of content using the same syntax as above. This last past would allow you to wrap any text (content) in whatever HTML you would like.
Happy coding :)