Atom to CodePen is an Atom.io package that takes the HTML file your working on and turns it into a CodePen! I made this because I'm trying to create 100 CodePen demos for my computer vision JS library, SeeClarke.js, so that I could in turn use that to help people with disabilities use the web.
Atom to CodePen scans the active editor for three main components:
<script>
tags without a src
attribute<style>
tagsThe YAML Front Matter is used to set your CodePen's properties and sits at the very beginning of the file, here are all the properties you can pass:
---title: "New Pen!",description: "It's about stuff.",private: false, # true || false - When the Pen is saved, it will save as Private if logged in user has that privledge, otherwise it will save as publicparent: id # If supplied, the Pen will save as a fork of this id. Note it's not the slug, but ID. You can find the ID of a Pen with `window.CP.pen.id` in the browser console.tags: ["tag1", "tag2"], # an array of stringseditors: "101", # Set which editors are open. In this example HTML open, CSS closed, JS openlayout: "left", # top | left | righthtml: "<div>HTML here.</div>",html_pre_processor: "none" || "slim" || "haml" || "markdown",css: "html { color: red; }",css_pre_processor: "none" || "less" || "scss" || "sass" || "stylus",css_starter: "normalize" || "reset" || "neither",css_prefix: "autoprefixer" || "prefixfree" || "neither",js: "alert('test');",js_pre_processor: "none" || "coffeescript" || "babel" || "livescript" || "typescript",html_classes: "loading",head: "<meta name='viewport' content='width=device-width'>",css_external: "http://yoursite.com/style.css", # semi-colon separate multiple filesjs_external: "http://yoursite.com/script.js" # semi-colon separate multiple files---
The package will then scan the rest of the file for <script>
without a src
attribute and <style>
tags, and populates the css
and js
properties above. All the rest of the content will go into the html
property.
Here's a simple example file:
---title: Hello Worlddescription: This will be shown in the CodePen's description field---<ul><li>List Item A<li>List Item B<li>List Item C</ul><script>console.log(`There are ${document.getElementsByTagName('li').length} list items!`)</script><style>body {background: #0f0;color: #fff;}</style>
Which generates this CodePen:
CTRL + SHIFT + P
Type "install package" and hit ENTER
Type "atom to codepen" in the search
or
Via Menu: Packages > Atom to CodePen > Export to CodePen
Via Command Paletted: CTRL + P + "to codepen"
Via Keyboard Shortcut: CTRL + SHIFT + F12
https://github.com/labofoz/Atom-to-CodePen/issues?q=is%3Aissue+is%3Aopen+label%3Aenhancement
Please consider making a small donation to https://cash.me/$heyozramos to support this and future projects, see my end game here: https://twitter.com/LabOfOz/status/1021501116486438919
Good catch. Let us know what about this package looks wrong to you, and we'll investigate right away.