Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@jasonphillips
Last active June 24, 2018 13:10
Show Gist options
  • Star 8 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save jasonphillips/3ecfc221f8f931027c82511870727e34 to your computer and use it in GitHub Desktop.
Save jasonphillips/3ecfc221f8f931027c82511870727e34 to your computer and use it in GitHub Desktop.
Jupyter NodeJS: HTML Output (and React Demonstration)
module.exports = {
extensions: {
// clojurescript: require('./ext/clojurescript'),
clojure: require('./build/ext/clojure'),
clojurescript: require('./build/ext/clojurescript'),
coffee: require('./build/ext/coffee'),
babel: require('./build/ext/babel'),
html: require('./build/ext/html')
}
}
'use strict';
Object.defineProperty(exports, '__esModule', {
value: true
});
exports['default'] = function (ctx, args, done) {
done(null, {
block: {
html: function(ctx, args, code, out, done) {
return ctx.rawEvaluate(code, out, function(e, output) {
if (e) return done(e);
if (!output['text/plain']) return done(null, output);
return done(null, {'text/html':eval(output['text/plain'])});
})
}
}
});
};
module.exports = exports['default'];

Instructions / usage

Add the html.js file to the package/build/ext/ directory, and update config.js as shown.

First run the following in your notebook:

%load_ext html

Then, at the start of any block in which you will output html, place this:

%%html
// your code here, object to display on final line as usual
@jasonphillips
Copy link
Author

And here's a full example, rendering a simple react component:

image

(don't forget to npm install react && npm install react-dom from notebook folder first)

@haakenlid
Copy link

Thanks. I got this working, but there's an error in the instructions.
%%load_ext html should be %load_ext html in usage.md

@jasonphillips
Copy link
Author

Thanks, updated to fix that.

And I'll repost the link to your other helpful note here, where you indicated that another somewhat simpler method for using HTML already exists, for anyone interested:

notablemind/jupyter-nodejs#21 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment