html - 如何在 markdown 中嵌入 "real-time"图形？

Question

我正在尝试嵌入来自 Google Scholar profile 的实时图表在 GitHub 的 Markdown 文档中:

这是我通过检查源代码找到的 HTML:

<div class="gsc_md_hist_b"><span class="gsc_g_t" style="right:227px">2015</span><span class="gsc_g_t" style="right:195px">2016</span><span class="gsc_g_t" style="right:163px">2017</span><span class="gsc_g_t" style="right:131px">2018</span><span class="gsc_g_t" style="right:99px">2019</span><span class="gsc_g_t" style="right:67px">2020</span><span class="gsc_g_t" style="right:35px">2021</span><span class="gsc_g_t" style="right:3px">2022</span><a href="javascript:void(0)" class="gsc_g_a" style="right:232px;top:149px;height:11px;z-index:8"><span class="gsc_g_al">25</span></a><a href="javascript:void(0)" class="gsc_g_a" style="right:200px;top:143px;height:17px;z-index:7"><span class="gsc_g_al">37</span></a><a href="javascript:void(0)" class="gsc_g_a" style="right:168px;top:138px;height:22px;z-index:6"><span class="gsc_g_al">48</span></a><a href="javascript:void(0)" class="gsc_g_a" style="right:136px;top:120px;height:40px;z-index:5"><span class="gsc_g_al">85</span></a><a href="javascript:void(0)" class="gsc_g_a" style="right:104px;top:104px;height:56px;z-index:4"><span class="gsc_g_al">120</span></a><a href="javascript:void(0)" class="gsc_g_a" style="right:72px;top:40px;height:120px;z-index:3"><span class="gsc_g_al">255</span></a><a href="javascript:void(0)" class="gsc_g_a" style="right:40px;top:9px;height:151px;z-index:2"><span class="gsc_g_al">322</span></a><a href="javascript:void(0)" class="gsc_g_a" style="right:8px;top:22px;height:138px;z-index:1"><span class="gsc_g_al">295</span></a></div>

如何将它嵌入到 markdown 文档中，以便在 markdown 文档呈现在 GitHub 上后可以访问它？

Answer 1

您可以做到这一点，这将是相当微不足道的 - 但它需要您在某处托管一些可公开访问的 CGI 脚本(PHP、Python、GO、Nodejs 等)。

虽然这个想法本身很简单。你的脚本应该。

1. 抓取页面 https://scholar.google.com/citations?user=r9y1tTQAAAAJ&hl=en获取相关的 html，带有 id="gsc_rsb_cit"

   的 div

2. 您将该 HTML 转换为图像

3. 使图像文件可用

4. 在你的 markdown 中包含该图片

也就是说具体的实现由你决定:)