Skip to content
This repository has been archived by the owner on Dec 15, 2022. It is now read-only.

Commit

Permalink
fix up customizing text
Browse files Browse the repository at this point in the history
  • Loading branch information
schacon committed Jan 8, 2015
1 parent 3fe42a7 commit c30c97b
Show file tree
Hide file tree
Showing 9 changed files with 79 additions and 48 deletions.
Binary file added book/02-using-atom/images/devtools.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added book/02-using-atom/images/menubar.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added book/02-using-atom/images/python-grammar.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added book/02-using-atom/images/python-settings.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 0 additions & 1 deletion book/02-using-atom/sections/01-packages-themes.asc
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
:compat-mode:
[[_atom_packages]]
=== Atom Packages

Expand Down
2 changes: 1 addition & 1 deletion book/02-using-atom/sections/02-text.asc
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
:compat-mode:
[[_moving_in_atom]]
=== Moving in Atom

Expand Down Expand Up @@ -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:
Expand Down
1 change: 0 additions & 1 deletion book/02-using-atom/sections/03-interface.asc
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
:compat-mode:
[[_atom_folding]]
=== Folding

Expand Down
16 changes: 0 additions & 16 deletions book/02-using-atom/sections/05-writing.asc
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
:compat-mode:
[[_atom_markdown]]
=== Writing in Atom

Expand Down Expand Up @@ -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.
107 changes: 78 additions & 29 deletions book/02-using-atom/sections/06-customizing.asc
Original file line number Diff line number Diff line change
@@ -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

Expand All @@ -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].

Expand Down Expand Up @@ -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]

0 comments on commit c30c97b

Please sign in to comment.