YouTubeの動画を表示できるようにしたい

YouTubeの動画をMarkdownに表示させられるようにしてみたい

実装方針

<url> でYouTubeのURLを指定したらプレイヤーを埋め込む

URLを貼り付け

Markdownhttps://www.youtube.com/watch?v=7w3jBGX7UcY

短縮URLを貼り付け

Markdownhttps://youtu.be/kgGM5XMdq0I

markdown-it plugin

youtube.tsimport MarkdownIt, { PluginSimple } from 'markdown-it';
import { RenderRule } from 'markdown-it/lib/renderer';
import ParserBlock from 'markdown-it/lib/parser_block';

const youtubeRuler: ParserBlock.RuleBlock = (state, startLine, endLine, silent) => {
  const pos = state.bMarks[startLine] + state.tShift[startLine];
  const posMax = state.eMarks[startLine];
  const line = state.src.slice(pos, posMax);
  const youtubeUrl = /^https?:\/\/(?:www\.)?(?:youtube\.com\/watch.+|youtu\.be\/[0-9a-zA-Z-]+)$/.exec(line);

  if (!youtubeUrl || pos >= posMax) {
    return false;
  }

  const url = youtubeUrl[0];

  if (!silent) {
    state.line = startLine + 1;

    const token = state.push('youtube', '', 0);

    token.content = url;
  }

  return true;
};

const youtubeTokenizer = (md: MarkdownIt): RenderRule => (tokens, index) => {
  const { content } = tokens[index];
  const matches = /(?:[?&]v=|youtu\.be\/)([0-9a-zA-Z-]+)/.exec(content);

  if (!matches) {
    return '';
  }

  const videoId = md.utils.escapeHtml(matches[1]);

  return `<div class="youtubeVideo" data-video-id="${videoId}"></div>`;
};

const youtubePlugin: PluginSimple = (md) => {
  md.renderer.rules.youtube = youtubeTokenizer(md);
  md.block.ruler.before('paragraph', 'youtube', youtubeRuler);
};

export default youtubePlugin;