Eclipse Luna dark theme doesn't show JS properly - javascript

I downloaded the Eclipse Luna version of PDT today and switched to the dark theme. All my PHP files are now displayed with very clear syntax highlighting in the dark theme.
However, when I load my javascript files, it's impossible to see the text in the file as it's dark black on lighter black (see image). This happens only for the JS files as all of the CSS and HTML files in the project inherit the dark theme very nicely.
I've restarted Eclipse applying the theme and the issue still remains. Any idea how I can get my JS file to work with this new version?

I suggest install eclipse color themes plugin: http://eclipsecolorthemes.org/
This plugin provide dark editor support for most popular eclipse plugins (css, js, xml)

Take a look at:
https://github.com/guari/eclipse-ui-theme#syntax-highlighting-scheme-optional
and import the epf file.
This should solve your issue and similar ones, until a stylesheet for dark theme settings for syntax will be added to all Eclipse plugins packages.

You probably have the VJET Javascript IDE installed as an Eclipse Plugin. The color scheme you have looks exactly the same as what I was getting. I solved it by uninstalling this plugin. Go to Help -> Install New Software -> click "already installed" hyperlink, and see if you have it installed. Click Uninstall.
Here are some things to check to determine is this is the problem.
Go to Eclipse Preferences -> General -> Editors -> File Associations and check the default editor for Eclipse. If JVET is installed, VJET will be the default editor. If you try to switch the javascript editor to be default, it won't let you do that option. The javascript editor should be taking in the appropriate color schemes by whatever theme you have installed. I assume VJET has a fixed color schemes.
Go to Preferences -> Javascript -> Editor -> Syntax Coloring. Check if the syntax in the preview box actually matches what is displayed on your javascript file.

Related

Visual Studio Code - Missing most syntax highlighting for JavaScript

When editing JavaScript files in Visual Studio Code on my Mac I'm only seeing very basic syntax highlighting. The same also applies for TypeScript files.
I'm certain there used to be more syntax highlighting when editing JavaScript and TypeScript files.
I already tried to disable all extensions but it didn't help.
Visual Studio Code version: 1.25.1
How can I re-enable proper syntax highlighting in Visual Studio Code?
Uninstall Visual Studio Code using the description here: How to completely uninstall vscode on mac
After a reinstall of Visual Studio Code syntax highlighting works fine again.
Please try to switch color theme back and forth (Ctrl/CMD+Shift+P and type theme and then select random one. Repet procedure to revert to one you choose).
For me it solves issues with syntax highlighting in version 1.38.1
I had some problems with my js/ts codes syntax highlighting.
(In the basic theme, 'functions' don't turn yellow, 'booleans' don't turn dark blue, 'types' don't turn green. However, when I hovered them, they showed the right colors)
I looked for the answer everywhere but not solved. Today I accidentally uninstalled the extension "Syntax Highlighter", and it just solved.
enter image description here
I believe this is not the problem of the extension, but it may somehow cover the config of original js/ts.
Hope this can help someone who has the same problem.

Setting up proper React Code highlighting in Visual Studio Code?

I have been trying to find a proper way to highlight React Code in '.js' files so that it is easier to read in Visual Studio Code. The photo below shows a sample file of how a lot of it is in one color, making it hard to read.
I tried using "jsx" extension by TwentyChung and "react-beautify", but neither of them worked. Can someone please assist? :-)
Change the VS CODE color theme to Dark+ and change the language in bottom status bar to java script react. This worked for me
JSX highlighting works out of the box in VS code and JSX files are already associated with JavaScript React language mode. If you want to enable JSX syntax coloring in .js files click on the language name in the status bar and select JavaScript React language mode. You can also associate .js files with JavaScript React if you don't want to do this every time. Make sure you have the latest version of VS Code.
Disabling this extension fixed it for me. It specifically happened this day November 17,2022 3 of my workmates were having the same problem.
Just uninstall this plugin and install it again in the vs code extensions:
Name: JavaScript and TypeScript Nightly
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-next
I just added this to settings.json and it worked for me, so you can give it a try.
"files.associations": {
"*.js": "typescriptreact"
}
For Me Here is what worked
Update the vscode by downloading the latest verrsion
https://code.visualstudio.com/download
2.Open Vscode click extension and search this extension
Javascript Atom Gramar
Just disable the extension.
3.Close and open vscode, now u should see colors in your jsx code.
Hope this will help some one in future
disable the extension named Javascript Atom Grammar works for me
Select Language mode as "Javascript React".
Go to Settings -> Color theme -> Select "Dark+" theme.
Click: Ctrl + K + T
Change the color theme settings to dark+(default) , it worked for me.
And select the appropriate language from bottom status bar:
VS Code highlights code via extensions, not with ESLint or Prettier, which are sometimes assumed to do the job. Out of the box, VS Code supports React and JSX natively. You can also adjust VS Code's settings.json file. Here's an example off how that might look:
{
"window.zoomLevel": 0,
// Solarized-dark theme
"workbench.colorTheme": "Solarized-dark",
// Changes the highlight color in solarized-dark, which I can't see
"workbench.colorCustomizations": {
"editor.selectionBackground": "#5b455e",
"editorBracketMatch.border": "#555",
"editorBracketMatch.background": "#5b455e"
},
// Number of spaces in a tab
"editor.tabSize": 2,
// Insert spaces when pressing Tab. This setting is overriden
// based on the file contents when `editor.detectIndentation` is true.
"editor.insertSpaces": true,
// Override whatever the files say and give me 2 spaces per tab
"editor.detectIndentation": false,
"workbench.startupEditor": "newUntitledFile",
"explorer.confirmDelete": false,
"explorer.confirmDragAndDrop": false,
"javascript.updateImportsOnFileMove.enabled": "always"
}
VS Code modifies syntax highlighting automatically, but it's not perfect. You can also adjust the detection by clicking on the auto-detected language on the right side of the bottom toolbar:

React.js files syntax in sublime text 3

i am using sublime text 3 as my code editor,i have written a basic hello world example in React.but the coloring is improper on the code ,i have tried installing Babel plugin but even after that also the coloring doesn't seem to work ,as you can see the image below
Just installing it isn't enough, you have to also tell SublimeText to use it.
Either do
a) Ctrl-Shift-P, type "Babel" and select Set Syntax: Javascript(Babel)
or
b) Go to the menu and do View->Syntax->Open all with current extension as...->Babel->Javascript(Babel).
You could follow the below mentioned steps:-
Setting babel as the default syntax
To set it as the default syntax for a particular extension:
Open a file with that extension,
Select View from the menu,
Then Syntax -> Open all with current extension as... -> Babel -> JavaScript (Babel).
Repeat this for each extension (e.g.: .js and .jsx).
Setting a Color Scheme
Babel comes bundled with Next and Monokai from Benvie/JavaScriptNext.tmLanguage. Select one from Preferences -> Color Scheme -> Babel
Courtesy: https://github.com/babel/babel-sublime
This might possibly help you out...follow below steps
press Ctrl + Shift + P
Doing so, Command Palette pops up and there type : Package control . And then
select the option Package Control: install package
Now typein and select 'Babel'
Now open 'View' menu and Navigate to Syntax, Open all with current extension
as…, Babel, Javascript (Babel).

Importing Bootstrap Theme damage CSS and JS of Odoo 9. How should I fix it?

I have been working for days importing a Bootstrap theme to Odoo 9. I have done it successfully, but some how my theme's JS and CSS files conflict with Odoo administrator theme layout --messing everything up. What do you recommend me to do?
Example: Here is, how it shows.
I have resolved my problem!!! If you experience conflict with CSS classes and JS functions in Odoo or any other platform after you import your own Bootstrap theme do as follow:
Identify those classes and functions that are in conflict in the platform.
Open your CSS and JS Bootstrap files. (I recommend programs like Sublime Text and Brackets)
Find and replace for a similar name in the entire document --for example dropdown to Qdropdown to CSS classes and JS functions.
Be careful with the Community version of Odoo. That platform is strategically designed so we fall in they hands for support, bugs, and many other things. They on purpose limited the platform to cash out from it --forcing us for the pay version. Be smart and figure out things by yourself.
All HTML website could be import in to Odoo 9. If you buy a theme from Odoo.S.A, those Odoo theme are not able to work on mobile devices.
Good luck!

TinyMCE stripping javascript from link on visual tab

TinyMCE is removing the javascript from the following link when I use the Visual tab.
Home
The onclick="trackOutboundLink('/home/', 'Home Page', 'link 1'); return false;" code disappears when I go to the Visual tab of TinyMCE. I'm using TinyMCE in the context of Wordpress.
Is possible to use the visual tab of the TinyMCE editor without erasing my javascript code?
TinyMCE editor strips out elements that are not specified as valid. These valid elements are specified during setup of the editor.
I am not familiar with WordPress, but it sounds like you need to install this WordPress plugin to allow advanced configuration of the TinyMCE editor. This would allow you to specify onlick as a valid attribute for the a tag.
Also, take a look at this article I found on wordpress.org. This person seemed to be having a similar issue.
It turns out that I had the wrong editor plugin installed.
I had installed Advanced Editor Tools (previously TinyMCE Advanced) and Advanced TinyMCE Configuration. These are the correct ones.
I also had the Classic Editor plugin installed and this caused the extended_valid_elements settings to be ignored. No doubt any other third-party editor plugin will cause the same problem.
As soon as I deactivated Classic Editor, it worked! :)

Categories