Hi im using atom and atom-minify
I would like to remove all references to https://websiteaddress.com but only in the minified file.
I only know html and css, but I came across inline-parameters where i can add some code to the top of the page and atom-minify will run it.
I found this:
::scan(regex, iterator) which makes sense but how do I input this
Here is my best guess for what to put at the top of each page in atom, any help would be much appreciated:
/* minifyOnSave, scan(https://websiteaddress.com, replace) */
You could use Atom's built in search and replace feature
The default keybind for this is ctrl-f or command-f if you are on mac.
Related
Generally new to web design and watching some tutorials on creating some backend for a project, getting really tired of writing out the manually, I see youtubers do .classname and then the class with the div appears, but for some reason it isn't working for me? Any help would be appreciated.
Also, would it be easier to switch to Sublime, my buddies think that it is the way to go.
Cheers.
Go to settings
Go to emmet under the Extensions section.
Click on 'Edit in settings.json'.
Write the following inside the 'emmet.includeLanguages' tag. Otherwise, paste the whole statement.
"emmet.includeLanguages": { "javascript":"javascriptreact" }
Save the settings.json file.
Those videos are likely using emmet. VS Code includes built-in support for emmet completions in html files. For example, typing .classname in an html file will trigger an emmet suggestion that expands to <div class="classname"></div> when you accept it
If you do not see this working:
Make sure the document is in the html language mode
Try manually triggering suggestions after .classname using ctrl+space
Make sure you have not disabled Emmet
I tried everything written in the answers but it wouldnt work, I had to do the following;
go to settings in the bottom left, search for 'emmet'
scroll down to and tick:
'Trigger expansions on Tab'
then it works by typing .divClassName + Tab
Check out this Cheat Sheet for VSC:
Cheat sheet for VSC
Ensure that VScode recognises your file as HTML5 or CSS file. In my case I had emmet enabled, but while I could get emmet abbreviation in a CSS file, they wouldn't work in an HTML file. The issue was that I also had Django template extension installed and the file had Django template code as well, hence VScode considered the file as Django template file, not HTML. You can check this the status bar at the bottom of VScode. Once I changed the file from Django template to HTML by clicking on Django Template in the VScode status bar, emmet started working.
The above answers didn't help me because VS code already came with Emmet installed, but I was missing the information on how to actually trigger it.
For an html element
Type the element e.g. div, h1, whatever, then press tab to complete it
For a class
Type the class name beginning with a dot then press tab to complete it.
For example type .myclass and hit tab and you'll get <div class="myclass"></div>
Note: if your class has spaces, use a dot in place of the space (e.g. for "my great class", you should type ".my.great.class" and hit tab)
Source
This information is from here
Tried mentioned thing from emmet vs code document
go-to .vscode >> settings.json
add line "emmet.triggerExpansionOnTab": true
it worked for me for reference : Emmet in visual studio code
I started using the Atom Code editor recently. During my last project, I installed a couple of tools to make my coding more interactive.
One of the features added color to my code which makes it easier to read.
However, I started a new project today and the code is all white on a dark background. How do I color my code?
I have attached two screenshots of the colored code and the non colored code just to illustrate what I mean but its pretty straightforward.
Atom might not be recognizing the syntax of your code immediately. Check the bottom right corner of the screen to make sure atom has the correct language/file extension selected. You can manually select this if atom doesn't do it automatically. You might also need to install some new packages if atom isn't recognizing your code.
Use ctrl+shift+l to open the language selector, and select the auto-detect option.
I had the same problem. Try switching to HTML(Go) in the bottom right corner. It's between UTF-8 and Github.
Why isn't anybody mentioning the file extension?
Your "Project Greg.html" is HTML.
But "Random Quote Machine" has NO extension.
This is why the syntax isn't showing.
The current version of Atom I'm running as of Oct 2018 seems to identify code by tags. So even if I select HTML manually, unless the file has <html> tag, it still doesn't mark it as HTML. I just add redundant commented out <!-- <html> --> tag in the beginning of the file and it does the trick.
You may need to install a new package for Atom. You can find different language packages for Atom here: https://atom.io/packages
For example, for React.js, install the react package.
In your terminal, type this command: apm install react
More info for react packages:
https://atom.io/packages/react
https://orktes.github.io/atom-react/
Check the bottom right corner of the screen to make sure atom has the correct language/file extension selected
If your file has extension HTML or ejs (.html, .ejs) language-ejs package can 't recognize those file.In the bottom right corner of the screen, change the HTML to ejs or javascript, then the atom can recognize that the code your write is parts of ejs. NOte, you need to install language -ejs package first.
Follow the steps:-
File->Settings
Select 'Core' from left pane.
Change color profile to "Use sRGB color profile".
Restart 'Atom'.
Make sure the beginning identifies the file as a html document. I had this problem and just added <!DOCTYPE html> as the very first line and it worked.
Maybe this will helps for someone, but if you tab once this line: <!DOCTYPE html> and it will show coloured HTML code
If the langage set is already the right one,and the code stays grey unless you directly edit it, just try setting another langage then switch back. It worked for me after Atom refused to color an entire copy-pasted HTML page.
I am a very newbie but wanna share what worked for me. Please don't judge me strictly.
Since I work only in Python, it is very convenient to change the grammar to Python every time. How to make it automatic:
File->Settings (or use Ctrl+Comma)
Click Open config folder
Click on styles.less
After all the code, write exactly this source.python {
}
Save
Restart Atom.
You're all set.
Hope this was helpful, couldn't find this solution elsewhere.
The !DOCTYPE html did not change the color for me but in the bottom right is :
CRLF UTF-8 HTML GitHub Git(0) menu options. I selected HTML and in the popup window selected AUTO. The color returned instantly.
Im using atom.io for some time now and really like it. there is just one thing im missing. I used to use brackets and sublime before and they both had a feature where you could create the basic structure of a html documents by just typing html.
this would just set the html, head and body tag. created the charset meta, title and link to css file.
I create a lot of html files a day so it would be really helpfull if I know the shortcode or the package which supports this!
You're looking for autocomplete-snippets.
Simply type html and press Enter
Here's a terrible GIF to prove it:
There is a nice Plugin, called emmet: https://atom.io/packages/emmet
When you got that, you just have to type ! -> tab in an empty document. You get pretty much the same result as #hatchet GIF.
If you have disabled the autocomplete functionality mentioned in the currently accepted answer, or want more flexibility than that allows, there is a file-templates package:
https://atom.io/packages/file-templates
Here are some basic instructions.
To install the package: edit->preferences->install->file-templates.
To save the template: packages->new template from this file.
To open a new file with that template, just hit ctrl-alt-n and
select it.
Make sure your file has .html added on the end of its name.
Then go back into Atom, type HTML, and press enter. Your boilerplate should appear. Solved my problem instantly!
If we install Emmet package we are not getting the boiler plate code. So I disabled emmet and it is working fine for me.
!tab is the command u seek. But it won't work unless you create a file and save it with the html extension...
So go create a new file in the directory u want, call it index.html and now go type !tab
It should work 100%, if not be sure u have emmet installed.
Im using zk version 7.0.2 and I need to disable all styles/themes from zk, then I need to put my own style css. There is a way to do this?
I tried to put some css files but it doesnt change. In some docs I've found shows me about creating my own theme using LESS but it doesnt work.
Thanks
Yon can specify the disable-theme-uri element in zk.xml, for more details, please take a look at this document.
Whenever I inspect an element on my wordpress website it shows the element as being on line 1 of http://localhost/wordpress/wp-content/themes/ignite/style.min.css?ver=1.19 instead of the correct line in "style.css".
Can someone please let me know how to make my website use style.css rather than style.min.css?ver1.9?
Thanks.
The script has been minified. Technically it's all on line 1. See if you cannot locate a version of the css that is not minified.
You can also use a minifier tool in reverse, take the unminfied cod and replace the css file with the inflated version. Run it again and then you'll be able to find the problem based on the line.
Minifier tool here:
http://cssminifier.com/