I'm using PHPstorm 6.
When i try to format my code which contains french characters, i got a issue like you see on the pictures.
NB : i got this just when i put my text into a tag like :
<span>génie Informatique</span>
So before formatting i was this :
And after formatting i got this
Thanks
What kind of file is that -- HTML?
In any case: you do have light green background between the tags. This suggests that you have another language injected between those tags (Language Injection functionality), which may use completely different formatting rules (not HTML -- e.g. JavaScript or whatever you may have injected there).
Possible solution:
Place cursor somewhere between such tags, Alt+Enter (or click on light bulb icon) and use "Uninject Language" option.
Alternatively: Settings | Language Injections -- find and disable (or even delete) offending entry there (will be "global" or "project" type in last column).
Related
I am trying PhpStorm and I coming over from VS Code.
I am used to adding classes and ids to my html elements like this:
element.class or element#id. I got very used to it and now I very much miss it.
Is there any similar way to add classes and ids to html elements in PhpStorm?
It's called Emmet and it is supported in JetBrains IDEs (IDEA based at least).
Just press Tab (default shortcut, can be changed in Settings/Preferences | Editor | Emmet) to expand the sequence, e.g. p.red[TAB] to make <p class="red">[CARET]</p>
https://www.jetbrains.com/help/phpstorm/using-zen-coding-support.html
I am trying to create a TOC for my Markdown blog.
The methods I am finding here... : Markdown to create pages and table of contents?
....do not work for me because I am naming all of my headers # _</>_ The Setup because I am using CSS on to style the "", giving each header a nice colored Icon next to it. If I simply use ```# The Setup ```` it works great.
This causes issues whenever I try to use [The Setup](#The-Setup).
I tried a few things like [The Setup](#_</>_-The-Setup) and other things, but I can not get it to work.
If someone can point me in the right direction I would greatly appreciate it. Also, if anyone has a better way of adding custom icons next to headers, I think that would be the better way to go about it.
As always, thanks in advance.
The general solution is to examine the rendered HTML output to see what the tool is converting the special characters to, in the HTML's element ID. Every tool could handle the conversion differently (it could convert special characters to -, _, or just remove special characters). Some examples:
<h1 id="_____the-setup">The Setup</h1>
<h1 id="-the-setup">The Setup</h1>
<h1 id="the-setup">The Setup</h1>
Once you have identified the exact id that the tool is using, then you use that value as the heading link in the markdown's table of contents. For example:
[The Setup](#_____the-setup)
Now, the tricky part is that not all Markdown tools will export the rendered HTML, including VS Code. The workaround for VS Code is:
Open the markdown preview mode (which renders to html internally).
Open the VS Code Developer Tools (Help > Toggle Developer Tools).
Use DevTools to inspect the element (in this case, the heading element for "The Setup").
I see that VS Code named the id as the-setup, so in the markdown's table of contents, I write [The Setup](#the-setup). Now the table of content hyperlink works in VS Code. Caveat: it might not work in other Markdown tools if they render a different HTML element ID!
Another shortcut now available in VS Code (1.70 July 2022), is that markdown can autocomplete the header ID. So you just type #, and it will list the valid IDs:
I use custom code snippet for Sublime Text like custom comments, function, reusable block code, CDN and more.. but I could not do that in WebStorm and PhpStorm IDE.
Here is my building block code snippet (comments) for Sublime Text:
/*============================
comments
============================*/
and this code blocks for HTML5 comments
<!-----------------------
comments
----------------------->
Moreover I'm new user for JetBrains software. Can I use custom code snippet above in JetBrains software ?
It's called Live Templates in JetBrains IDEs.
Available at Settings/Preferences | Editor | Live Templates.
You can use existing Live Templates as is, alter them to your needs or create your own.
Creating own is better be done in own group -- they will be stored in separate config file so easier to share, no possible conflicts with built-in ones (easier to update between versions etc.). It also makes perfect sense to use separate group per language -- the same abbreviation can be used for different languages/context but abbreviation within the same group must be unique.
BTW -- I'd say -- do not edit built-ins at all -- just disable specific built-in template and create your own version of it in separate group. This way you can always see what fix/change devs have made in new IDE version etc.
Full official tutorial/how-to is available here: https://confluence.jetbrains.com/display/PhpStorm/Live+Templates+%28Snippets%29+in+PhpStorm
You may also be interested in other articles:
https://confluence.jetbrains.com/display/PhpStorm/Tutorials
in particular (since you have used Sublime in the past): https://confluence.jetbrains.com/display/PhpStorm/PhpStorm+for+Users+of+Text+Editors
Finally I get a tips ! PhpStorm allows you to create your own live templates (code snippets) to optimise your workflows.
Open the settings dialog and head into Editor | Live Templates, you can see the available live templates grouped by language. To add a new template click the + (plus) button and select Live Template. Specify the abbreviation (the short bit of text you type that will be expanded to the full code snippet) and a description.
Then provide the full code snippet in the Template text field. You can include variables in the template in the format $<variable name>$, which will allow you to provide values when the template is expanded. PhpStorm recognises $END$ as a special variable indicating the final position of the cursor after the template has been expanded and values have been provided for all variables.
Next click the Define warning text to specify which language the template is for and optionally the context it is available in.
Now the template is ready to be used. Open a file and type the abbreviation that was specified earlier, then hit Tab to expand the template. The cursor will be positioned on the first variable, provide a value then hit Tab to keep moving through all available variables. The final position of the cursor will be the location of the $END$ variable.
Further Reading
Creating & Editing Live Templates
I don't think you can do this, however you can add custom tags in Settings > Editor > TODO.
//TODO & //FIXME are already implemented.
But this custom tags are not working for HTML.
Maybe you can find an extension to do that in Settings > Plugins.
As a PhpStorm user, one of the disappointing things I come across when I try using Vim is the way it does syntax highlighting in HTML:
Vim colours just the tagname and attributes,leaving the <, / and > in a different colour. What's the point of that? I find this distracting compared to the view I get in PhpStorm:
(Ignore the different colour scheme.) I find it harder to read code with all those < and > characters. How I can modify Vim to do this?
I'm using the monokai colour scheme for Vim.
You don't need to modify the HTML syntax itself - this can all be done by overriding the default links. syntax/html.vim defines syntax groups for the various HTML elements, and (at the end of the script) then links those to certain highlight groups, the appearance of which is determined by your colorscheme. If you establish a different link (in your ~/.vimrc), this will be honored. So, to make the entire tag appear like the tag name, use this:
highlight link htmlTag htmlTagName
highlight link htmlEndTag htmlTagName
Make a local copy of syntax/html.vim in ~/.vim/syntax/html.vim (where the first filename is your system install dir).
Experiment with changing the hilight group of htmlTag and htmlTagEnd (near the bottom of the syntax file) to match the hilight group of htmlTagName. I like the default, so I only experimented on a few files, and it didn't seem to break anything. Being the same colour, there shouldn't be anymore chevrons sticking it to your receptor cones.
Being such a simple minded test, this does likely break something somewhere, and you'll probably have to spend a few minutes with the other hilight groups to get a consistent look.
I write an application and inside of HTML code I have custom tags (of course these tags are parsed on server side and end user gets them as valid HTML code). Example of custom tag usage:
<html>
<body>
...
<Gallery type="grid" title="My Gallery" />
...
</body>
</html>
1.) How can I have eclipse recognize my custom tags inside of HTML code and add syntax highlighting to them?
2.) How can I add auto-suggestions to my custom tags? For example if I type "<Gallery " press "Ctrl+Space" - in the list of available attributes it shows me "type" and "title" and if I type "<Gallery type=" press "Ctrl+Space" I would see list of available values only for tag "Gallery" and its attribute "type".
Thanks in advance!
Not really what you want, but maybe it helps you:
You can try the Aptana Plug-in for Eclipse. It allows to write your own regular expression for HTML validation, so a custom tag would be ignored by the validator.
E.g.:
.gallery.
Eclipse allows you to add simple auto-suggestions via Templates. On
Eclipse 3.7.1 (Indigo) + PHP Dev Tools (PDT) 3.0.0: Window > Preferences > Web > HTML Files > Editor > Templates
Sadly, there is no easy way: you have to roll your own parser for this, and then add both your extra elements and the base grammar (HTML) to it.
If you have your parser, you could use it to do syntax highlighting (strictly speaking, for that simple lexing is enough); and a good parser can support content assist (auto-suggestions in your terminology).
Caveats:
Creating a parser for HTML is not an easy task. Maybe by aiming at a more often used subset is feasible.
If a parser exists, the editor parts are still hard to get well.
Some help on the other hand: you could use some text editor generators to ease your work:
Eclipse IMP http://www.eclipse.org/imp/ can in theory handle any type of parser, but currently it is most optimized for LPG. The documentation is scarce, but the developers are helpful in the forums.
Xtext http://www.eclipse.org/Xtext/ got quite a hype for creating text editors for DSLs. The generated editors are quite nice out of the box, but is not the best solution for large files. Has a really helpful developer community.
EMFText http://www.emftext.org/index.php/EMFText is a lesser known entity - I don't know it in details, but I guess, it is similar to Xtext.
I know its been a long time since this Q was asked,
but I hope this might help others like myself that reach this in search of a solution.
So, When using Eclipse (Mars.1 Release (4.5.1) - and possibly earlier - I did not check).
Go to Window - Prefrences
Then in the dialog that opens go to Web - HTML Files - Editor - Validation.
On the right side:
under Ignore specified element names in validation and enter the list of custom elements you use. (e.g. Gallery,tab,tabset,my-element-directives-*)
you might also like to go under Ignore specified attribute names in validation do the same for your custom attributes.(e.g. ng-*,my-attr-directives-*)
Two things to note:
After letting eclipse do a full validation you must also close the file and reopen it to have the warnings removed from the source code.
Using this method would ignore those attributes under any element. I don't think there is a simple way to tell it to ignore some-attribute only if its a child of some-element.
I find templates are an ok alternative but let's see if we can encourage a more robust solution; please take a moment and vote for this: https://bugs.eclipse.org/bugs/show_bug.cgi?id=422584
You need to add a new HTML template.To add a new template, complete the following steps:
1) From the Window menu, select Preferences.
2) In the Preferences page, select Web and XML > HTML Files > HTML Templates.
3) Click New.
4) Enter the new template name and a brief description of the template.
5) Using the Context drop-down list, specify the context in which the template is available.
6) In the Pattern field, enter the appropriate tags, attributes, or attribute values (the content of the template) to be inserted by content assist.
7) If you want to insert a variable, click the Variable button and select the variable to be inserted. For example, the word_selection variable indicates the word that is selected at the beginning of template insertion, and the cursor variable determines where the cursor will be after the template is inserted in the HTML document.
8) Click OK to save the new template.
You can edit, remove, import, or export a template by using the same Preferences page.
Reference : http://help.eclipse.org/kepler/index.jsp?topic=%2Forg.eclipse.wst.sse.doc.user%2Ftopics%2Ftsrcedt024.html