Atom showing gray coloured code (non-executable) - html

I usually use JetBrains PhpStorm and recently converted from that to Atom. I haven't any much experience in that whereas recently I had opened the project of PhpStorm work and that opened and worked fine but when I made a project in the Atom it appears like this.
Please let me know if anyone have any idea related to it, I am in the middle of a project need to submit that.

I got the answer, the problem was when I created the HTML file it didn't show any colour but when I executed it, it worked

Related

VS Code cursor in wrong position after tab

When I write some code, and then click Tab to autofill from context menu the cursor is now in the wrong position. It should be before ";" but for some reason it is after ";". Worked fine for about a year, and now suddenly something like this, any ideas?
This problem is related to snippets in vscode.
The easiest way to solve this is to use the snippet extension.
Install "HTML CSS Support" extension made by "ecmel" to visual studio code. Close the program and open it again and you are ready. Problem fixed.
Extension URL: https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css
Long way:
You can write your own or update snippets, to solve this.
Documentation to make your own snippets: https://code.visualstudio.com/docs/editor/userdefinedsnippets
I had same issue. I tried all of the solution proposals and searched snippets for it but can't found anything.
I was already using the html css support extension by ecmel. I deleted and reinstalled it, Closed the vscode program and open it again but I couldn't get any results. Finally downgraded vscode to 1.64 version from here and now cursor works like a charm. I wanted to write this answer for friends like me who did not get any results.

Codesandbox preview isn't working without an indication of any problem. What am I doing wrong?

Right now I'm trying to copy random pages from the internet to improve my skills. Right know I'm in process of copying https://www.techonthenet.com/postgresql/is_not_null.phphttps://www.techonthenet.com/postgresql/is_not_null.php this page.
Everything looks great in VS code and when I'm opening my html file with chrome, but when I'm uploading it to the Codesandbox, it simply doesn't show anything in the preview window! There are no indications of any problems, so I'm completely frustrated. UPD: now it does, but I cant figure out what's the case.
I apologize in advance if I posted question in the wrong topic, I will definitely learn to do it right.
I've tried to delete the default .js and .css files. Also I've tried to repeat all steps from the incognito mode - nothing helps.
Here is the Codesandbox link
https://codesandbox.io/s/hungry-meitner-57mlq?fontsize=14
The files are in the "site" folder.
The problem is that there's nothing inside your public folder.
Additionally your index.html is empty.

Visual Studio Code Not Auto-Close Tags in HTML

So version before 1.30 worked fine, and did close the Tags in .html file, but as of 1.30 update I can't finish and then try to close it with
I have tried to delete config.json file, also tried to turno on every possible option for auto-close and auto-complete tags in options, but nothing worked.
And Sublime it's working fine. I downloaded plugin to transfer Sublime confing into Visual Studio Code but without success. Hope you can help me out, since i've been trying to fix this problem 3 hours now.
I had the same problem, then I noticed that my select language mode was something like Django HTML. Solved after changing it.
You might have opened a file before that changed the language mode. So first, check the language shown at the bottom-right of the VS Code window (status bar), then follow the steps bellow.
Go to settings (or edit the settins.json file) and search emmet.includeLanguages, then press add item under Emmet: Include Languages. input the language you are using in item field and html in value field.

PhpStorm: Save as Live Template does nothing

Trying to create a Live Template in PhpStorm by highlighting a block of text, going to Tools > Save as Live Template.
When I do this, nothing happens. The Live Template dialog does not open and there is no other indication of an error. I can manually open the Live Template menu and add one there.
Is there a setting or configuration that is needed for this to be enabled?
PhpStorm 2017.1.4 on Windows 10
You can turn a highlighted block into a live template, but you need to make sure that there is no leading whitespace in your selected text, or it won't do anything, as explained in the original question.
This is likely a bug, see the issue in the comments to track resolution.

Is it possible to save changes in Firebug locally?

What I'm trying to do is to save the changes I make to CSS and HTML on different sites with Firebug.
Just to be clear, I don't expect Firebug to upload the changes to the server via FTP or anything. I just want to save the changes locally, so only I will be able to see them.
For example I've seen a few Firefox/Chrome extensions that add a download button under every video on Youtube, so I know it's possible to do that somehow.
If you have a different way to achieve what I'm trying to do, I'll be glad to hear about it.
(It doesn't have to be with Firebug.)
Thanks in advance!
If you don't mind using Web Developer Toolbar it's easy to save changes made to the DOM (and CSS).
When you install the toolbar, you'll get a "View Source" menu, click on that and choose "View generated source". Then just copy and paste that into a .html file.
You did not say if you alter your HTML or CSS, if CSS, FireFile is a very good addon for this.
Edit, with some Googling, i found FireDiff, which states that it can export changes made in Firebug, i have not tested it bit it's worth checking out.
You could try using Greasemonkey.
It has support for adding custom scripts that are run whenever you load a page (linked to which pages it should load on) and that can make changes to the page dynamically.
https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/
The http://chrispederick.com/work/web-developer/ web developer toolbar will let you add a user style sheet to a site which should achieve your goals.
This may or may not be exactly what you're asking for, but you can download the extension FireDiff in order to save changes made with FireBug. I made a little tutorial on how to do it here: https://www.youtube.com/watch?v=m4OmZLX2zd4
I have a somewhat simlar use-case that I solved differently. I'm not sure if it is what you are looking for or not. I'll describe the behavior and if that is helpful I'll explain exactly how I implemented it.
I changed the code that execute when you click "Run" (or Ctrl+Enter) to check to see if the first line of the code is a hard-coded string //LoadFromFile:<file path>. If it is, and the file exists then I pull the file off of the local file system and run it instead of executing the code in the console window. This way I can use an external text editor to write code.