From 3d0623678923e98594ad2d6e443372e71efd6e6d Mon Sep 17 00:00:00 2001 From: Tino Wagner Date: Sat, 15 Jul 2017 10:34:53 +0200 Subject: [PATCH] Squashed 'nbviewer.js/' changes from 6f48d7c..5c4a887 5c4a887 that TOC thing never happened 0ec3094 handling stderr; closes #23 1f7be42 handling of error cells, stripping ANSI colours from them 36be66a advertise github browser d52ffbf browse github and render notebooks 583dce5 analytics 5263885 images need not be lists, fixes #18 9fe7951 fixed a typo 86b3c2e Merge pull request #17 from kikocorreoso/master ec17e69 Deleting instead of commenting out 8098772 render correctly embeded images b09bde8 Cleaned unnecessary ugly scroll overflow 4518fbe render SVG correctly dd810d9 Mentioned ipynb-quicklook git-subtree-dir: nbviewer.js git-subtree-split: 5c4a887f1403d5da3e3d50848e1c4520920896e3 --- README.md | 4 +- github-browser.html | 213 ++++++++++++++++++++++++++++++++++++++++++++ lib/nbv.js | 44 +++++---- viewer.html | 18 +++- 4 files changed, 257 insertions(+), 22 deletions(-) create mode 100644 github-browser.html diff --git a/README.md b/README.md index be818c6..9022194 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ ### client side rendering of jupyter notebooks -*tl;dr: Render Jupyter notebooks straight in the browser, without a back end converter. Can be used as a library.* +*tl;dr: Render Jupyter notebooks straight in the browser, without a back end converter. Can be used as a library. Or if you're on macOS, you can even fire it up in Quick Look, see [ipynb-quicklook](https://github.com/tuxu/ipynb-quicklook).* I often want to read through my Jupyter notebooks, but I rarely have my Jupyter instances running in the right folders. I can't quite use the [online nbviewer](http://nbviewer.jupyter.org/), because I don't have a public URL for these, so I resort to running dummy Jupyter instances or uploading my file as a one-time gist on Github (one I have to delete thereafter). One last possibility is `nbconvert` in the command line. @@ -16,7 +16,7 @@ Or you can use [the demo](https://kokes.github.io/nbviewer.js/viewer.html) (or a Two immediate use cases come to mind: -1. In Mac OS, you can preview files and this system, [Quick Look](https://support.apple.com/kb/PH21920?locale=en_US), supports plugins. It would be rather handy to have a notebook preview one keystroke away. +1. ~~In Mac OS, you can preview files and this system, [Quick Look](https://support.apple.com/kb/PH21920?locale=en_US), supports plugins. It would be rather handy to have a notebook preview one keystroke away.~~ This has been done, see [ipynb-quicklook](https://github.com/tuxu/ipynb-quicklook). 2. Ever since GitHub introduced notebook rendering last year, Gitlab users have been [requesting the same](https://gitlab.com/gitlab-org/gitlab-ce/issues/2508). Gitlab itself recently dropped Python as a dependency, so its reintroduction just for converting notebooks is rather unlikely. A browser-based solution like this could be a good substitute. ### Tech details diff --git a/github-browser.html b/github-browser.html new file mode 100644 index 0000000..b6023ae --- /dev/null +++ b/github-browser.html @@ -0,0 +1,213 @@ + + + + + nbviewer.js + + + + + + + + + + + + +Fork me on GitHub + +
+
+

Enter a username/repo combination from Github

+

+ Example 1 + Example 2 +

+ + +
+ +
+
(We know there's an encoding issue making non-latin characters render incorrectly.)
+ +
+ +
+
+
+ +
+ +
+ + + + + + + + + diff --git a/lib/nbv.js b/lib/nbv.js index 5d94756..512d9d3 100644 --- a/lib/nbv.js +++ b/lib/nbv.js @@ -107,7 +107,6 @@ var nbv = (function() { 'margin-bottom: 0', 'margin-top: 0', 'border-radius: 2px', - 'overflow-x: scroll', 'min-height: .85em' ].join(';')); var code = d.createElement('code'); @@ -141,6 +140,10 @@ var nbv = (function() { case 'stream': dm.appendChild(handle_stream_output(dt)); break; + case 'pyerr': // v3 + case 'error': // v4 + dm.appendChild(handle_error_cell(dt)); + break; case 'display_data': if (st.nbformat > 3) { dm.appendChild(handle_cell_output(dt)); @@ -184,7 +187,6 @@ var nbv = (function() { break; case 'text/html': - dm.style.overflow = 'scroll'; dm.innerHTML = dt.data[fmt].join(''); // we may have generated some HTML tables we need to style @@ -203,13 +205,17 @@ var nbv = (function() { } } - + break; + + case 'image/svg+xml': + dm.innerHTML = dt.data[fmt].join(''); break; default: if (fmt.startsWith('image/')) { dm = d.createElement('img'); - dm.setAttribute('src', 'data:' + fmt + ';base64,' + dt.data[fmt]); + dm.setAttribute('src', 'data:' + fmt + ';base64,' + + ((typeof dt.data[fmt]) == 'string' ? dt.data[fmt] : dt.data[fmt].join(''))); break; } console.error('unexpected format: ' + fmt); @@ -221,15 +227,29 @@ var nbv = (function() { return el; } + function handle_error_cell(dt) { + var cn = d.createElement('pre'); + var txt = dt.traceback.join('\n'); + // stripping ANSI colours for now https://github.com/chalk/ansi-regex/blob/master/index.js#L3 + // could use a full library at some point https://github.com/drudru/ansi_up + txt = txt.replace(/[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g, ''); + cn.textContent = txt; + + return cn; + } + function handle_stream_output(dt) { // name in v4, stream in v3 - if ( (dt.name || dt.stream) != 'stdout' || dt.output_type != 'stream') - console.error('unexpected stream spec'); + var outt = dt.name || dt.stream; // v4 || v3; contains 'stdout' or 'stderr' if (!dt.hasOwnProperty('text')) console.error('data for stream missing'); var cn = d.createElement('pre'); + // stderr red background, stdout is plain white + if (outt === 'stderr') { + cn.setAttribute('style', 'background-color: #fdd; padding: .5em'); + } cn.textContent = dt.text.join(''); return cn; @@ -287,18 +307,6 @@ var nbv = (function() { return el.toLowerCase().replace(/\W+/g, '-'); } - // function render_toc() { - // var els = st.target.querySelector('h1,h2,h3,h4,h5,h6') - // var minl = 6 - // for (var j=0; j @@ -48,7 +50,8 @@
-
Drag and drop Jupyter notebooks anywhere here
+
Drag and drop Jupyter notebooks anywhere here
+ (if you wish to render directly from Github, try our new tool)
@@ -161,6 +164,17 @@ + +