In VS Code I am having trouble in formatting HTML.
For example, I write a list of tags inline and I press Shift+Alt+F and nothing happens.
I noticed this:
If I write:
<div><span><p></p></span></div>
nothing happens when I do the auto format.
If I write:
<div><div><div></div></div></div>
then it becomes:
<div>
<div>
<div></div>
</div>
</div>
hope this will help you to help me...
We had the same problem in my dev team. Please check or try the following things:
Are the keyboard bindings correct?
Is selected code language HTML?
Have you restarted VS code?
Begin a small piece of the formatting and then try again (for some reason it
thinks its already correct.
There are a certain list of tags that are ignored when auto formatting - these are defined in the setings.json file under
html.format.unformatted":
So go to settings (Command-Comma on a mac) and search for that setting and remove the tags you do want formatting.
The bad news is that it still doesn't format how I think it should - i.e. the isn't indented inside the but it at least puts it on a new line for you!
This is a VS code bug. I installed the 1.17 and it worked very well https://code.visualstudio.com/updates/v1_17
Related
In VS Code, I use Beautify extensively. But it unnerves me that closing tags always wrap on the same line as "floating" text, or self-closing tags. For instance, before Beautify :
<div class="wrap">
<img src="/wp-content/uploads/2018/08/image.png">
</div>
<div class="wrap">This is just some text
<strong>but it needs to be emphasized</strong>! And then some...
</div>
And after Beautify :
<div class="wrap">
<img src="/wp-content/uploads/2018/08/image.png"> </div>
<div class="wrap">This is just some text
<strong>but it needs to be emphasized</strong>! And then some... </div>
Is there a setting, or another extension that could help get the code closer to what it looks like in the first example, or am I just doing things wrong ?
It doesn't matter much most of the time, other than being a bit ugly to my taste, but yesterday I saw that it actually created problems with Wordpress, I just can't use Beautify anymore, it risks breaking the formatting.
There isn't an option to force the end tags to new lines.
One setting that helps is preserve_newlines. Enabling that should keep your tags from getting pulled back to the same line if you have them on their own line.
Version 1.8.1 of js-beautify (the library underlying Beautify for VSCode) improves the behavior in this area, but still doesn't have an option to force the end tags to new lines.
Several issues have been filed around this, including #1468 and #1413. PRs are always welcome.
I do not know about that. If you want a similar result to the top bit of code you could use Glitch.Com, Made by the people who made stackoverflow. Glitch hosts your website (website.glitch.com) and has a nice editor, Not to mention project rewind if you want to revert to a previous version.. You have light and Dark theme too.. It automatically closes tags like this
<h1>
</h1>
I think it is perfect compared to any other editor, You can have multiple files too.. no download required. Auto saving and perfect for any developer :3
I'm trying to make use of execCommand as I thought it is enough for my purpose, but when testing it under IE 8, there is strange thing: only 'italic' options fails to revert (I can set italic but it wont go off for the next execCommand call), or rather the browser cannot recognise that italic was already applied, because when run queryCommandState('italic', false, null)) I receive false. Thing is, that there is problem only with italic other looks ok(actually check couple;-)).
There is another point that I use contentEditable on html element, when I moved it to iframe it worked but I really do not want to use iframes. Furthermore there is styleWithCSS command to force styling html by style attribute rather than by tags like b -> `style="font-weight: bold" But this of course doesn't work in IE too.
Could you please advise or maybe suggest some other tool to handle some basic text editing in html
update: I just run command in js:
document.execCommand(actionToCall,false, args);
it correctly format selected text in my contentEditable:
<div contenteditable="true" type="text" class="myeditor-editable" style="white-space:pre-wrap">
<i>test</i>
</div>
but seccond call do nothing -> it actually tries to append <i></i> again. ( when look at HTML bar in FF console, then I see that there is some manipulation with html but like I said it stays italic)
Edit2: It looks that there must be a conflict in my code as in fiddle it's working(http://jsfiddle.net/kpskxfbo/1/ ), I thought that can be because the result in jsfiddle is returned in iframe but I have try it on my local computer and it looks fine too... I will post update once I found the problem.
i am trying to add this in source code of my page inside a comment.
However,when i save,the characters change from this http://img.ctrlv.in/5134b28e330fa.jpg
to
http://img.ctrlv.in/5134b28e7a5b0.jpg
i tried encoding the characters,but in vain.They still change.
Is there any trick to prevent them from changing?thanks a lot
No.
You are at the mercy of Blogger's template processor.
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>
I'm asking you to help me for solving this mysterious issue:
When I visit this web page http://www.legrandclub.net/members using IE8 it's displayed a double border bottom below search field. How is it possible? I've checked a lot of times CSS rules but I haven't found any rules that can be the reason of this issue.
Can you help me?
Thanks
First search the following lines. It's invalid to redefine the same id.
<div id="container">
<div id="content">
<div id="container">
<div id="content">
line 1033 tr is not finished properly
also line 1059 </div> this closing div appear to be not necessary.
I see a couple problems with your markup which could be causing the problem.
Only use an id once. #eric-fortis said it right.
You have a table inside of a div inside of a form. Use tables only when you want to show an actual table, and if you're going to use a table, make sure to close the table! (</table>)
You have a form inside a form, this will never fly.
Your id usage is confusing. If I can't come in and find the problem that means no one on your team can (yourself included).
Once you fix those problems you might be able to find the mistake.
Both Eric Fortis and citizen conn have good answers ... the more general answer is to upload or paste your code to http://validator.w3.org/ or point the validator at your page's URL.
I'm not a nit-picker for 100% correct validation, but your HTML structure needs to be valid or you'll have no end of CSS mysteries.
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.legrandclub.net%2Fmembers&charset=%28detect+automatically%29&doctype=Inline&group=0
Validation Output: 7 Errors