show-code
v1.1.1
Published
Use the source code of a container as the background for that container!
Downloads
33
Maintainers
Readme
show-code
Using the source code in a container as the background for the container.
Usage
- Install the npm package
npm install show-code --save
- 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>
- The add
sc-container
ID to a container
<div id='sc-container'>
<span>All your content!</span>
</div>
- 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/