About Atom Personalization

Question

I started using Atom today. It's great, but I have a couple of issues:

• Syntax Themes: I installed some syntax themes, but I found one cannot modify editor font colors, just style and size (from the main settings pane). Is there any workaround?

• Markdown Preview: I was unable to find out how to change preview style. I mean, markdown is rendered with arial fonts and a white background. Is there any way to change this default behaviour?

Answer 1

You should be able to customize both in your user stylesheet. On Mac OS X, you can open this using Atom > Open Your Stylesheet, which will open the ~/.atom/styles.less file.

For the syntax themes: You can customize the colors in your styles.less file, simply take a look at the theme's source LESS file and then override the settings in your custom stylesheet. More details and an example can be found here.

Markdown Preview: The Markdown Preview package has an example on how to do that in your own styles.less file:

.markdown-preview.markdown-preview {
  background-color: #444;
}

Take a look at the Markdown LESS files to see some of the styles you could override:

• Default style: https://github.com/atom/markdown-preview/blob/master/styles%2Fmarkdown-preview-default.less
• GitHub style: https://github.com/atom/markdown-preview/blob/master/styles%2Fmarkdown-preview-github.less

Answer 2

The markdown-preview-plus documentation now gives a different approach to styling the preview (even from the "snippet" provided in their README"):

To target Markdown-Preview-Plus rendering in general, you can do something like this in your stylesheet:

html[data-markdown-preview-plus-context] body {
 /* styles that affect mpp preview */
}

Full details (especially on further "contexts") in the MPP docs.