npm 包 @jupyterlab/rendermime 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

@jupyterlab/rendermime 是为 JupyterLab 提供渲染媒体的大型 npm 包，它包含了各种文本、媒体和数据格式的渲染器，包括 Markdown、LaTeX、JSON、CSV、SVG 等。通过在前端引入这个包，我们可以在 Web 应用程序中呈现 Jupyter notebook 中的各种媒体类型。本文将为你介绍如何安装和使用 @jupyterlab/rendermime 包。

安装

使用 npm（或者 yarn）安装 @jupyterlab/rendermime。

npm install --save @jupyterlab/rendermime

引入 @jupyterlab/rendermime

在你的代码中引入 @jupyterlab/rendermime，可以通过以下方式：

import { RenderMimeRegistry } from '@jupyterlab/rendermime';

如果你需要使用 JupyterLab 默认的渲染器集合，你可以通过以下方式：

import { defaultRendererFactories } from '@jupyterlab/rendermime';
const renderers = defaultRendererFactories;

这个包中还提供了很多其它有用的类和函数，比如 RendererFactory 、IExtension 和 OutputModel。你可以在文档中找到详细的 API 文档。

初始化渲染器

初始化 RenderMimeRegistry 是需要的。

const registry = new RenderMimeRegistry({ initialFactories: renderers });

此时，你已经创建了一个渲染器集合。

注册自定义渲染器

Registering a custom renderer involves two steps:

将数据类型和渲染器工厂绑定，以便使用选择器匹配

const mimeType = 'text/x-foo';
const fooRendererFactory: RendererFactory.IRendererFactory = ...;
registry.addFactory({
    mimeType: mimeType,
    createRenderer: options => fooRendererFactory.createRenderer(options),
    isPreferred: options => options.model.mimeType === mimeType,
    safe: true
});

然后通过选择器为数据类型提供一个可渲染的工厂列表。选择器指定了用于确定数据类型与引擎匹配的策略。比如 mimeType 选择器只检查 MIME type，不检查数据内容。

registry.addFactory({
    mimeTypes: [mimeType],
    createRenderer: options => fooRendererFactory.createRenderer(options),
    // Add more factory fields here
});

渲染输出

使用渲染器将 Output models（你需要显示的内容）渲染为 DOM。

import { OutputModel } from '@jupyterlab/outputarea';
import { Widget } from '@lumino/widgets';

const model = new OutputModel({ value: `# Hello, world!`, trusted: true, metadata: {} });
const widget = registry.createRenderer(model).render({});

// Finally, attach to the DOM
document.body.appendChild(widget.node);

当呈现一个有多个输出的 notebook 时，@jupyterlab/rendermime 可以帮助同步所有输出以确保它们之间的良好交互。可以在 API 文档中找到详细的示例。

示例代码

-- -------------------- ---- -------
------ - ------------------ - ---- -------------------------
------ - ------------------------ - ---- -------------------------
------ - ----------- - ---- -------------------------
------ - ------ - ---- ------------------

-- ------- ---------
----- --------- - -------------------------

-- ------ - --------
----- -------- - --- -------------------- ----------------- --------- ---

-- -------- - ------ --------
----- -------- - -------------
----- ------------------- -------------------------------- - ----
---------------------
    --------- ---------
    --------------- ------- -- -------------------------------------------
    ------------ ------- -- ---------------------- --- ---------
    ----- ----
---

-- ------ -- ------ -----
----- ----- - --- ------------- ------ -- ------ -------- -------- ----- --------- -- ---

-- ------ --- ------ ----- ----- --- --------
----- ------ - ------------------------------------------

-- ------ -- --- ---
---------------------------------------

结论

我们介绍了如何在 Web 应用程序中使用 @jupyterlab/rendermime 渲染媒体类型。该包提供了丰富的渲染器集合，并且还能够方便地注册自定义渲染器。可以在 JupyterLab 的插件文档中了解更多 @jupyterlab/rendermime 的功能和用法。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/5f1f8b56403f2923b035c602