@ atjson/ landder-html 页面存档备份,存于互联网档案馆

取一个附加注释的文档并将其转换为 HTML 。 默认情况下,这将需要一个抵消文档并将其提交到 HTML.

扩展

HTML 渲染器有一个 $ 方法,旨在方便扩展和写入自己的输出到HTML.

要将目前的HTML渲染器扩展至支持YouTube嵌入(即使用共享菜单时出现的那种),我们将使用以下代码:

import { YouTubeEmbed } from '@atjson/offset-annotations';
import HTMLRenderer from '@atjson/renderer-html';

export default MyHTMLRenderer extends HTMLRenderer {
  *YoutubeEmbed(embed: YouTubeEmbed) {
    return yield* this.$('iframe', {
      attributes: {
        width: embed.attributes.width,
        height: embed.attributes.height,
        src: embed.attributes.url,
        frameborder: '0',
        allow: 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture',
        allowfullscreen: true
      }
    });
  }
}

现在,当我们放进一个视频,喜欢 https://www.youtube.com/watch?v=RrkL9e2w7gQ,我们会得到以下:

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/RrkL9e2w7gQ"
  frameborder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>