Preview: Your Ultimate Previewer of source code in Atom!


#1

Preview for Atom

From the creator of CoffeeScript Preview.

Atom Package: https://atom.io/packages/preview
GitHub Project: https://github.com/Glavin001/atom-preview

About

There are many previewers for Atom, however the goal of Preview is to be the last one you will ever need. With a very extensible foundation, adding support for new languages is very quick and easy. Furthermore, any new features added will be available to all other supported languages automatically!
You now have one Previewer that can seamlessly switch between multiple supported languages and render their transpiled form.

Features

See https://github.com/Glavin001/atom-preview/blob/master/README.md#features for up-to-date list.

Supported Languages

See https://github.com/Glavin001/atom-preview/blob/master/README.md#supported-languages for up-to-date list.

Animated Demo


Introducing: CoffeeScript Preview
#2

Great effort!
Now all I’m waiting for is Markdown support, but it looks like that’s coming soon.


#3

@batjko, isn’t Markdown preview default build-in functionality (Markdown Prefiew: Toggle in Command Pallette)?


#4

It’s a bundled package, which you can disable. So why use two different packages, when you can just have one enabled for all your previews.
I think that’s what @Glavin001 is trying to achieve with this.


#5

My sentiments exactly, @batjko!


#6

i found it yesterday and tried it. i thought its maybe a good copy/clone of coffee preview but when i’d read this thread i had a smile on my face :smile:

fantastic package. looking further to something we saw already in the inventing on principles video :smile: or lighttable which borrows the idea of that video. or apples playground which borrows the idea of lighttable and this video :smile:


#7

Great work so far, I thought about trying to write ‘an all-in-one contextual/smart preview pane’ package but maybe I should just try contributing to this one instead?

Some thoughts I had were that it should show rendered HTML (basically, the full WebKit browser) for html tabs and markdown files.

###Sass > CSS
compilation preview too, but also the option to see the browser pane live update as you make changes to the scss file (as in still rendering the site preview). Not entirely sure how this behaviour could be toggled between, but ultimately we want to be able to edit the HTML and sass on the left, and see the rendered result in the preview pane on the right, along with being able to toggle something to view the compiled CSS code just like the existing Less preview works. (This is especially useful for seeing how things like extends are working etc).

###SVG
Possibly also render SVG (maybe this would just go through the WebKit browser too?) Although this one would be way lower priority.


#8

Thank you! Please feel free to contribute to this package. I hope to keep it actively maintained and growing with user demand.

Some thoughts I had were that it should show rendered HTML (basically, the full WebKit browser) for html tabs and markdown files.

I just published SpacePen previewing and HTML previewing is on the roadmap. Feel free to submit a pull request if you like ;).

Sass to CSS is also on the TODO list: https://github.com/Glavin001/atom-preview/issues/3
I have LESS and Stylus support and Sass should be coming soon – although this will be a busy work week for me personally, so relatively soon.

also the option to see the browser pane live update as you make changes to the scss file (as in still rendering the site preview). Not entirely sure how this behaviour could be toggled between, but ultimately we want to be able to edit the HTML and sass on the left, and see the rendered result in the preview pane on the right,

I have recent added a View for Previewer options. Currently that only includes a button for opening the popup to change the current preview renderer, however I hope to add more options there. For many templating languages, it is intended to allow for users to specify a context that would be used when rendering the template (see https://github.com/Glavin001/atom-preview/issues/36 ). This could be extended to support potentially associating certain CSS/LESS/SASS/Stylus files to HTML/Handlebars/Jade/etc files and render them together. This will of course get complicated quickly, however it’s a great idea and worth investigating what could and should be supported. Maybe you could submit a new issue detailing your expected use case(s)? Get the discussion started on GitHub.

Possibly also render SVG (maybe this would just go through the WebKit browser too?) Although this one would be way lower priority.

I saw an SVG Preview package today and thought that was a really cool idea: https://atom.io/packages/svg-preview
It’s definitely something Preview could support in the future.

Thanks for your support! Let me know if there is any other features you can think of, and always feel free to submit Pull Requests and create new issues for discussion.


#9

This is grea! I can’t wait to use it :slight_smile:


#10

Wow, I’m feeling really lame here. I’m trying to run Preview and I always get this really frustrating graphic. I HAVE made sure-

  1. I have tried selecting the Jade file in the Project Folder
  2. I have tried selecting the tab containing the Jade file for preview
    3 I have selected an empty tab in case it is going to ask me for a file name

But I always get-
“Previewing Failed…
Please select your Text Editor view to render a preview of your code.”

Oh yes, and I did do the Select Renderer - Jade

What is it asking of me that I am miss-understanding?