Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including show-code with all npm packages installed. Try it out:

var showCode = require("show-code")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

show-code v1.1.1

Use the source code of a container as the background for that container!

show-code

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/
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free