fix up customizing text

Author: schacon

book/02-using-atom/images/devtools.png

@@ -1,4 +1,3 @@
-:compat-mode:
 [[_atom_packages]]
 === Atom Packages
 

book/02-using-atom/images/menubar.png

@@ -1,4 +1,3 @@
-:compat-mode:
 [[_moving_in_atom]]
 === Moving in Atom
 
@@ -255,6 +254,7 @@ There is a text file in your `~/.atom` directory called `snippets.cson` that con
 
 There is also a directory called `~/.atom/snippets` that you can fill with multiple `json` or `cson` files in the snippets format if you want to organize your snippets in a more coherent way.
 
+[[_snippet_format]]
 ===== Snippet Format
 
 So let's look at how to write a snippet. The basic snippet format looks like this:

book/02-using-atom/images/python-grammar.png

@@ -1,4 +1,3 @@
-:compat-mode:
 [[_atom_folding]]
 === Folding
 

book/02-using-atom/images/python-settings.png

@@ -1,4 +1,3 @@
-:compat-mode:
 [[_atom_markdown]]
 === Writing in Atom
 
@@ -55,18 +54,3 @@ If you type `img` and hit `tab` you get Markdown formatted image embed code like
 ----
 
 There are only a handful of them (`b` for bold, `i` for italic, 'code' for a code block, etc), but it can easily save you time from having to look up the more obscure syntaxes. Again, you can easily see a list of all available snippets for the type of file you're currently in by hitting 'alt-shift-S'.
-
-==== Wrapping customization
-
-Many people prefer for their prose files to soft wrap lines but not their code. Atom allows you to customize settings for specific grammars, so we can easily override the wrapping settings specifically for our prose files.
-
-Open your config file via the command palette type ``open config'', and hit enter. Add a snippet of configuration text like this:
-
-[source,js]
-----
-'.source.gfm': # markdown overrides
-  'editor':
-    'softWrap': true
-----
-
-This will set the soft wrapping on by default for any Markdown files.

book/02-using-atom/sections/01-packages-themes.asc

@@ -1,15 +1,37 @@
 [[_basic_customization]]
 === Basic Customization
 
-* on load script
-* customizing
-* look/feel - css, styleguide
-* default file grammar
-* config settings
-* language specific settings
-- different wraps for different grammars
+Now that we are feeling comfortable with just about everything built into Atom, let's look at how to tweak it. Perhaps there is a keybinding that you use a lot but feels wrong or a color that isn't quite right for you. Atom is amazingly flexible, so let's go over some of the simpler flexes it can do.
+
+==== Style Tweaks
+
+If you want to apply quick-and-dirty personal styling changes without creating an entire theme that you intend to publish, you can add styles to the `styles.less` file in your `~/.atom` directory.
+
+You can open this file in an editor from the _Atom > Open Your Stylesheet_ menu.
+
+.Open your stylesheet
+image::images/menubar.png[open stylesheet]
+
+For example, to change the color of the cursor, you could add the following rule to your _~/.atom/styles.less_ file:
+
+[source,css]
+----
+atom-text-editor.is-focused .cursor {
+  border-color: pink;
+}
+----
+
+To see what classes are available to style the easiest thing to do is to inspect the DOM manually via the developer tools. We'll go over the developer tools in great detail in the next chapter, but for now let's take a simple look.
+
+You can open the Developer Tools by hitting `alt-cmd-I`, which will bring up the Chrome developer tools panel.
+
+.Developer Tools
+image::images/devtools.png[developer tools]
+
+You can now easily inspect all the elements in your current editor. If you want to update the style of something, you simply need to figure out what classes it has and write a LESS rule into your styles file to modify it.
+
+If you are unfamiliar with LESS, it is a basic CSS preprocessor, making some things in CSS a bit easier. You can learn more about it at http://www.lesscss.org[lesscss.org]. If you prefer to use CSS instead, this file can also be named _styles.css_ and contain CSS.
 
-https://github.com/atom/styleguide
 
 ==== Customizing Key Bindings
 
@@ -32,7 +54,7 @@ You can open this file in an editor from the _Atom > Open Your Keymap_ menu.
 
 You'll want to know all the commands available to you. Open the Settings panel (`cmd-,`) and select the _Keybindings_ tab. It will show you all the keybindings currently in use.
 
-==== Advanced Configuration
+==== Global Configuration Settings
 
 Atom loads configuration settings from the `config.cson` file in your _~/.atom_ directory, which contains CoffeeScript-style JSON: https://github.com/atom/season[CSON].
 
@@ -82,38 +104,65 @@ You can open this file in an editor from the _Atom > Open Your Config_ menu.
 ** `columns`: Array of hashes with a `pattern` and `column` key to match the
 the path of the current editor to a column position.
 
-==== Quick Personal Hacks
-
-===== init.coffee
+==== Language Specific Configuration Settings
 
-When Atom finishes loading, it will evaluate _init.coffee_ in your _~/.atom_ directory, giving you a chance to run arbitrary personal CoffeeScript code to make customizations. You have full access to Atom's API from code in this file. If customizations become extensive, consider creating a package, which we will cover in <<_creating_a_package>>.
+You can also set several configuration settings differently for different file types. For example, you may want Atom to soft wrap markdown files, have two-space tabs for ruby files, and four-space tabs for python files.
 
-You can open this file in an editor from the _Atom > Open Your Init Script_ menu.
+There are several settings now scoped to an editor's language. Here is the current list:
 
-For example, if you have the Audio Beep configuration setting enabled, you could add the following code to your _~/.atom/init.coffee_ file to have Atom greet you with an audio beep every time it loads:
-
-[source,coffee]
+[source]
 ----
-atom.beep()
+editor.tabLength
+editor.softWrap
+editor.softWrapAtPreferredLineLength
+editor.preferredLineLength
+editor.scrollPastEnd
+editor.showInvisibles
+editor.showIndentGuide
+editor.nonWordCharacters
+editor.invisibles
+editor.autoIndent
+editor.normalizeIndentOnPaste
 ----
 
-This file can also be named _init.js_ and contain JavaScript code.
+===== Language-specific Settings in the Settings View
 
-===== styles.less
+You can edit these config settings in the settings view on a per-language basis. Just search for the language of your choice in the left panel, select it, and edit away!
 
-If you want to apply quick-and-dirty personal styling changes without creating an entire theme that you intend to publish, you can add styles to the _styles.less_ file in your _~/.atom_ directory.
+.Python specific settings
+image::images/python-settings.png[python settings]
 
-You can open this file in an editor from the _Atom > Open Your Stylesheet_ menu.
+===== Language-specific Settings in your Config File
 
-For example, to change the color of the cursor, you could add the following rule to your _~/.atom/styles.less_ file:
+You can also edit the actual configuration file directly. Open your config file via the Command Palette, type ``open config'', and hit enter.
 
-[source,css]
+Global settings are under a global key, and each language can have its own top-level key. This key is the language's scope. Language-specific settings override anything set in the global section.
+
+[source,javascript]
 ----
-atom-text-editor.is-focused .cursor {
-  border-color: pink;
-}
+'global': # all languages unless overridden
+  'editor':
+    'softWrap': false
+    'tabLength': 8
+
+'.source.gfm': # markdown overrides
+  'editor':
+    'softWrap': true
+
+'.source.ruby': # ruby overrides
+  'editor':
+    'tabLength': 2
+
+'.source.python': # python overrides
+  'editor':
+    'tabLength': 4
 ----
 
-Unfamiliar with LESS? You can read more about it at http://www.lesscss.org
+===== Finding a language's scope name
+
+In order to write these overrides effectively, you'll need to know the scope name for the language. We've already done this for finding a scope for writing a snippet in <<_snippet_format>>, but we can quickly cover it again.
+
+The scope name is shown in the settings view for each language. Search for the language of your choice in the left panel, select it, and you should see the scope name under the language name heading:
 
-This file can also be named _styles.css_ and contain CSS.
+.Finding a language grammar
+image::images/python-grammar.png[python grammar]