Coder Social home page Coder Social logo

vansteki / preview-plus Goto Github PK

View Code? Open in Web Editor NEW

This project forked from skandasoft/preview-plus

0.0 1.0 0.0 79.22 MB

Preview Plus

License: MIT License

CoffeeScript 74.88% CSS 20.23% HTML 3.86% Handlebars 0.39% JavaScript 0.57% TypeScript 0.07%

preview-plus's Introduction

preview-plus package Preview Anything to Anything


One Utility to handle the following matrix of previews

  • Coffeescript: ['JavaScript','HTML','htmlp']
  • javascript: ['CoffeeScript','HTML','htmlp']
  • jade: ['HTML','htmlp']
  • slim: ['HTML','htmlp','erb']
  • markdown: ['HTML','htmlp']
  • jsx: ['JavaScript','HTML','htmlp']
  • typescript: ['JavaScript']
  • erb: ['HAML']
  • haml: ['HTML','htmlp']
  • html:['htmlp','Jade','Ruby Slim','GitHub Markdown','JSX','HAML']
  • css: ['Stylus','LESS','Sass','SCSS']
  • less: ['CSS']
  • stylus: ['CSS']
  • sass: ['CSS']
  • scss: ['CSS']
  • handlebars: ['HTML','htmlp']
  • cjsx: ['JavaScript','HTML','htmlp','CoffeeScript']

Install

apm install preview-plus
for issues with installation please update the github for resolution.

Features

  • Live Preview
  • HTML Preview
  • Select Compile To using the down arrow in status bar (eg. Incase of HTML it can compiled to SLIM/JADE/HAML/HTML Preview)
  • Switch on HTML/Live Preview by clicking on Live Button on statusbar or double click on the to compile in the status bar
  • Pass Compile to options(eg. pass bare:true to pp-options in case of coffeescript from the editor locally/as well from config setting)
  • easy access to config file --> preview-plus:config (ctrl+alt+p)
  • Extensible. More Compiler can be added/contributed
  • Pass data to compiler (for eg in handlebars using pp-data tag)
  • choose the filetypes to compiled to using the config file settings(fileTypes/alias for each grammar)
  • All preview can have Local setting / Config~global settings..
  • Support for SLIM/SASS/SCSS. These are possible only after the gem is installed in the system.

Check if it is working by going to the test folder(preview-plus/spec/test/) and try previewing each of it.
Here is quick getting started

Go to the config settings in the preview-plus to change default (Live Switched on)

You change the default preview for each format from the config file.
Open the file using the command Preview-Plus:Config
Add fileTypes to identify to a particular grammar
All the available preview for each format is maintained in the config setting
Double click on any format to display as HTMLPreview

preview Typescript to JS

Here is some video link to the demo
-Preview-Plus

Issues

When the Compiler put up the preview in the split screen and the editor is closed with the preview tab still on Then there is a errror when reopening.
I will raise it up in the discussion forum.
click on save when it asks for save/cancel..this bring it up in the same place but without the split screen. The webview right now has issues in chrome. So for now there is option for iframes but they cannot execute javascript. So The webview closes as soon as it loses focus.(I think this is going to go away ) So 2 html previews cannot be open at one time. This will resolved once the chrome bug is resolved. I have tested using windows. You are welcome put the test result /raise issues for other os. The Slim compiler which is installed as gems generate a batch file. So I have the command as slim.bat for running as spawn. if it is any other os I have it as just the command.
There is a weird error (backspace/delete key would not work while update base href for html preview in the modal panel)

You are welcome to contribute by adding new precompile options/submit issues to the github repo.

TODO

  • Write test case for all the compilations

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.