Within the Ace editor HTML panel is it possible to move the cursor if I know the Xpath of the dom element?
For instance if I have this path
/html/body/nav/ul/li[2]
I would love to be able to move the cursor to
<html>
<body>
<nav>
<ul>
<li>Alpha</li>
*here*<li>Beta</li>
<li>Gama</li>
</ul>
</nav>
</body>
</html>
I guess one option is to write a regex based on opening tags but maybe there was a cleaner way. Haven't been able to see from the API if it's possible.,
Turns out I was over thinking the problem. I reinterpreted the path
/html/body/nav/ul/li[2]
to
/html/body/nav/ul/li/li
Split those and then had the Ace editor do a sequential find from the beginning. So find "<html" and then "<body" and then "<nav" etc.
Related
There are Live Templates, there is Emmet as well but I can't get with them what I need.
I want to change selected text like for example this:
About Us
Contact Us
Some other page
into:
<ul>
<li>About Us<li>
<li>Contact Us<li>
<li>Some other page<li>
</ul>
And it would be best if I could do that with a shortcut key.
I used that a lot in PHPEd By Nusphere but here I don't see such an option.
There was there option: get selection, parse with PHP script via shell and output back to editor and that way I could do anything with selected text.
Is that possible with PhpStorm?
Is there something that I could use to achieve this effect with just one click?
I can do a Live template for one line of text, I don't see possibility to cover more lines at once. Then I could at least get just list of <li>s without <ul>.
i want to insert html codes using chrome extension.
Adding complex HTML using a Chrome content script
this link works but i need to insert more specific area. For example this links add html codes to top of codes but i need to insert in specific codes like
<html>
<body>
...
...
<div>
//codes
</div>
// i want my code goes here
// <div>
// </div>
...
...
</body>
</html>
if im still can't explain myself, there is a chrome extension which name is "looper for youtube" this extension is doing what i need. Thanks for any helps, and sorry for my bad english
You have to write code in the content_script to specify where your HTML will be injected. For example, you could use the insertBefore function to insert HTML code before an existing element.
There are many functions surrounding the DOM tree which can help you specify the exact point in the document to insert new objects. Do not think about the HTML as a text file, think about it as a document tree (with parent nodes, child nodes, and ids). Here is a list of functions to get you started:
http://www.w3schools.com/jsref/dom_obj_all.asp
For example, something like:
document.getElementById('test').innerHTML = "HI!";
Will insert "HI!" inside the div tags in the following HTML:
<html>
<body>
<div id='test'>
</div>
</body>
</html>
If you require further assistance, please be more specific with your request. Where (exactly) do you need the HTML to be injected?
In my project functionality is like when i need to set a link to direct to:
/site/sales/sold.php
so the menu.php file link would look like this:
<ul>
<li>Sales</li>
<li>Sold Items</li>
</ul>
it would sometime direct to
/site/sales/sold.php
and the next moment, it repeats the menu's directory like:
/site/sales/sales/sold.php
so i removed the sales directory, as its directing there by itself, worked for a little while and now it directs to
/site/sold.php
which does not exist so it ends up with a 404.
If you are on a page sales/ and link to a page sales, the link will result in sales/sales/ – that is the defined behavior.
The default method to avoid that is to specify a base URL via the HTML <base> tag. There is no PHP, JS or CSS involved here – just good ol' HTML 2.0.
<base href="http://www.example.com/site/">
Using this in your pages head, will define the given URL as base for all links on the page, thus a link like sales/ will actually result in http://www.example.com/site/sales/ when clicked.
See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
Why don't you just use absolute Links? Or even URL-rewriting?
The only way of using relative links like your "sold.php" is if your menu only occurs inside your /sales directory. If this menu comes up for example inside a page on /site, of course it won't work, because there probably isn't a file called "sold.php" under /site/sold.php. So if you wan't to make sure, your link "Sold" always points to the right direction, use a Link like /site/sales/sold.php. Then it won't matter if you are inside /site or even inside /site/sales.
if i for example set my menu link to direct to: /site/sales/sold.php so the menu.php file link would look like this:
<li>Sales</li>
<ul>
<li>Sold Items</li>
</ul>
This does not make sense. If you would point your link to /site/sales/sold.php, your link would look exactly like that: <li>Sold Items</li>
It appears PHPStorm doesn't want to follow the code style I specified.
Each time I format an HTML file, it collapses the indentation from this:
<html>
<head>
bleh
</head>
<body>
bleh
</body>
</html>
to
<html>
<head>
<bleh>
bleh
<bleh>
</head>
<body>
<bleh>
bleh
<bleh>
</body>
</html>
"bleh" (being all the contained tags) are indented how they're suppose to.
I found the setting: File -> Settings -> Code Style -> HTML -> Other -> "Do not indent children of".
That was filled with several tags which I have already removed (so the text field is empty).
The settings are theoretically applied to the Project scheme which is the current scheme.
However, I haven't fully grasped the concept of what these schemes are, so I may be missing something important.
Pictures:
http://snapshot.overloadproducts.com/7411c9d50e0b43edc76c1e625a38d61c
http://snapshot.overloadproducts.com/5a74f83356572f3644a6d52bf2fa1f66
Edit:
Opened PHPStorm the next day, and it said the project file had been edited externally, and it needed to refresh. Once it did, it was formatting correctly again.
So somehow the settings file was out of sync and the settings window wasn't saving to the file.
Still a bug in my opinion.
Just go to Setting/preferences -> Editor -> Code Style -> HTML -> Other
Insert new line before: add body.
Do not indent children of: clear all in this form.
ANSWER (ON EDIT): For an actual work around, try right clicking your document and clicking "Paste Simple". This will preseve the formatting of the text pasted on the clip-board. Not really a solution as such, but an appropriate workaround.
ORIGINAL:
Did you end up getting an answer for this?
I have the same problem, and for the life of me can't fix it. This is really really annoying, especially seeing as the "preview" pane of what the code formatting should look like isn't accurate - it shows:
<div>
<div>
<p>
Some comment from JetBrains.
</p>
</div>
</div>
... but when pasting in text from an editor, it gets reformatted to:
<div>
<div>
<p>
Some comment from JetBrains.
</p>
</div>
</div>
Sorry for posting a comment in the answer section but I don't have 15 reputation.
Right below the option "Do not indent children of:" you'll find the option "or if tag size more than" with a default value of 200.
That means that for larger HTML-Files indentation will effectively be disabled. I have no idea why anyone would want that but the way to get rid of this (miss-)behaviour is to remove that value (just leave the field empty).
I have tried countless plugins, codyfying HTML with escape keys, and my blood is beginning to boil. Switching between Visual and HTML mode is actually changing my content, ie destroying it!!!
OK, i figured out what to do.
First go into visual mode.
Select Preformatted in the formatting drop down. A little grey box is created.
Inside the grey box, copy and paste your raw HTML.
Save it and switch from visual to HTML views a few times. There should be no mangling.
IT IS ABSOLUTELY CRUCIAL that you paste into visual tab, instead of in the text tab, or it will get stuffed up completely (very unintuitive. You would think it would work the other way araound).
Wordpress does a strange thing where if you switch between visual and "text" mode (HTML mode was renamed in 3.5 update) it strips any tags that appear empty which often times may not be. This might be what you are experiencing if I am understanding the problem correctly.
If you are just trying to display code on your website you should be able to wrap the code like this:
<code><p>Example code post</p></code>
This is laid out in these guidelines here: http://codex.wordpress.org/Writing_Code_in_Your_Posts
If it is a block of code that needs to not wrap you could also use the "pre" tag like so:
<pre><code><p>Example code post</p></code></pre>
This is described very well here: <code> vs <pre> vs <samp> for inline and block code snippets
Yes, it is absolutely possible. You can follow any of the above mentioned methods. I prefer the following way.
First of all, decode the HTML code using online html decoder. You can find any on google. Then, You can paste the decoded code on your post. The benefit of this method is that, your indentation won't be lost.
Decoded Code
Rendered View File
Hope, it helps future reader to find a way.
Wordpress is very buggy. It took me a long time to finally succeed. For my Wordpress.org installed on my pc I tried: go to visual mode, add pre-formatted text block, copy/paste decoded or encoded. I tried :
<pre><code><p>Example code post</p></code></pre>
That did not work.
The only way it works for me is:
Go to visual, instead of adding a pre-formatted text block I create a paragraph text block, copy/paste the encoded HTMl and then convert it to preformat.
Hope that helps.
Perhaps, You should try out this plugin
http://wordpress.org/extend/plugins/insert-html-snippet/
Hope this helps!
One way to do is to make the code commented. Something like,
<!--div>
<md-divider class="org__meta-divider md-soc-theme"></md-divider>
<h4 class="org__meta-heading">Technologies</h4>
<ul layout="" layout-wrap="" class="org__tag-container layout-wrap layout-row">
<li class="organization__tag organization__tag--technology">web services</li>
</ul>
</div-->
instead of
<div>
<md-divider class="org__meta-divider md-soc-theme"></md-divider>
<h4 class="org__meta-heading">Technologies</h4>
<ul layout="" layout-wrap="" class="org__tag-container layout-wrap layout-row">
<li class="organization__tag organization__tag--technology">web services</li>
</ul>
</div>