render-jupyter-notebook-vue

介绍

RenderJupyterNotebook是一个 vue 3.x 组件，实现了：通过JavaScript还原渲染jupyter notebook。渲染效果基本和JupyterLab的保持一致。这是因为最底层的渲染逻辑是直接引用于JupyterLab并进行了抽离组装。其中核心代码在src/utils/notebook中的Class Notebook。

使用

RenderJupyterNotebook组件已经发布到npm。链接：render-jupyter-notebook-vue - npm (npmjs.com)

RenderJupyterNotebook组件是基于vue3.x编写的，所以打包后的文件（即，lib/中的文件）只适合vue3.x项目。如果vue2.x要使用RenderJupyterNotebook组件，请看在vue2.x中的使用说明。

安装render-jupyter-notebook-vue插件

npm i render-jupyter-notebook-vue

安装好插件后，有两种使用方法：

1. 项目中直接引入RenderJupyterNotebook组件最为便捷。
2. 调用Class Notebook渲染Notebook

方法一：直接引入RenderJupyterNotebook组件

RenderJupyterNotebook组件仅接收一个参数：notebook。它是notebook源码的JSON数据。

notebook源码的JSON数据说明：

notebook源文件为.ipynb（如本项目中提供的案例notebook文件OutputExamples.ipynb）。只需要将.ipynb后缀改为.json就可以拿到notebook源码的JSON数据。

例如：

<template>
  <div class="home">
    <RenderJupyterNotebook :notebook="notebook" />
  </div>
</template>

<script>
import RenderJupyterNotebook from "render-jupyter-notebook-vue"; // vue 3.x 写法
import example from "../assets/OutputExamples.json";

export default {
  name: "HomeView",
  components: { RenderJupyterNotebook },
  data() {
    return {
      notebook: example,
    };
  },
};
</script>

方法二：调用Class Notebook渲染Notebook

该使用方法稍微繁琐一点，不过好处是比较灵活。

在组件中引入Class Notebook后，首先需要实例化一个Notebook对象，这一步需要传递notebook源码的JSON数据，接着就是调用Notebook.render方法来渲染出notebook的DOM。最后将DOM插入页面即可。

例如：

import { Notebook } from "render-jupyter-notebook-vue/lib/Notebook/index.umd";

const notebook = new Notebook(this.notebook, false);
const fragment = await notebook.render();
this.$refs.NotebookFragment.appendChild(fragment);

在vue2.x中的使用说明

RenderJupyterNotebook组件是基于vue3.x编写的，所以打包后的文件（即，lib/中的文件）只适合vue3.x项目。如果vue2.x要使用RenderJupyterNotebook组件，需要直接引用未编译的代码。

如下：

import RenderJupyterNotebook from "render-jupyter-notebook-vue"; // vue 3.x 写法

import RenderJupyterNotebook from "render-jupyter-notebook-vue/src/components/RenderJupyterNotebook.vue"; // vue 2.x 写法

Class Notebook 为纯Javascript，但同样可以调用未编译的代码来使用：

import { Notebook } from "render-jupyter-notebook-vue/src/utils/index";

Class Notebook说明

Class Notebook是RenderJupyterNotebook组件的核心部分。它实现了将notebook渲染成HTML的全部过程。

Class Notebook构造函数接收四个参数：

参数	类型	默认值	说明
source	JSON Object	-	notebook源码的JSON数据
trusted	Boolean	false	用于说明当前运行环境是否安全可信，涉及Script,SVG渲染
shouldTypeset	Boolean	true	是否对数学公式字符进行latex排版
markdownParser		defaultMarkdownParser	markdown 渲染工具

关于trusted参数

trusted参数用于指明当前代码运行环境是否安全。当trusted=true时，表明当前环境是安全可信的。这时notebook中的脚本代码<script>和<svg>）会被执行。但是，如果执行的代码中存在安全漏洞，将会是非常危险。

所以，建议将trusted设为false。

关于markdownParser参数

markdownParser参数用于向Class Notebook传递markdown渲染工具。Class Notebook已经内置了默认的markdown渲染工具defaultMarkdownParser。defaultMarkdownParser是基于markdown-it实现的。

当defaultMarkdownParser无法满足您的markdown渲染需求时，您就需要自己实现markdown渲染工具，然后通过markdownParser参数传递给Class Notebook，Class Notebook将会优先使用您传递过来的markdown渲染工具。

需要注意的是，您提供的markdown渲染工具必须提供一个function render()。Class Notebook渲染时，只会调用render()来渲染markdown。

绝大多数情况下，您是不需要传递markdownParser参数的。

当然，您也可以提交 Pull requests 来帮助我们完善defaultMarkdownParser。我们将会非常感谢您！

关于 Notebook.render()

Notebook.render()是Class Notebook的一个public方法。

不接收任何参数，返回一个Promise对象。

只有调用该方法，Class Notebook才会进行HTML渲染。

使用说明

Class Notebook并不依赖于vue。可单独引入其他架构项目中。具体用法请查看：Z-J-wang/render-juypter-notebook-vue (github.com)

Class Notebook 更多说明

更多有关于Class Notebook说明，请查看：根据 Jupyter-lab 源码实现 notebook（.ipynb）在页面中的渲染_jupyter 源码

Author

• Z-J-wang https://github.com/Z-J-wang

LICENSE

MIT