发表新帖
发表新帖

Gist — how to set the height and width of an embedded Gist

后端 未结
关注
4 811
一生所求
一生所求 2020-12-28 16:54

For purposes of embedding very long Gists from Github in a Wordpress blog, what code will permit me to set the height so that vertical scroll-bars are generated? Something

相关标签:
4条回答
  • 傲寒
    2020-12-28 16:58 
    <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>

    Example: Boilerplate webpage borrowed from : http://www.dummies.com/how-to/content/a-sample-web-page-in-html.html [The answer works as advertised as of February 24, 2016 with Firefox 44.0.2 on OSX Snow Leopard 10.6.8.] 

    <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>
    0 讨论(0)
  • 误落风尘
    2020-12-28 17:07

    None of the above answers work anymore. Here is the updated CSS that displays the gist correctly with visible scrollbars where needed.

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

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

    See this blog post for example: How to set custom height and width of embedded Github Gist.

    0 讨论(0)
  • 南旧
    2020-12-28 17:19

    If your gist is inside an iFrame, which is generated and you can't access since it's and embedded HTML, you might want to take a look at this.

    0 讨论(0)
  • 灰色年华
    2020-12-28 17:22

    They seem to have changed something, so now you need to do this:

    <style type="text/css"> .gist {width:500px; overflow:auto}  .gist .file-data {max-height: 500px;max-width: 500px;} </style>
    0 讨论(0)
 看不清?
提交回复
热议问题