Add interactive code snippets to any blog or webpage.
MIT License
Add interactive code cells to any webpage, similar to Jupyter or ObservableHQ. Works with direct HTML editing, static site generators like Jekyll / Hugo, and more.
Just drop in JS / CSS imports and start creating code cells using <script type="text/notebook-cell">
elements. blog-cells will transform these script tags into interactive, runnable code snippets.
<!-- Import blog-cells JS and CSS files. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/blog-cells.css" integrity="sha384-WTyObMIz+pJFKKBrAWAzdQR97p6wSVxgp4MrCmb2kxgAqz5M8sPvKBINcDpp1ERV" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/blog-cells.js" integrity="sha384-8IdgH/vqj5QT2hghXrEdBvZwtNAK82dxP4JdkptO3xpqDeOFij/7sR2rqwQlHXPt" crossorigin="anonymous"></script>
<!-- Create your code cells in script tags -->
<script type="text/notebook-cell">
console.log("Hello World!");
</script>
Try it on CodePen or JSFiddle.
In addition to JavaScript, you can also embed code in other languages by adding a data-kernel
attribute.
<script type="text/notebook-cell" data-kernel="python">
print("Hello World!")
</script>
The following kernel values are currently supported:
javascript
(Default)python
Cells can be configured with the following attributes:
data-autorun="true"
- Automatically run a cell on page load. Autorun cells are run in the order that they appear on the page.data-hidden="true"
- Make a cell hidden by default - readers can toggle the cell's visibility.<pre>
tags instead of <script>
tagsScript tags are great for defining notebook cells since they can hold pretty much any code without escaping. However, you can also use <pre class="notebook-cell">
tags instead. When using pre
tags, reserved HTML characters should be escaped using HTML entities (this can be done by your static site generator).
<pre class="notebook-cell">
console.log("<b>HELLO</b>");
</pre>
You can easily define and use your own custom kernels.
<!-- Import blog-cells JS and CSS files. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/blog-cells.css" integrity="sha384-WTyObMIz+pJFKKBrAWAzdQR97p6wSVxgp4MrCmb2kxgAqz5M8sPvKBINcDpp1ERV" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/blog-cells.js" integrity="sha384-8IdgH/vqj5QT2hghXrEdBvZwtNAK82dxP4JdkptO3xpqDeOFij/7sR2rqwQlHXPt" crossorigin="anonymous"></script>
<!-- Define custom kernel -->
<script>
class JSONFormatKernel extends BlogCells.Kernel {
async run(code, onOutput) {
const data = JSON.parse(code.trim());
onOutput({ type: "log", line: JSON.stringify(data, undefined, 2) });
}
}
BlogCells.registerKernel("json-format", () => new JSONFormatKernel());
</script>
<!-- Use custom Kernel -->
<script type="text/notebook-cell" data-kernel="json-format">
[4, {"hello": 3}]
</script>
git clone https://github.com/rameshvarun/blog-cells.git
cd blog-cells
npm install
npm start
This repo contains assets from other open source projects.