blog-cells

[VIEW DEMO]

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/[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.

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

Script 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("&lt;b&gt;HELLO&lt;/b&gt;");
</pre>

Creating a Custom Kernel

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>

Developing

git clone https://github.com/rameshvarun/blog-cells.git
cd blog-cells
npm install
npm start

Attributions

This repo contains assets from other open source projects.

• https://github.com/SamHerbert/SVG-Loaders (MIT)

Alternatives

• https://starboard.gg/
• https://observablehq.com/
• https://jupyter.org/try-jupyter/lab/
• https://www.typecell.org/