Gist -- 如何设置嵌入式 Gist 的高度和宽度答案

【问题标题】：Gist -- how to set the height and width of an embedded GistGist -- 如何设置嵌入式 Gist 的高度和宽度
【发布时间】：2018-10-26 08:31:04
【问题描述】：

为了在 Wordpress 博客中嵌入来自 Github 的非常长的 Gists，哪些代码允许我设置高度以便生成垂直滚动条？ 500px 左右的就完美了。

编辑：这个问题现在已经解决了，但是我在这个问题上花了很多时间，我相信有一个专门讨论这个问题的线程会很有帮助。我在下面发布了一个有效的答案。

【问题讨论】：

考虑到原来的正确答案现在已经改变，也许@haxan7 的答案现在应该被标记为正确答案？
@starbeamrainbowlabs -- 我刚刚验证我的答案在 2016 年 2 月 24 日仍然适用于 OSX Snow Leopard 10.6.8 上的 Firefox 44.0.2。

标签： gist

【解决方案1】：

<style type="text/css">
  .gist {width:500px !important;}
  .gist-file
  .gist-data {max-height: 500px;max-width: 500px;}
</style>

<script src="https://gist.github.com/user-name/123456789.js"></script>

示例：样板网页借用自：http://www.dummies.com/how-to/content/a-sample-web-page-in-html.html [答案与 2016 年 2 月 24 日所宣传的一样，在 OSX Snow Leopard 10.6.8 上使用 Firefox 44.0.2。]

<html>
<!-- Text between angle brackets is an HTML tag and is not displayed.
Most tags, such as the HTML and /HTML tags that surround the contents of
a page, come in pairs; some tags, like HR, for a horizontal rule, stand 
alone. Comments, such as the text you're reading, are not displayed when
the Web page is shown. The information between the HEAD and /HEAD tags is 
not displayed. The information between the BODY and /BODY tags is displayed.-->
<head>
<title>Enter a title, displayed at the top of the window.</title>
</head>
<!-- The information between the BODY and /BODY tags is displayed.-->
<style type="text/css">
  .gist {width:300px !important;}
  .gist-file
  .gist-data {max-height: 300px;max-width: 300px;}
</style>
<body>
<h1>Enter the main heading, usually the same as the title.</h1>
<p>Be <b>bold</b> in stating your key points. Put them in a list: </p>
<ul>
<li>The first item in your list</li>
<li>The second item; <i>italicize</i> key words</li>
</ul>
<p>Improve your image by including an image. </p>
<p><img src="http://www.mygifs.com/CoverImage.gif" alt="A Great HTML Resource"></p>
<p>Add a link to your favorite <a href="http://www.dummies.com/">Web site</a>.
Break up your page with a horizontal rule or two. </p>
<hr>
<p>Finally, link to <a href="page2.html">another page</a> in your own Web site.</p>
<!-- And add a copyright notice.-->
<p>&#169; Wiley Publishing, 2011</p>
<script src="https://gist.github.com/lawlist/12345678.js"></script>
</body>
</html>

【讨论】：

这需要是内部的吧？我无法让它作为外部样式表工作。
@Josh C -- 我目前没有在网页中使用 gists 的当前设置。尝试此线程中的其他两种解决方案，看看其中一种是否有效。 2014 年 4 月 19 日和当前日期之间可能发生了一些变化。
对不起，让我换个说法。这需要是内部的吗？
@Josh C -- 我将样式代码 above 放在 html 网页中的 <body> 中，并将脚本代码放在首选位置 within html 网页的<body>。它可能有其他用途，但我不记得我是否尝试过其他方式来做到这一点。我刚刚在 OSX Snow Leopard 10.6.8 上使用 Firefox 44.0.2 进行了尝试，答案与宣传的一样。
谢谢。我可能会做同样的事情，并将其放在我的头文件中。这个答案仍然有效。虽然没有水平滚动；哈桑的回答可以对此有所帮助。

【解决方案2】：

以上答案都不再有效。这是更新后的 CSS，可在需要时使用可见的滚动条正确显示要点。

.gist {
   max-width:350px;
   overflow:auto;
}

.gist .blob-wrapper.data {
   max-height:200px;
   overflow:auto;
}

请参阅此博客文章，例如： How to set custom height and width of embedded Github Gist.

【讨论】：

【解决方案3】：

他们似乎改变了一些东西，所以现在你需要这样做：

<style type="text/css"> .gist {width:500px; overflow:auto}  .gist .file-data {max-height: 500px;max-width: 500px;} </style>

【讨论】：

【解决方案4】：

如果您的 gist 位于 iFrame 中，该 iFrame 已生成并且您无法访问，因为它是嵌入式 HTML，您可能需要查看 this。

【讨论】：