I just discovered zen-coding.
I have the following snippet of code I want to generate.
<div id="base">
<div id="header">
<div id="logo"></div>
</div>
<div id="body"></div>
<div id="footer"></div>
</div>
Is there a way to do this with one line of zen-code
I know I can write
div#base>div#header>div#logo
this is where I get stuck, cause I don't know, how I can go back and add body and footer divs(siblings of header).
I want to figure out if/how this can be done in one line.
Thanks! :)
This works for me with ZenCoding for Notepad++
div#base>(div#header>div#logo)+div#body+div#footer
addition to Jonathon Bolster's answer:
other trick for climb up parent tag / tree:
you can using operator
circumflex accent: ^
from emmet ( successor of zencoding )
source:
http://docs.emmet.io/cheat-sheet/
or you can using
less than symbol: <
from sparkup ( fork of zencoding )
source:
https://github.com/rstacruz/sparkup
Related
Prettier does a very nice job on HTML generally, but indents pre>code blocks.
I always want pre>code blocks unindented.
Seems like I should be able to configure this in .prettierignore, but can’t find a way that works.
blocks like:
<pre class="line-numbers"><code class="language-json">"operations": [
"video-cloud/video/all",
"video-cloud/playlist/all",
"video-cloud/sharing-relationships/all",
"video-cloud/notifications/all"
]</code></pre>
Get indented like this:
<pre class="line-numbers"><code class="language-json">"operations": [
"video-cloud/video/all",
"video-cloud/playlist/all",
"video-cloud/sharing-relationships/all",
"video-cloud/notifications/all"
]</code></pre>
I want the block left untouched.
Quoting from a deleted answer:
I personally don't use the extension but it seems like prettier has build in configuration for it: https://prettier.io/docs/en/ignore.html
IIUIC, the solution is
<!-- prettier-ignore-start -->
block to keep
<!-- prettier-ignore-end -->
Voting to undelete the answer by "cas v.l." as it led me to the solution in seconds.
You can ignore certain files, but you can't ignore parts of the code.
For future reference. In my case, I'm working on a react project. Adding "{` ..your code.. `}" after pre tag, prettier ignores the block. For example:
<pre>
{`
<div className="row">
<div className="col">
...
</div>
</div>
`}
</pre>
I am working with HTML, Javascript and jquery mobile. At the top of a lateral panel there is a space caused by some characters. Is there a way to remove them directly from the HTML code without using Javascript? I am using the UTF-8 charset but I will change it if it can solve the problem.
EDIT:
Here is the html I saved on the server:
<div data-role="panel" data-position="left" data-position-fixed="true" data-display="overlay" id="left-panel" data-theme="b">
.... html code ....
</div>
Here is the html generated by jquery mobile:
<div data-role="panel" data-position="left" data-position-fixed="true" data-display="overlay" id="left-panel" data-theme="b" class="ui-panel ui-panel-position-left ui-panel-display-overlay ui-body-b ui-panel-fixed ui-panel-animate ui-panel-open">
<div class="ui-panel-inner">
.... html code ....
</div>
</div>
Just delete the   from your code. That's it.
I had the same thing happen to me. I'm guessing that you copied code from their "View Source" examples. Apparently when you copy from that it has a bunch of spaces rather than tabs for formatting. If you remove all the excess spaces it should work fine. This happened to me using Sublime Text 2.
Suppose I have a hierarchy like this:
<div class="first_level">
<div class="second_level_1">
<div class="third_level_1">
<div class="fourth_level_1">
<ul><li></li><li></li></ul>
</div>
<div class="fourth_level_2">
<div class="fifth_level_1">
</div>
<div class="fifth_level_2">
<ul><li></li><li></li></ul>
</div>
</div>
</div>
</div>
<div class="second_level_2">
<ul><li></li><li></li></ul>
</div>
</div>
I want to select all those divs, which contain at least one ul in them. So in the above example code, that would be divs second_level_2, fourth_level_1 and fifth_level_2 ..
What CSS selector can I use to get this result ?
EDIT:
If it's not possible with CSS alone, you can suggest answers using JavaScript, although due to the nature of my actual code, I would really like to avoid that if possible ..
jsfiddle
Here are two options - both have downsides, but you can consider them:
You can either manually add a second class to the divs with a ul:
<div class="fourth_level_1 div_with_ul_class">
Note: If you are using some dynamic language on the server, such as PHP, this could actually be implemented fairly easily, without manual coding.
Or if you want to be dynamic I recommend jQuery:
$("div > ul").parent().addClass("div_with_ul_class");
Parent selector isn't available in CSS, despite a lot of requests to add it.
jQuery has a nice selector, know as :has; http://api.jquery.com/has-selector/
$('div:has(ul)');
Would be the jQuery selector.
In IDEA I can select a block of html and press ctrl+alt+t to surround that with a tag. I am trying to find the option/keymapping to do the opposite... I want to select a block of html and remove the outermost surrounding tag. Here's an example:
<div id="one">
<div id="two">Hello</div>
</div>
If I select the #one div in the editor I should be able to have it removed, leaving only this:
<div id="two">Hello</div>
Any way to have IDEA do this for me?
Code | Unwrap/Remove... Ctrl+Shift+Delete
(Cmd+Shift+fn+Backspace on Mac)
Take a look at "XML Refactorings" > "Unwrap Tag..." in context menu. This functionality is provided by Refactor-X plugin.
I am using the DNN MobiNuke Module (v02.00.03) from DataQuadrant to create a mobile version of a website I have created. Everything is going well EXCEPT a weird issue I am running into with the Mobile Skins. I have a simple Mobile Skin that looks like this:
<div id="mobile_frame">
<div id="mobile_header">
...
...
</div>
<div id="main_wrap">
<div id="mobile_main" class="sub">
<div id="ContentPane" runat="server"></div>
</div>
</div>
<div id="mobile_footer">
...
...
</div>
</div>
The issue that is arising is that ANY content in the ContentPane that has an empty div tag will change itself when rendered in a mobile browser:
<div class="xxxx"></div>
Will change itself to
<div class="xxxx" />
The biggest problem that this is causing is that the browser is interpreting the tag as an opening div tag with no closing tag. Therefore it is placing an ending div tag essentially wherever it wants. It's causing ALL of the markup after this area to get very messed up.
Here is an example of the code as it should be, and how it is rendering on the page:
Should be:
<div id="main_wrap">
<div id="mobile_main" class="sub">
... Content Here ...
</div>
</div>
<div id="mobile_footer">
...
</div>
</div>
But it renders as:
<div id="main_wrap">
<div id="mobile_main" class="sub">
... Content Here ...
</div>
<div id="mobile_footer">
...
</div>
</div>
</div>
I can fix this in the markup that I have control of by putting inside of the tags, but I do not have the time/energy to go through EVERY module that might be showing up in the ContentPane to check for empty tags. In addition, there are places where I want an empty tag to fill it with content later with javascript.
Lastly, I did a TON of research to look this up and I cannot find a thing. The closest that I found is that this happens in XSLT when transforming some XML, but as far as I know MobiNuke is not doing that.
Any help is greatly appreciated. Thanks!
I have figured out the issue after having a discussion with the vendor. There is a setting in the module settings called "Enable content adaptation". Apparently the setting will try to make the HTML to be XHTML compliant, but it was definitely not working for me. Hope this helps anyone else seeing this.