Package Exports
- render-jupyter-notebook-vue
- render-jupyter-notebook-vue/lib/RenderJupyterNotebook/index.umd.min.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (render-jupyter-notebook-vue) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
介绍
RenderJupyterNotebook是一个 vue 组件，实现了：通过JavaScript还原渲染jupyter notebook。渲染效果基本和JupyterLab的保持一致。这是因为最底层的渲染逻辑是直接引用于JupyterLab并进行了抽离组装。其中核心代码在src/utils/notebook中的Class Notebook。
使用
RenderJupyterNotebook组件已经发布到npm。链接：render-jupyter-notebook-vue - npm (npmjs.com)
安装render-jupyter-notebook-vue插件
npm i render-jupyter-notebook-vue安装好插件后，有两种使用方法：
- 项目中直接引入RenderJupyterNotebook组件最为便捷。
- 调用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";
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);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说明，请查看：
Author
- Z-J-wang https://github.com/Z-J-wang