Iris Classon - In Love with Code
Copy-Paste developer | Get the book(s) Search blog Contact / About Categories Tags My first year of programming (Not so) Stupid Questions RSS Feed
Iris Classon
(Modified) Hugo Theme Diary by Rise
Ported from Makito's Journal.

© 2024 Iris Classon - In Love with Code
Copy-Paste developer | Get the book(s) Search blog Contact / About Categories Tags My first year of programming (Not so) Stupid Questions RSS Feed
- CATALOG -
    Iris Classon - In Love with Code

    Atom editor HTML preview

    folder JS & TS   HTML & CSS   label /home/runner/work/Blog/Blog/content/posts/27832-Atom-editor-HTML-preview.md  

    I’ve been using Atom for a few weeks now and I quite like it. It’s a little bit sluggish now and then, something I hope will get fixed, but I’ll try it out some more before I decide if it’s something for me. One thing that I quite like is a package that provides HTML preview. Be warned, it might be a little bit buggy, I haven’t had time to investigate if some recent errors (freezes and crashes) are due to that specific plugin. Anyway, here is how to set it up.

    First of all, use the Atom package manager to install the following package:

    apm install atom-html-preview

    As you can see I’m doing that by using PowerShell, use whatever terminal you are most comfortable with. Restart Atom, and you should be able to use CTRL + P to get the preview page.

    All works fine as long as everything is contained within the markup page (style and JS)- or you use absolute paths for your resources. Two things you probably you don’t want to do. To make external relative paths work open up the atom-html-preview-view.coffee file and edit the following section. Comment out or remove the outcommented line below, and add the two lines below. The solution was suggested by a user in a discussion on the package GitHub page under issues- it has not been added to the package at time of writing.

    This should sort things out, but I noticed that to get the page updated I needed to save the markup page and then make a change (usually me hitting the space bar), or CTRL + P times two. Not quite how I would like it to work, and there seems to be some limitations. I was unable to make jQuery work in the preview, and same for Raphael.js. (probably related to the editor itself) If I find some time over the weekend I’ll take a look at the package source code.

     

    Comments

    Leave a comment below, or by email.
    Sean Payne
    1/8/2015 9:32:18 AM
    Just so you know, you can install the package from within Atom without having to restart by going into Atom's Preferences > Packages > searching for 'atom-html-preview' and clicking install. Once installed, you can switch back and press Ctrl+P to preview.

Also, you might want to take a look at the Brackets editor at http://brackets.io/ . It is a similar OSS editor that was picked up by Adobe and is designed for web development.
    Jaime
    1/10/2015 2:56:52 PM
    Hmmm... tempting... I am using sublime, vim and VS at the moment... should I switch sublime for Atom? XDD

    Last modified on 2015-01-08

    comments powered by Disqus