💻 Using the source code in a container as the background for the container.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
src
.eslintrc
.gitignore
.npmignore
Gulpfile.js
README.md
package.json

README.md

show-code

npm npm

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

Usage

  1. Install the npm package
npm install show-code --save
  1. Include the show-code js/css in your HTML
<head>
      <!-- Head contents -->
      <link rel="stylesheet" type="text/css" href="node-modules/show-code/build/show-code.min.css">
</head>
<body>
      <!-- Body contents -->
      <script type="text/javascript" src="node-modules/show-code/build/show-code.min.js"></script>
      <script>
          window.showCode(); // Run when your container is ready
      </script>
</body>
  1. The add sc-container ID to a container
<div id='sc-container'>
      <span>All your content!</span>
</div>
  1. Bonus: Add external libraries like Prism for syntax highlighting.
<head>
      <!-- Head contents -->
      <link rel="stylesheet" type="text/css" href="prism.css">
</head>
<body>
      <!-- Body contents -->
      <script type="text/javascript" src="prism.js"></script>
</body>

Customization

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

#sc-background {
    border-radius: 5px;
}

Example:

See it in action here

OR

npm install -g serve
git clone git@github:haroldtreen/show-code --branch gh-pages
serve show-code
open http://127.0.0.1:3000/