So I'm new to VS Code... loved it from a preview in a Python tutorial.
I open it and start entering some CSS code I'm working on, yet the editor does not:
Make suggestions or corrections;
Highlight key words;
Seem to care or know that I'm editing a specific language (i.e.: CSS).
How do I tell it that's the language I want it to use?
When creating new files you can press CTRL + k then m or just click the language mode link in the bottom right of VS Code to specify CSS. That should trigger the autocomplete/suggest/syntax highlighting features. By default VS Code will look at the file extension when opening existing files to determine which language to select.
See https://code.visualstudio.com/Docs/languages/overview for more info.
Related
Using Eclipse 2020-09 (i.e. v. 4.17) IDE for Java (on Linux, openSUSE Tumbleweed), with version 3.0.38 of Mylyn WikiText plugin installed, I had the following difficulty: Although pretty much all editor/ui fonts were fine, the HTML preview of WikiText files (in particular README.md!) displayed in unreadably small fonts (my display has a very small pixel pitch). So I wanted to find a way to set the CSS of such preview pages. The Mylyn WikiText docs (at https://help.eclipse.org/2020-09/index.jsp?topic=%2Forg.eclipse.mylyn.wikitext.help.ui%2Fhelp%2FMylyn+WikiText+User+Guide.html, under the heading "Rendering Appearance") says that there should be a Preferences screen General > Editors > Text Editor > WikiText > Appearance that allows one to set this CSS. However, no such screen shows up in my installation.
The only method I was able to find for fixing this was to use an application (such as Engrampa) which is able to edit the contents of .jar files, and in my eclipse installation directory, use it on plugins/org.eclipse.mylyn.wikitext.ui_3.0.[SPECIFIC_VERSION_HERE].jar to edit the internal component org/eclipse/mylyn/internal/wikitext/ui/viewer/default.css -- I could change any css there, and upon restarting Eclipse, the changes would take effect.
However, clearly any changes I make this way will be blown away upon the next update of Eclipse or of Mylyn Wikitext. Does anyone know of a better way to set the size of the preview text? Was that Appearance pane mentioned in the docs removed? If so, what replaced it? If not, any ideas why I might not be seeing it?
How do I display all changes which I made using Chrome Developer tools?
Example:
open a website.
open Chrome Developer Tool.
change style attribute of a tag.
add new style to some css file.
change a JavaScript function.
How to see those changes? Something like:
page.html:56 Change style attribute of foo to bar.
page.css:21 Lines added: 21,22,23,24.
page.js:12 Line modified.
As of Chrome 65 there is a changes tab!!
Yes really, it is amazing :)
Open Dev Tools > Ctrl+Shift+P > Show Changes
https://developers.google.com/web/updates/2018/01/devtools#changes
So, local modifications work for any changes to the files that you make, but they don't help you if you add inline styles or change your DOM in any way.
I like to use a method where I capture the DOM before and after my changes.
copy(document.getElementsByTagName('html')[0].outerHTML)
That places the current state of the DOM into the copy buffer.
Paste this in the left hand column of a diff tool like vimdiff, http://www.mergely.com/ or Meld.
Then I finish my modifications and run the copy command again. I paste that into the right hand column of the diff tool, then I can see my changes.
Full article here: https://medium.com/#theroccob/get-code-out-of-chrome-devtools-and-into-your-editor-defaf5651b4a
You may want to try the Local Modifications feature:
The DevTools also maintains a revision history of all changes made to
local files. If you've edited a script or stylesheet and saved changes
using the Tools, you can right-click on a filename in Sources (or
within the source area) and select "Local modifications" to view this
history.
Local modifications panel will appear displaying:
A diff of the changes
The time the change was made at
The domain under which a file was changed
I'm using WebStorm for Ember development. Specifically, I'm our Front-End guy, doing HTML/Handlebars and CSS functionality. I'm tired of WebStorm throwing CSS validation errors on stuff I don't care about, like IE compatibility problems. Further, I'd like to 'enable' some advanced inspections, like don't tell me var declarations are invalid (since we're using valid css var declarations).
It also doesn't recognize certain css rules, e.g. -webkit-margin-before. I don't want it to tell me those are errors, I know they aren't.
I am losing signal for all the noise, and I'm hoping to reduce or eliminate the noise. But I cannot figure out how to enhance/edit the inspections, since it's just a 'high level' checklist of stuff it should check for.
I'm assuming there's an XML file somewhere I can edit, or something similar?
All these errors can be easily suppressed from UI: hit Alt+Enter on the statement that is causing the warning, then hit right arrow and choose one of the suggested options:
'Disable inspection' disables this inspection for all files
'Suppress for statement' (available for some inspections) disables
rhis inspection for current statement only
'Suppress all inspections for ruleset' disables ALL inspections,
but for the current ruleset only
Note also that you can disable all inspections for the certain file using the Hector icon in the lower right corner: open your *.css in editor, click the Hector icon and then move the slider to change the Highlighting level to 'Syntax' (the position in the middle)
See http://www.jetbrains.com/webstorm/webhelp/changing-highlighting-level-for-the-current-file.html
I need a very easy to use plug-in which will help me have this effect in Wordpress. Please note that simple page editing is not working -- add text and set hyperlink (this is not working). We need PDF & PPT files for now, however if there is a solution with wider variety of file type it would be great.
Please see the below reference hyperlink for more visual explanation - TAB "Manuals" (I do not need the tabs, justthe list):-
http://support.lexmark.com/index?segment=SUPPORT&userlocale=EN_US&locale=en&productCode=LEXMARK_C524&page=product&frompage=null#5
You can try http://wordpress.org/extend/plugins/document-library/
I'm trying to use Aptana Studio 3 instead of phpEd. But I'd like to have the code coloring like in Dreamweaver. I made these changes in phpEd, but I can't find where to change it in Aptana.
Also, I installed the jquery bundle, but I can't to get it working...
Thanks for your help.
Preferences:Aptana:Themes. Figuring out what keyword corresponds to what display object can be a bit tricky, but it is all there.
There's actually a ticket already filed to add a theme that matches Dreamweaver: https://aptana.lighthouseapp.com/projects/35272/tickets/1508-create-dreamweaver-color-theme
I'm looking at it now, but I'm running into some internal bugs (namely https://aptana.lighthouseapp.com/projects/35272-studio/tickets/2357-scope-selectors-with-portion-prefix-match-arent-matching-properly) that I need to fix before I can finish. In any case it should be in Studio 3.0.2 and hopefully I'll fix it today and it'll be in tomorrow's nightly (here's how to get nightly builds: http://wiki.appcelerator.org/display/tis/Changing+the+Update+Type).
As for editing themes yourself, you can see the current scope at the cursor by doing Commands > Bundle Development > Show Scope. Then use scope selectors that match that sort of scope (we adopt Textmate's scoping/theming rules: http://manual.macromates.com/en/scope_selectors)
Could you finally get your theme?
If you want to create your own theme then first go to: Window->Preferences->Aptana Studio->Themes
To create a new theme just click on the "+" sign next to the themes
list.
To add elements to your new theme right click the text in your
editor and click Commands->Bundle Development->Show scope.
Copy the last section you see to the right of the hint window that
appears.
In the themes elements list click the "+" located at the bottom of
the dialog box (next to "Scope selector")
Give a friendly name to your new element.
Assign foreground/background colors to your new element.
Paste the element's scope in the "Scope selector" input box (make
sure your new element is selected, if not, click on it).
I created a theme for PHP, CSS, HTML, JS and XML editors, similar to the old aptana 2 colors. If you want to get it you can write me to jgarcias.cr at gmail dot com.
Cheers.