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.

Usage

Quickstart

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/blog-cells@0.7.1/dist/blog-cells.css" integrity="sha384-WTyObMIz+pJFKKBrAWAzdQR97p6wSVxgp4MrCmb2kxgAqz5M8sPvKBINcDpp1ERV" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/blog-cells@0.7.1/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.

Other Languages

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

Cell Attributes

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.

Using <pre> tags instead of <script> tags

<!-- Import blog-cells JS and CSS files. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/blog-cells@0.7.1/dist/blog-cells.css" integrity="sha384-WTyObMIz+pJFKKBrAWAzdQR97p6wSVxgp4MrCmb2kxgAqz5M8sPvKBINcDpp1ERV" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/blog-cells@0.7.1/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>