Prettier not formatting things correctly - html

I used Emmett to give 6 buttons with class btn and content as submit.
btn.btn*6{submit}
emmet worked correctly and gave the below thing as outputenter image description here
but when I saved the file prettier is formatting it incorrectly and breaking the button on two lines as below enter image description here

my solution about the case is you can disable prettier extension for a moment and try to save your code with the first picture format (not breaking into two lines). And try to run your project/app. After the program run successfully, you can enable the prettier again. Hope it can help you.

Related

VS Code isn't recognizing html files

VS had suddenly stopped recognizing HTML files and it doesn't autocomplete tags or even show the syntax unless I manually input every single file name in it, I would really appreciate the help on any idea how to solve that Here is how it looks:
I have tried many things but nothing seems to work or help fix it
See if this solves the problem:
On the bottom right of the application, you should see something like this:
Click on the "Plain text".
Search HTML in the list and click it.
Then your HTML should turn colorful.

VS Code: Code gets pushed to the right when I save

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.

How do I add a well formatted HTML signature to Gmail? P.S. Copy & paste doesn't work

it seems crazy that this still isn't an option but is there an elegant workaround? I have tried copying and pasting into the Settings>Signature box but it ruins the formatting.
Many thanks!
Andrew
Create a .html file with your HTML in it. View the file in a browser. Then select the entire page (COMMAND+A or CTRL+A) and copy.
Paste into the Gmail signature textarea.
Basically the trick is to copy&paste the rendered html rather than the raw HTML.
Try following the steps on this video:
add gmail hmtl looking signature
Basic guide:
Open google docs
Create a new file
Add a table
Add logo and text
Format table with lines to 0 pts
Modify look and colour of text
Copy format and paste into gmail signature
Hope that helps someone
As others have mentioned you can indeed just copy the rendered HTML in to the signature box in your GMail settings. To do this just:
Put your HTML in to new text file and give it a name like signature.html
Open the file in your browser
Select all of the content displayed in the browser (edit > select all)
Copy of all the selected content (edit > copy)
Open up the GMail settings and then paste in to the signature box (edit > paste)
I had a problem doing this on a mac and using Chrome as my browser because there are two ways to paste. The normal paste removes the formatting so you have to use the paste option that does not 'match style'. See the image.
The gmail signature creator uses a WYSIWYG creator. There doesn't seem to be a way to use HTML markup, but since you can choose fonts, insert images, change text-alignment, etc, you simply create the signature as you would in a word processor like Microsoft Word and Google converts it to HTML for you.
This can get you an approximation but it does not keep any advanced styles.
Div tags do not work, and you have to be using a supported font which greatly limits your options.

HTML Editor that can be used for tags' sanity check

I am trying to use a text editor (without using an IDE e.g. eclise/IntelliJ) where I can analyse an HTML file e.g. which tags are unevenly used and also format HTML documents in a way that it picks up each tag and organises so that the document is more human-friendly.
I currently have notepad++ and Sumblime Text 2 on my machine. If there is any specific plugin that helps to do the job, could someone please advise?
** REASONING **
I have a messaging service that uses email templates and one of these has a bug somewhere. It's generating a misaligned (i.e. odd) tag which can be visible if I was to put it in some audit trail (gets picked up in a tabular view). I would like to use a text editor to check the buggy tag.
KR,
In notepad++ you can do that if your open and closing tags are below eachother for example
<div>
something here
</div>
but if you have it inline like this
<div>something here</div>
you cannot do much with it.
Is this what you are asking?
Also if you want the vertical tab lines to be visible click on the "show indent guide" in the top toolbar
There are several online tools that can format the HTML for you. Do a quick Google search for "online html formatter" and try a couple out. Some will provide more options than others. Once formatted properly, it'll be human readable and probably be pretty easy to spot the stray tag.

Weird Issue Causing Header to be dropped down on only 1 page

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