I started using WebStorm and Emmet recently and I encounter a problem. For example typing
.row =>
<div class="row"></div>
Now if I type inside of that something else to generate more html it just wont work, like this:
<div class="row">
.col-md-5
</div>
just nothing happens.
EDIT: Ragavan Rajan Invalidating Cache and restarting solution works, but after a few minutes working Emmet gets broken again.
I had the same problem, File > Invalidate Caches / Restart didn't solve it.
But another way helped: I just unchecked the selected box in Settings > Editor > Language Injections > "xml:div"
Go to file > settings > search for Emmet
Make sure you have checked the "Enable XML/ HTML Emmet"
Also, Go to File > Invalidate Caches / Restart -
Then Restart the web storm. Hope it helps
Related
I'm trying to use Foundation in a pre-existing Rails 5 project, but none of the Foundation styling is actually loading.
I've been through the following steps:
Add gem 'foundation-rails' to the Gemfile
Bundle
Run rails g foundation:install from the command line, overriding application.html.erb (then pasting back the deleted codes, without overwriting any of the new lines)
Rename application.css to application.scss, since (inside the original multiline comment) I'm running *= require foundation_and_overrides
Restart server, reload pages with some foundation-specific html added, eg, in application.html.erb:
<div class="row">
<div class="large-4 columns">
Testing columns
</div>
<div class="large-8 columns">
<%= yield %>
</div>
</div>
But the layout is unchanged (ie, splodged into the top-left of the page).
I've checked that the foundation_and_overrides.scss file is getting successfully loaded by adding some test styles in there which are getting picked up - but nothing is coming through that I haven't added myself.
What might I be doing wrong? (I realise I haven't included much code in here, because I'm not sure where the error might be, so I don't want to do a huge code dump).
You need to rename that file to application.scss and add #import "foundation_and_overrides";
and in your app/assets/javascripts/application.js add //= require foundation
$(document).foundation();
I was having the same problem and the thing that fixed it for me was overriding the conflicted files. If you run rails g foundation:install and it gives you the option to override the conflicting file (foundation_and_overrides.scss), accept it. This will load in the new file and once you restart your server, you should be good to go. Bare in mind however, this will override both foundation_and_overrides.scss and application.html.erb.
My problem stemmed from the fact that I was trying to use the same old files I was using with Rails 4, and for whatever reason, it broke when I upgraded to Rails 5.
So to summarize quickly:
Repeat steps 1-3 you listed above
Change application.css to application.scss
When prompted, override the conflicted files
Restart your server
I am doing my first project in Foundation 6 and am having trouble getting the responsive navigation to work. I started with the basic page template that comes with Foundation (installed F6 using CodeKit) then I pasted in the responsive menu code exactly as it appears here http://foundation.zurb.com/sites/docs/responsive-navigation.html#responsive-toggle but when viewed at small screen sizes, the word "menu" appears, but clicking it does nothing.
The Drilldown responsive menu also does not work -- pasted in the drilldown menu code (second example down, on the page referenced above) and what appears is a long long list of links, nothing is collapsed and nothing slides in. There must be a script missing but I have triple-checked and app.js, foundation.js and jquery scripts are loaded. What else am I missing?
First of all sorry for my bad English, did you initialize foundation's javascript?
That can be done with the following code in youre custom javascript file:
$(document).foundation();
I do it with jQuery like this:
$(document).ready(function() {
$(document).foundation();
});
for more information see: Foundation-6 documentation - initializing
and please check if you have the proper file structure for the foundation files, please see the following documentation: Foundation-6 documentation - File Structure
tl;dr: Faulty purifycss configuartion in the gulp.babel.js file.
I also had this problem. My setup:
generator-webapp
webapp's jade recipe
I can get the responsive dropdown menu to work by using the tab and enter key. This means that the relevant js files are being loaded correctly. The navigation 'burger' also does not appear.
Upon using the chrome dev tools to inspect the responsive dropdown menu example from the foundation website, I noticed that style of <button class="menu-icon" type="button" data-toggle=""></button> is being effected by the .menu-icon CSS rule from the scss partial, _menu-icon.scss. Mine wasn't. When I looked, the foundation.scss file from the app/ has the exact same style rule. The converted foundation.css was being served from the .tmp/ folder, but did not have the .menu-icon CSS rule. Then I suspected purifycss again (which I had commented out of the gulp file before and forgot to reset the gulp serve, saw no fix and thus falsely excluded the purifycss rule from the list of suspects).
I set my gulp styles task up like this:
gulp.task('styles', () => {
return gulp.src('app/styles/*.scss')
.pipe($.plumber())
.pipe($.sourcemaps.init())
.pipe($.sass.sync({
outputStyle: 'expanded',
precision: 10,
includePaths: ['.']
}).on('error', $.sass.logError))
.pipe($.autoprefixer({browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']}))
/*Stupidly assumed that purifycss supported jade files as src files*/
.pipe($.purifycss(['app/**/*.js', 'app/*.jade']))
.pipe($.sourcemaps.write())
.pipe(gulp.dest('.tmp/styles'))
.pipe(reload({stream: true}));
});
Which meant that the necessary styles were being deleted (including .menu-icon). I think I will use stylperjade or rearrange the tasks so that I can do this: .pipe($.purifycss(['app/**/*.js', '.tmp/*.jade']))\
Let me know if this was your solution as well
What would be the simplest why to bind a pydev keyboard shortcut to a command which surrounds the selected text with a django trans template tag, modifying it to {% trans "text" %}?
Note: the answer below is if you're in the PyDev editor (.py files)... This support is not currently available for the Django Template editor (so, please let me know which editor you're actually using where you want that feature).
You currently can't set templates to a given keyboard shortcut.
Now, having said that, you can make it work by creating a custom scripting command.
It should be pretty straightforward, just follow the split lines (Ctrl+2, sl) as an example.
I.e.: in your PyDev install you should have a Python module at plugins/org.python.pydev.jython/jysrc/pyedit_create_lines_on_commas.py, create a copy of it -- but make sure it still starts with 'pyedit_', then change the function SplitTextInCommas to do what you want and change the ACTIVATION_STRING to something else -- i.e.: if you change it to x, you have to do Ctrl+2, x to activate it.
Also, you should probably also set the location of 'additional jython scripts' to a folder where you put that module (window > preferences > pydev > scripting pydev).
It may also be worth taking a look at: http://pydev.org/manual_articles_scripting.html for some more info on scripting PyDev.
With default template, trac ticket is available for viewing only, I must click modify to expand properties tab to modify, change state of a ticket.
Now I want to expand that tab automatically? How can I change it quickly without changing the template itself?
Is it possible to change it with trac.ini file?
I cannot find where's location of default template to change, so I cannot change myself.
Thanks!
I think the best way to enable the behavior you're looking for is to add a custom JS file (which can be injected much like a custom CSS, read TracInterfaceCustomization).
In that file do this:
$(document).ready(function() {
window.setTimeout(function() {
$("#modify").parent().removeClass('collapsed')
}, 0);
});
This code is untested but it should give you the idea. Basically we need to wait until the DOM is ready ($(document).ready) but as there are multiple JS functions called during that event, the setTimeOut sets a slight delay to make sure that the collapse command went through before.
HTH from a professional Trac developer :-)
I'm using trac 0.12 and had the same issue.
...without changing the template itself
I couldn't find a option to configure it but I did notice if you click the "modify" quick link at the top right of the ticket then the "Modify Ticket" foldable area is automatically uncollapsed for you.
I know you didn't ask for it, but just in case, you want a horrible template hack...
Open the template file in editor, e.g. for me in CentOS 5.5:
sudo emacs /usr/lib/python2.4/site-packages/Trac-0.12-py2.4.egg/trac/ticket/templates/ticket.html
Comment out the jQuery line that triggers the modify section to collapse on page ready:
//$("#modify").parent().toggleClass("collapsed");
I found the edit didn't take effect straight away - perhaps the template is cached or something? It worked after a few minutes of shift-refreshing and restarting apache.
Lets hope someone else answers with a better solution...
This is basically Schwarz's answer but in a simpler form
To get ticket contols expanded on load do following. Put following code
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:py="http://genshi.edgewall.org/"
py:strip="">
<!--! Add site-specific style sheet -->
<head py:match="head" py:attrs="select('#*')">
${select('*|comment()|text()')}
<script type="text/JavaScript">
<!--
// EXPAND TICKET CONROLS ON LOAD.
jQuery(document).ready(function() {
window.setTimeout(function() {
$("#modify").parent().removeClass('collapsed')
}, 1);
});
//-->
</script>
</head>
<body py:match="body" py:attrs="select('#*')">
${select('*|text()')}
</body>
</html>
in /path/to/your/trac/project/templates directory in file site.html.
I have seen in videos, that people get html template by typing "html:5" or something like that (btw, they're not using notepad++). Is this possible in notepad++? Thanks.
A little late, but what you're looking for is called Zen Coding.
The Zen Coding project hosted on Google has a plugin for NotePad++ that should do exactly what you need.
For example, entering something like:
html>head+body>div#content>ul.nav>li*5
Followed by Ctrl + E, expands into:
<html>
<head></head>
<body>
<div id="content">
<ul class="nav">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
Now it's called Emmet plugin in Notepad++
Just type html:5 and press control + alt + enter
and you will get the following markup:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
Option 1
Install and use the Notepad++ Snippets plugin.
You can input whatever code snippet you want and give each snippet a name.
When you double-click on your snippet name, the snippet text just gets copied to your editor (before or after your cursor, based on how you set it)
Option 2
If you don't have admin access or behind a firewall, there is a Macro hack.
If your template is a bit short, then you can use the built-in MACRO and manually key in the template text (a one-time operation per template). You can then "Save Current Recorded Macro" and replay it for every new file that you create. Emmet works only for html, but this technique works for any kind of text(as long as you can manually key-in the text)
Note: You cannot copy-paste (Ctrl-C/Ctrl-V) text while recording as it will copy-paste current clipboard's contents which is undesirable!
For those who like step-by-step instructions:
Open Notepad++. Select Macro -> Start Recording.
Key-in your text (every key-stroke is now being recorded, so minimize backspaces and deletes)
Click : Macro -> Stop Recording
Click : Save Current Recorded Macro and give it a name (say "bash_header" or "html_structure")
Now click on your Macro name to repeatedly apply the template text to your notepad++ file.
Using NP++v6.1.4, I got this to work pretty quickly doing this:
Choose Plugins -> Plugin manager -> Show plugin manager
Wait for all the plugins to be shown, and check the box Emmet
It may alert you that Python will also be installed
Once it completes its installation, allow NP++ to be restarted, and now you can use the many Emmet features :)
Now, just type ! and hit ctrl-alt-enter.
You can use QuickText to create your own templates. It seems that QuickText isn't supported anymore, but it still works, the documentation just has some wrong content.
I use a program called Ditto, it's like a clipboard of all your copy-paste material. I have my prewritten syntax in there pinned. It helps.
In actuality, it is called marking up your code. Although "zen coding" is becoming well known in place of markup, it is the original term for building a structure for your code; which makes it easier for others to read.
As far as the template thing goes for Notepad++, I'm afraid that it is difficult to find public, custom made templates. Although the program does come with custom made templates, such as the Hello Kitty template, your best bet would be to ask people in online programming communities.
My personal favorite is DreamInCode, where they offer help and support, as well as pretty informative tutorials on numerous different computer programming and web development languages. I'm confident that if you can't find one you like that has been posted there, if any, someone would be glad to help you.