How to change TODO highlight in atom editor - editor

In my opinion the higlighting of a TODO "flag" in the atom editor is too weak/unobtrusively.
How can I change this? I DON'T wanna list the todos in a sidebar (https://atom.io/packages/todo-show).
Here to compare:
In Vim editor there is very strong highlighting (desired):
In Atom editor:
The main problem is, that atom highlights many other code words in this color...

As GitHub's Atom Editor is built around HTML5 and CSS3 you can very easily change your style sheet, I've done a little recording on how to make this specific change below although you can apply the same principals to any styled element within the editor:
Step by Step
The first thing you will need to do is find an instance of the element you want to style, in this case I created a new, empty, file with the text //TODO: is too subtle.
You now need to find the appropriate selector for the word TODO, simply place your cursor in between the letters of the word TODO and press CtrlAltShiftP or select Editor: Log Cursor Scope from the command palette.
The selectors that apply to that location are listed from the least specific at the top to the most specific at the bottom, in this case you want the most specific selector at the bottom, go ahead and copy that into your clipboard.
Next you need to open your personal stylesheet, you can do this by selecting "Edit" and then "Stylesheet...", you can also choose Application: Open Your Stylesheet from the command palette.
Scroll to the bottom of the Stylesheet and paste in your selector from Step 2, you will need to add a period (full-stop) at the beginning to make this a valid selector.
Go ahead and add your preferred styling such your VIM style preference:
atom-text-editor::shadow .type.class.todo {
background-color: yellow;
color: black;
font-style: normal;
}
Finally save your stylesheet and switch back to your test document to see the resulting changes.
Thanks to zypro for pointing out that my original answer didn't account for the use of the Shadow DOM in recent versions of Atom.
Update: At some point, Atom got rid of the Shadow DOM. I'm using version 1.34.0 which takes the following entry in the above-mentioned stylesheet:
atom-text-editor.editor .syntax--type.syntax--class.syntax--todo {
background-color: yellow;
color: black;
font-style: normal;
}
Also, for Python (and some other languages) you will need to uncheck "Use Tree Sitter Parsers" in the Core settings.

Related

Highstock How to remove the cross icon in Range selector text box in IE

On the highStock demo
If open in IE and click in the range selector text box to change dates. A little cross symbol appears. How to remove this behavior.
This is what I am talking about
You need a small CSS trick to solve this problem;
.highcharts-range-selector::-ms-clear {
display: none;
}
::-ms-clear reference from MSDN.

How to remove that awful "Columns..." thing

I'm using columntoggle mode because the output style is what I need/like. The system adds that row/button with "Columns..." (presumably so that you can pick which columns at run-time...which doesn't seem to work on my droid anyway. I just want to remove it.
Here is a demo: http://jsfiddle.net/ezanker/28tNw/
Basically you can just add the following CSS to hide the button:
.ui-table-columntoggle-btn {
display: none;
}

jquery mobile autocomplete loading icon

Is it possible to show a loading icon on extreme right side inside the filter input before the "X" clear text icon when we are making a remote call in jquery mobile 1.3 autocomplete.
UPDATE:
The simplest approach would be to substitute delete icon of jQM search widget before making remote call and then return it back after you finished processing. And that IMHO makes even more sense, from the user experience, than adding a second icon.
First define class for our ajax icon
.ui-icon-ajax {
background-image: url(http://code.jquery.com/mobile/1.3.0/images/ajax-loader.gif);
background-size: 18px 18px;
}
Second before we make ajax call replace icons
$("form.ui-listview-filter a span.ui-btn-inner span.ui-icon")
.removeClass("ui-icon-delete")
.addClass("ui-icon-ajax");
Third return delete icon back
$("form.ui-listview-filter a span.ui-btn-inner span.ui-icon")
.removeClass("ui-icon-ajax")
.addClass("ui-icon-delete");
Here is working jsFiddle example

Jquery-ui transfer effect misses target

I have a jsfiddle to show what I'm trying to do: http://jsfiddle.net/n9bSC/3/
The jsfiddle works well and does not demonstrate the bug.
In my actual code, the transfer finishes directly below the target (instead of directly at the target).
I've tried removing the float, adding various "position" styles, etc.
Any thoughts on what could be causing the behavior that I've described?
I don't fully understand this, but I think the problem is fixed.
Our CSS had:
body{
position: relative;
}
So I now change that to "inherit" on the page where I'm doing the jquery-ui transfer effect.
Then, I use conditional CSS for only IE7 to do this:
.joyride-tip-guide {
margin-top: -10px;
}
(I'm using Joyride and noticed that changing the body position messed up the Joyride tour step positioning for Internet Explorer 7.)

sIFR Only the first font-style of glyph in my swf will display, cannot seem to call up the others

I've uploaded my .swf with bold, normal and italic glyphs of the font embedded. I then go to my sifr-config.js file to style the text using CSS. All properties except the font-style:italic; and font-weight:bold; are effective.
In fact, when I try to use these properties the flash text doesn't show up at all.
But if I go back into my flash file and change the first glyph from "normal" to "bold" or "italic" then re-export, it'll display the Flash text as whatever style I've just changed that first glyph to.
Here's my CSS all the properties except font-weigh and font-style work:
sIFR.replace(ronnia, {
selector: 'h1, logo-text',
wmode: 'transparent',
css: '.sIFR-root { font-size:200px; background-color:none; color: #000000; text-transform: uppercase; font-style:Italic; display:block;}'
});
I'm really new to the sIFR thing, any ideas what I could be doing wrong?
The code says Italic with a capital I. Flash can be picky with its CSS support, so that might be a problem. Other than that, it'd help if you could add a link to a demo page.
SOLUTION (eeehhh - work-around):
It's an export from flash-problem - I read some other posts about flash not exporting style 3 and 4 of the fla file.( Font wont export out )
This made me try this: I applied 'bold' as style to the first word in the sifr3-r436- fla file (the word 'Make') and exported it. In the demo index.html file i called this swf file but I DID NOT change the css code part to bold (font-weight: normal) - for the first time I was able to display the 'bold' style of the font using sIFR.
I think I'll stick to a work flow making seperate swfs for each font-weight.
Mark, I guess a lot of people struggle with this - are you going to tell people about this problem on the sIFR documentation site?
PROBLEM:
I also struggle with that problem. Only 'normal' works with some of the fonts. One of the fonts I'm trying to use don't have 'BoldItalic' so I set this to 'bold' - could that be the reason for 'bold' to fail?
Have anybody solved this problem yet? If not I'll try to set up a demo page for Mark to explore.
Like Jay I wonder if this is a font problem - are problem with some fonts a known issue?
Actually 'bold' 'italic' 'bold&italic' is a problem with almost all the fonts I try out. Only success with verdana and georgia...
What critical info have I missed? Do I do something wrong in the fla file?
I tried something to check whats doing what - I applied the bold font style to the 'normal' word in the fla file - but that does not have any effect. I guess it's just a question of embedding the font style in te swf-file.

Resources