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" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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("<b>HELLO</b>");
</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" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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 startAttributions
This repo contains assets from other open source projects.