https://github.com/yuanchuan/codepen-prefill

Create new pen from local HTML/JS/CSS files with ease
https://github.com/yuanchuan/codepen-prefill

Last synced: about 2 months ago
JSON representation

Create new pen from local HTML/JS/CSS files with ease

• Host: GitHub
• URL: https://github.com/yuanchuan/codepen-prefill
• Owner: yuanchuan
• License: mit
• Created: 2020-10-01T05:28:18.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2020-11-25T08:53:02.000Z (about 4 years ago)
• Last Synced: 2024-11-01T11:34:29.155Z (about 2 months ago)
• Language: JavaScript
• Homepage:
• Size: 27.3 KB
• Stars: 75
• Watchers: 3
• Forks: 6
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# codepen-prefill

The live editor of [CodePen](https://codepen.io/) is not stable for me most of the time due to the network (in China...), so I always write demos on my local machine first,

then open CodePen afterwards and copy/paste into the editor.

This tool is for saving this process by doing the following steps:

1. Extract *external* or *embedded* **scripts** and **styles** from a local HTML file.

2. Open a new CodePen editor with default browser.

3. Prefill each HTML/JS/CSS section and external depencencies in the editor automatically.

The rest is to click the **SAVE** button.

## Installation

```bash

$ npm install -g codepen-prefill

```

## Example

```bash

$ codepen-prefill index.html

```

It can be used to preview a `markdown` file quickly on CodePen:

```bash

$ codepen-prefill README.md

```

Edit a JS file on CodePen:

```bash

$ codepen-prefill example.js

```

Using [npx](https://blog.npmjs.org/post/162869356040/introducing-npx-an-npm-package-runner) which is a package runner bundled in `npm`:

```bash

$ npx codepen-prefill index.html

```

## Options

#### --keep-embedded, --embed

By default all the **embedded** scripts/styles in HTML will be put into JS/CSS sections seperatly,

but they can stay with HTML using `--keep-embedded` or `--embed` option.

#### --data

Output the prefiled data instead of open CodePen.

## References

[https://blog.codepen.io/documentation/prefill](https://blog.codepen.io/documentation/prefill/)

## Usage

```

Usage:

  codepen-prefill 

Options:

  --keep-embedded: Keep embedded styles/scripts inside html (alias: --embed)

  --data:          Output the prefilled data

  --help:          Display help info

Supported filename types by extension:

  htm, html, md, markdown, js, ts, css, less, sass, scss, styl

```