在 HTML 中嵌入 Gist 的简短紧凑版本答案

【问题标题】：Embed a short compact version of a Gist in HTML在 HTML 中嵌入 Gist 的简短紧凑版本
【发布时间】：2018-01-27 17:28:34
【问题描述】：

好的，例如，假设我想嵌入一个长要点，例如：

<script src="https://gist.github.com/benanne/3274371.js"></script>

要点链接：https://gist.github.com/benanne/3274371

但是，我的网页中嵌入的 Gist 太长了，我希望它显示为几行，可以通过单击等方式滚动或展开。

这可能吗？怎么样？

【问题讨论】：

你能链接到页面或把它放在一个jsfiddle吗？
添加了指向 Gist 的示例链接。此外，我想要包含 Gist 的 HTML 网页将是网站此部分的新文章：vooban.com/en/tips-articles-geek-stuff。我希望有一种解决方案可以在任何网页上运行，而不仅仅是这个。如果我不能为此使用 Gist，我可能最终会使用 Git 存储库或其他东西。

标签： html github gist

【解决方案1】：

将 gist 调用包装在一个容器中，设置样式并完成工作。

编辑刚刚注意到显示/隐藏所有内容的要求，jQuery 让这变得微不足道，你没有在问题中提到 jQuery 或 javascript，所以我想出了一个 hacky CSS/html 选项使用目标

.gistcontainer {
  max-height: 300px;
  overflow: auto;
}

.gistcontainer:target .show {display:none;}
.gistcontainer:target {max-height:none;}

<div class="gistcontainer" id="gist1">
  <a href="#gist1" class="show">More...</a>
  <script src="https://gist.github.com/benanne/3274371.js"></script>
</div>

这个SO Question 可能也很有趣，尤其是 gist 使用的 CSS 类似乎随着时间的推移发生了变化，因此“包装”解决方案可能更适合未来。

【讨论】：