npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

render-jupyter-notebook-vue

v2.2.1

Published

The render-jupyter-notebook-vue is a vue component that renders the notebook file in vue. render-jupyter-notebook-vue是一个vue组件,实现了notebook文件在vue中的渲染。

Downloads

34

Readme

render-jupyter-notebook-vue

介绍

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

点击链接查看效果:render-jupyter-notebook-vue (z-j-wang.github.io)

使用

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

安装 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);

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 渲染工具 | | mathJaxTypesetterConfig | { url: String, config: String} | defaultMathJaxTypesetterConfig | MathJaxTypesetter配置项 |

关于defaultMarkdownParser

markdown-it 实例。具体如下:

import markdown from 'markdown-it';

export default markdown({ html: true, xhtmlOut: true, breaks: true, linkify: true });

关于defaultMathJaxTypesetterConfig

const defaultMathJaxTypesetterConfig = {
  url: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js',
  config: 'TeX-AMS_HTML-full,Safe'
};

关于 trusted 参数

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

所以,建议将trusted设为false

关于 markdownParser 参数

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

defaultMarkdownParser无法满足您的 markdown 渲染需求时,您就需要自己实现 markdown 渲染工具,然后通过markdownParser参数传递给Class NotebookClass 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

Contact

LICENSE

MIT