When I save my file, a block of code gets messed up and end up being indented to the right.
Here is a screenshot to demonstrate the problem:
The code works but it's just not visually pleasant.
I have tried to uninstall some extensions, but none of them had to do with HTML.
Fixed by removing the extra " from line 645 to 647 that was causing the right indention.
For Visual Studio Code, you can use the hotkeys to reformat your code. The following hotkeys is for formatting your document, it works for html and other kinds of files as well, such as javascript files, json files, etc.
Format Document
Note: Different computer may have different settings. To search for hotkeys, ctrl + shift + P.
Why not try "save as" and give the file a new name. It might just save the changes the way you want it to.
Related
I have a HTML file where the formatting is completely messed up. Hopefully you can the the problem in this picture below:
This is just an example from the file (other parts are messed up too). You can see that the <table> start tag and end tag don't have the same indentation. Also, I would expect everything inside the tag to be indented farther. This is how it looks after using the Shift + Alt + F code formatting shortcut. What could the problem be and how can I solve it?
I had the same problem! I opened a issue in vscode's github https://github.com/microsoft/vscode/issues/74139#issuecomment-495578264. The older versions used to work I just got it solved rolling back to the version 1.17...
click this links to see the screenshots
full source code of the home page
source code of the external file
full source code of the home page (in google chrome inspect
view)
full source code of the home page (in google chrome page source
view)
I have been keeping the code indentation in that web pages from the beginning in my code editor. but when i see my site on google chrome, the indentation is not set properly. can I know why is this? I googled this, yet coudn't find an answer or a solution.
It is not Google Chrome's fault. Your files simply get compiled to this form, the browser displays them exactly as they look like.
But why they look like this? In your case PHP's include does only purely textual replacement, as in the picture bellow:
The effect is the same as if you copied the contents of the external file and pasted them to the main file, replacing the include tag.
If you would really insist on having the code indented properly after the include does its job, you would have to add new spaces at the beginning of each line (but first) of the included file. It would shift the text to the right (in this case 4 spaces) and in the result the indentation would be preserved.
However, I'd discourage you from doing so -- it is only the code that is generated, probably no one is going to work with the compiled result. Proper formatting of code is only meant to make the human work easier -- it has no effect on how the page will eventually look like, when rendered by browser. Thus, it probably would suffice if you kept the two source files formatted as they currently are and left the output as is, even though it is not indented well.
If you'd like to have the code properly formatted in the page source view, please remember that you can simply use the "pretty print" button in the lower left corner of the preview:
So I am starting to learn HTML and I am running into some weird things. I am trying to just use a link to go to a specific webpage. I typed in the code but it gave me an error saying it could not find the link on my desktop. However, when I copy and paste the exact same code from a website it works fine. Here are the two codes so you can compare, the top one works and the bottom one doesn't.
This is a link
<a href=“https://www2.housing.wisc.edu/dining/ordering/”>This is a link</a>
I was wondering if it had to do with the slightly different quotation marks, if it is I am still not sure how to fix it, because the computer autocorrects the quotations to that format.
If the comments haven't answered your question yet, yes you need to use a slightly different quotation mark. HTML only accepts the single typewriter (non-curly) quotation mark ' ' or the double one " ". Or, in your case, you can choose not to use quotes at all, unless the value contains a space or equal sign.
What are you using? Office? Open up a text editor like Notepad or download Notepad++ (free) and you won't have to deal with auto correct.
In any case the code you posted above works for me.
Open Notepad.
copy and paste
<html>
<body>
This is a link
</body>
</html>
click SAVE AS and instead of saving as a .txt file save as a .html to your Desktop.
Double click the newly created file, and it should open in a web browser.(If not you have to right click on the file and select "open with..." and choose a web browser
Click the link.
Check out http://cancerpreventionnetwork.org/participants.shtml and you can see that the header is dropped down on this page. If you click on any other page, the header is not dropped like that. I have tried everything and I can't figure out what is causing this.
When I check the page in Chrome with inspect element, I see an extra text node. I can't see it in the source, but maybe you can?
seems to me that it's the classic UTF8 BOM encoding problem
you need to check all your source files and make sure that they are not encoded using the BOM.
there are many ways to remove it. I use notepad++ but there might be an automated tool or some shell code to remove the BOM for multiple files
and also.. if you're including files (templates) make sure that they don't have white spaces or new lines after the ?>
Good Luck
I have a file with a lot of this kind of thing in it:
<asp:TableCell ID="TableCell9" runat="server">Company
Organization:</asp:TableCell><asp:TableCell ID="TableCell10" runat="server">
How can I get the formatter to change it to shows like this:
<asp:TableCell ID="TableCell9" runat="server">Company Organization:</asp:TableCell>
<asp:TableCell ID="TableCell10" runat="server">
What I have tried:
I opened Tools->Options then browsed to Text Editor. I got a list of Languages. I selected HTML because that is the language that controls formatting for aspx files.
I changed "tag wrapping" to not have "Wrap tags when exceeding specified length" checked.
I then pressed ctrl+k, ctrl+d (Format the document). This did not fix the problem.
What I don't want to have to do:
Edit the file manually to fix all the tags.
Any ideas?
I was having the same problem, and I found the answer on Scott Gu's blog.
The solution is to setup the formatting rules in Visual Studio (right click on any tag, click on Formatting and Validation, click on Tag Specific Options)
When press ctrl-k, ctrl-d the document will format as per your settings. If a closing tag does not move to a new line, it's because there is no space between the end tag and what is preceding it. This happens because Visual Studio is being careful to not change how the page is rendered.
For the full blog post checkout Scott Gu's blog post.
http://weblogs.asp.net/scottgu/archive/2006/07/07/Tip_2F00_Trick_3A00_-Custom-formatting-HTML-in-Visual-Web-Developer-and-Visual-Studio-2005.aspx
I found a way that works.
In the list with HTML there is a File Extension Option.
I added ASPX to that list and said to edit it with an XML editor (I suppose I could have just right clicked it and opened it with the xml editor, but I did not think of that till after).
Anyway, once it is open as an XML File I formatted it (ctrl+k, ctrl+d) and it formated the way I wanted it. I then removed the extension mapping and reopend the file again.
One last formatting adjusted the tab spacing and I was perfect!
Note: When I did this the top line had this change made: from Page Language="C#" to Page="" Language="C#" I changed it back manually and all seemed to be well.
Later Note: Sadly, Visual Studio messes up the formatting every time I run the solution. Note that pressing ctrl+k, ctrl+d is fine and keeps my nice formatting, but when I run, Visual Studio collapses it down to a very unreadable format. :( Don't know how to fix it....
The answer should be:
Tools-Options->Text Editor->HTML-Format->Tag Specific Options
Then in ASP.NET Controls look for your tag. If it's not there you might need to Add it (New Tag) and set the Line breaks as you want them.
However I've found that this does not always work.Visual Studio respects the per tag colorization but Line breaks are not always respected.
So if this doesn't work for you, you might need to do a Search-Replace hack (Look for and replace with a NewLine in the middle), thenk try Format document and that should work.