blog-cells

0.7.1 • Public • Published

blog-cells

Node.js CI npm

[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/blog-cells@0.7.1/dist/blog-cells.css" />
<script src="https://cdn.jsdelivr.net/npm/blog-cells@0.7.1/dist/blog-cells.js"></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/blog-cells@0.7.1/dist/blog-cells.css" />
<script src="https://cdn.jsdelivr.net/npm/blog-cells@0.7.1/dist/blog-cells.js"></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.

Alternatives

Readme

Keywords

none

Package Sidebar

Install

npm i blog-cells

Weekly Downloads

0

Version

0.7.1

License

none

Unpacked Size

2.77 MB

Total Files

11

Last publish

Collaborators

  • vramesh