Styling Hyperlinks
March 3, 2014 kevinsawicki
The journey to completely customizing Atom starts with a single step. Today, I’ll show you how to take that first step with a simple tweak to your Atom stylesheet to make hyperlinks in code stand out.
Atom comes with the language-hyperlink package that tokenizes links found in strings and comments. These link tokens have a .markup.underline.link.hyperlink
CSS class that can be styled in your ~/.atom/styles.less
file.
Start by opening Atom and clicking the Atom > Open Your Stylesheet menu. Then paste the following snippet into the opened editor:
.editor .markup.underline.link.hyperlink {
color: #F9EE98;
text-decoration: underline;
}
Hit cmd-s
to save and hyperlinks will now be yellow and underlined.
Atom automatically reloads ~/.atom/styles.less
whenever it changes on disk so
the new styles will be applied to every open Atom window as soon as you save.
You can use the ctrl-shift-o
keybinding to open the hyperlink under the
cursor in an external browser. This is provided by the link
package that comes with Atom.
Happy hacking!