Atom preview only shows as dark gray


#1

The preview window is only showing up as the same background color as the UI theme interface I am using which is a dark gray background. Text shows colors but the preview of anything else is nada. Possibly the set up is not complete yet?

The version I am working on is 1.21.2.

Accessed videos online but it was an earlier version. One video did help a lot and have a clearer understanding of the setup process/pallets now but the way to access the preview in the version I am working on is Packages > Markdown Preview > Toggle Preview (if i have this correctly) and different than mentioned in the videos.


#2

My experience with markdown-preview is the same as yours. Would you like to change the colors in the preview?


#3

Yes would like to learn how to change the Atom colors.

Did a workaround by opening up the file in FireFox so at least I am not flying blind, but still want to build my knowledge with this particular software package. I like it and I like the fact that it is designed by the GitHub people.

Have also gone back to square 1 by reviewing HTML and CSS. Have a months subscription on Lynda .com so am going to take advantage of that right now.
(Did begin the review of your HTML link as well.)

Also started another file that is a basic page file for my slides, It’s needs some massaging and then I will figure out how to put it up on GitHub for others to (hopefully) spot me on any issues.

You were very right and have given sage advice. I think for now I can make a very adequate set of master pages with HTML and CSS, with JS a maybe, cause not necessary to have functional links.

THEN maybe I’ll apply for a dev job at Google, (maybe) [receptionist?].

Despite the frustration I’m having fun learning the new skills and look forward to advancing and being able to do the tasks that I want to do with less angst and in a lot less time.

Thank you for your time and expertise.


#4

If you just want dark text on a light background, you can go to the settings for the package (File -> Settings -> Packages -> markdown-preview) and select Use GitHub.com style.

If you want to customize the style, you can do so through your styles.less file with the following rule:

div.item-views div.markdown-preview {
  background-color: olive;

  h1 {
    color: darkgreen
  }
}

Since it’s Less, you can indicate child elements by nesting them like you can see above.


#5

Thank you for your response but I must not have my terminology correct. The “preview” that is inaccurate on my program is the separate window for seeing how the html and the css is seen on a monitor at the user end. My “window” that shows this “preview” version of the code is the same dark gray as the pages where the code is entered. Have watched videos of others explaining everything and that “preview” window will display accurately, having the colors indicated in the code.

I am getting a package ready of 3 sample master pages for my slide project that has the html code with the semantic titles applied to understand the basic structure and heirarchy, accompanying css files, and jpegs of the finished direction I am aiming for. Would you be interested in looking at this and advising me on the next stage for me?

I also would need to know how to post this on Github (presumably) in order to do this. Am doing some research on this today and will be figuring that out.

Best wishes this holiday season.


#6

I don’t think the quotes are helping. It is actually a preview, generated by the markdown-preview package, so you don’t need to call it a “preview”. If we’re talking about the same thing, however, it’s not a separate window. It’s a pane item, just like all the other editor tabs, Settings, etc.

My “window” that shows this “preview” version of the code is the same dark gray as the pages where the code is entered.

Like I said, this is exactly what I see with the package markdown-preview, and I have shown you how to change the style.

Have watched videos of others explaining everything and that “preview” window will display accurately, having the colors indicated in the code.

If you have style instructions in your document, please share them with me so that I can experiment on my end. Are you absolutely sure that these people are using markdown-preview?

Would you be interested in looking at this and advising me on the next stage for me?

Sure.

I also would need to know how to post this on Github (presumably) in order to do this. Am doing some research on this today and will be figuring that out.

Here’s the quick way to do it: in your GitHub account, create a new repository. Then in your system’s command line, navigate to a folder near where you’re keeping your data and enter

git clone https://github.com/<username>/<repository-name>

Copy everything you want to share into that folder, open it in Atom, and you’ll be able to commit and push all you like (commit writes your current changes into the history of the repository, and push synchronizes your repo with the remote repo).