Does Atom support CSS snippets - atom-editor

I was able to add JavaScript snippets in the Atom editor, but I couldn't add CSS snippets. Is there a way to add CSS snippets in Atom?
#js this works fine
".source.js":
"getElementById":
"prefix": "geid"
"body": "documnet.getElementById($1)"
#css this does not work
".source.css":
"blue background":
"prefix": "bgblue"
"body": " background-color: blue "

I just tried it exactly as you posted, and it worked for me.
Make sure your Atom is fully updated, and make sure the document you're trying to use the snippet in is using the appropriate language/grammar.

Related

How to add emmet for css in Vs Code

enter image description here
i can't use emmet in css in Vs Code for some reason is it supported?
How to enable emmmet in css?
add this in JSON settings:
"emmet.includeLanguages": {
"CSS": "css",
}

Problem with tailwind css intellisense in a react typescript app?

I have installed tailwind css and followed the documentation, but the intellisense works in a weird way: if I use tab to autocomplete className, then if my cursor is inside the brackets, the intellisense doesn't work, but once I click off and on again then the intellisense starts working.
I also updated settings.json and added
{
"tailwindCSS.includeLanguages": {
"typescript": "typescript",
"javascript": "javascript",
"html": "HTML"
}
"editor.inlineSuggest.enabled": true,
"emmet.triggerExpansionOnTab": true,
"tailwindCSS.emmetCompletions": true,
"editor.quickSuggestions": {
"strings": true
}
But nothing seems to help, to use intellisense I first need my caret to go outside of the quotes, and then go back inside.
Video
Here you have where I found solution,
https://github.com/tailwindlabs/tailwindcss-intellisense/issues/392
but if you're too busy to dig in here solution is
ctrl + space in quotation marks
, it works for me.
I found this question looking for solution and I've found it so here you have.
Have fun c:.

How to inject a <style> into the head section of a page with a Chrome extension, using a content script

I'm trying to make a very simple extension, that inserts this;
<style>
span.watch-view-count:hover {opacity: 1;}
span.watch-view-count {opacity: 0;}
</style>
right before the body on any YouTube page I visit.
I tried using content script to inject the code above, first I tried putting the code in a CSS file called mycsscode.css and adding it to my manifest.json file like this:
"js": ["script.js"]
but I'm pretty sure nothing happened, since I viewed the source and couldn't find the code anywhere.
Then I tried following the first method in answer to this question but I changed the script.js to script.css hoping it would work, but nope it didn't so I'm stuck.
This are the codes I have so far;
manifest.json file:
{
"name": "Youtube views Hider",
"version": "1.0",
"manifest_version": 2,
"description": "A plain text description",
"permissions": [
"*://youtube.com/*/",
"tabs"],
"content_scripts": [{
"matches": ["*://youtube.com/*/"],
"js": ["myscript.js"]}
]
}
myscript.js:
var s = document.createElement('script');
s.src = chrome.extension.getURL("script.css");
s.onload = function() {
this.parentNode.removeChild(this);
};
(document.head||document.documentElement).appendChild(s);
Note: I'm almost an illiterate when it comes to coding lingo, so please put it in layman's terms.
If you are just inserting/changing CSS, don't even bother with that javascript. Change the manifest to:
{
"name": "Youtube views Hider",
"version": "1.0",
"manifest_version": 2,
"description": "A plain text description",
"content_scripts": [ {
"matches": ["*://*.youtube.com/*"],
"css": ["myCSS.css"]
} ]
}
Where myCSS.css is just:
span.watch-view-count {opacity: 0 !important;}
span.watch-view-count:hover {opacity: 1 !important;}
Note:
Changed the matches value to work on actual YouTube URL's -- Which usually have the form: http://www.youtube.com/watch?...
Note the use of the !important keyword.
If you insist on programmatic injection, see "How to inject CSS using content script file in Chrome extension?".
PS: If all you really want to do is alter a page's look or CSS, the Stylish extension is the fastest easiest way to do that in either Chrome or Firefox.
There are also thousands of pre-made styles available at userstyles.org.
I just read that you say you are a coding layman. Creating an extension is the hard way.
An easier way is to add the Chrome extension called Tampermonkey to achieve page modification.
Here is a nice tutorial to get you started with creating a script for Tampermonkey ( Greasemonkey in Firefox ).
This way to you don't need to worry about the mechanics of running a script on a page.

Textmate : CSS bundle autocompletion

I used HTML auto-completion shortcut for the first time yesterday. I worked well. I tried to use the CSS autocompletion shortcut this morning and it did not work.
For example with :
#home {
display: ;
}
after typing "display:", and pressing alt+esc, I just get "--"
I am sure I am working in a CSS file. I took a look at the CSS bundle, but can't decipher the code.
Any idea ? Thanks.

CSS editor which expands one-line declarations on editing

Is there a CSS editor which automatically expands one-line declarations as multi-line declarations on focus ? To clarify my thought, see example below:
Original CSS:
div#main { color: orange; margin: 1em 0; border: 1px solid black; }
But when focusing on it, editor automatically expands it to:
div#main {
color: orange;
margin: 1em 0;
border: 1px solid black;
}
And when it looses focus, editor again it automatically compresses it to one-line declaration.
Thanks.
If you are using Visual Studio you should be able to do a close approximation of this:
You can change how CSS is formatted
via the Tools -> Options menu.
Check 'Show all settings' if it is unchecked.
Go to Text Editor -> CSS -> Format and pick the semi-expanded option
Ok you changes.
Then ctrl+A, ctrl+K, ctrl+D should re-format your document
When you are finished editing just go back to the options and pick the compact CSS format then ctrl+A,ctrl+K,ctrl+D to re-format again.
Hope this helps.
I've not heard of one. If you're on a Mac I can definitely recommend CSSEdit. It does auto-formatting very nicely, amoungst other things.
EDIT: I originally said "though as the comment says it's a great idea" but, thinking about it, is that what you really want? I can see that it would be good to have expansion/contraction onClick (in which case TextMate - again Mac - though CSS suport isn't as good as CSSEdit), but onFocus?
Sorry. I don't know of any IDEs that explicitly do that.
But, there are quite a few external options:
CSSTidy (download)
Clean CSS (in-browser)
CSS Optimiser (in-browser)
others... (Google Search)
da5id, I actually don't care about implementation details (onclick or onhover, though onclick seems better when you say it ;), I'm just curious if there are any editors which supports this kind of feature in any way.
PS. I'm not on Mac but Windows.
Its not exactly what you want but try the windows port of textmate E Text Editor, for on click folding of css rules, auto formating and most other textmate functionality.
You can do that with the scripting language of your favorite editor.
For example in SciTE:
function ExpandContractCSS()
local ext = string.lower(props["FileExt"])
if ext ~= "css" then return end
local line = GetCurrentLine()
local newForm
if string.find(line, "}") then
-- On one line
newForm = string.gsub(line, "; *", ";\r\n ")
newForm = string.gsub(newForm, "{ *", "{\r\n ")
newForm = string.gsub(newForm, " *}", "}")
else
-- To contract
-- Well, just use Ctrl+Z!
-- Maybe not, code to come if interest
end
if newForm ~= nil then
ReplaceCurrentLine(newForm)
end
end
GetCurrentLine and ReplaceCurrentLine are just convenience functions from my collection, I can give them (and do the contraction part) if you are interested.
It's a good question. I'd love to see this in a CSS editor. TopStyle does this, but it isn't automatic; you have you use a hotkey.

Resources