Practice►Atom
Practice

Atom Editor Background Image

Today spent some time to customize Atom user stylesheet to display the background image for editor.
Background image is a feature that I expected so much in either TextMate or Sublime.
Now finally I have it in Atom.

Finding the class for each html component is a little bit tricky
My theme is seti-ui.

Stylesheet to display background image

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
//.react is needed to avoid impact on mini-editor
.editor.react {
  // Fix the color strip between gutter and the editing area.
  background: #0e1112;
  .scroll-view {
    // Align the Background Image with Editing Area
    padding-left: 0;
    margin-left: 10px;
    // I put the background image under ~/.atom/images
    background: url('/Users/timnew/.atom/images/batou.jpg') no-repeat fixed;
    // Stretch the image
    // I tried to set it in with other background properties,
    // but it doesn't work. Looks like a bug in Chrome.
    background-size: cover;
  }
  .cursor-line {
    // Set cursor-line semi-transparent to make background visible.
    // Adjust the alpha value to fit your taste.
    background: rgba(90,90,90,.4) !important;
  }
  .overlayer {
    // Set overlayer semi-transparent to make background visible.
    // Adjust the alpha value to fit your taste.
    background-color: rgba(21, 23, 24, .7) !important;
  }
}

Screenshots

Without TreeView

Without Tree View

With TreeView

With Tree View
Package►Chrome Extension
Package

JSONView Chrome Extension Dark Theme

JSONView is a very popular JSON formatter for Chrome, which automatically prettifies the JSON content.

JSONView provide a very sweety feature that allow user to customize the css used to format the JSON. And I love dark theme and the Consolas font so much, so I customized my dark own dark theme for JSONView.

Here is my theme css, and you can copy it to your JSONView theme editor to apply.
Also you can find code on gist: https://gist.github.com/timnew/5167241

Theme Preview
Dark Theme for JSONView
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
body {
  white-space: pre;
  font-family: consolas;
  color: white;
  background: black;
}
.property {
  color: orange;
  font-weight: bold;
}
.type-null {
  color: gray;
}
.type-boolean {
  color: orangered;
}
.type-number {
  color: lightblue;
}
.type-string {
  color: lightgreen;
}
a {
  color: dodgerBlue;
}
.callback-function {
  color: gray;
}
.collapser:after {
  content: "-";
}
.collapsed > .collapser:after {
  content: "+";
}
.ellipsis:after {
  content: "...";
}
.collapsible {
  margin-left: 2em;
}
.hoverable {
  padding: 1px 2px 1px 2px;
  border-radius: 3px;
}
.hovered {
  background-color: rgba(255, 255, 255, .3);  
}
.collapser {
  padding-right: 6px;
  padding-left: 6px;
}