https://github.com/haroldtreen/show-code

:computer: Using the source code of a container as the background for the container.
https://github.com/haroldtreen/show-code

animation npm parallax scroll web

Last synced: 23 days ago
JSON representation

:computer: Using the source code of a container as the background for the container.

• Host: GitHub
• URL: https://github.com/haroldtreen/show-code
• Owner: haroldtreen
• Created: 2015-12-27T23:48:02.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2016-09-06T20:40:47.000Z (about 8 years ago)
• Last Synced: 2024-04-25T13:20:55.353Z (7 months ago)
• Topics: animation, npm, parallax, scroll, web
• Language: JavaScript
• Homepage: http://haroldtreen.github.io/show-code
• Size: 415 KB
• Stars: 10
• Watchers: 3
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# show-code

[![npm](https://img.shields.io/npm/v/show-code.svg?maxAge=2592000)](https://www.npmjs.com/package/show-code)

[![npm](https://img.shields.io/npm/dt/show-code.svg?maxAge=2592000)](https://www.npmjs.com/package/show-code)

Using the source code in a container as the background for the container.

## Usage

1. Install the npm package

  ```bash

  npm install show-code --save

  ```

2. Include the show-code js/css in your HTML

  ```html

  

        

        

  

  

        

        

        

            window.showCode(); // Run when your container is ready

        

  

  ```

3. The add `sc-container` ID to a container

  ```html

  


        All your content!

  

  ```


4. **Bonus:** Add external libraries like [Prism](http://prismjs.com/index.html) for syntax highlighting.

  ```html

  

        

        

  

  

        

        

  

  ```

## Customization

When the background is injected it will have the `sc-background` ID. Using this selector, you can apply custom styles to your background.

```css

#sc-background {

    border-radius: 5px;

}

```

## Example:

See it in action [here](https://haroldtreen.github.io/show-code/)

**OR**

```bash

npm install -g serve

git clone git@github:haroldtreen/show-code --branch gh-pages

serve show-code

open http://127.0.0.1:3000/

```