Search code examples
gist

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


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 around 500px would be perfect.


EDIT: The issue is now resolved, but I spent so much time on this issue, I believe it would be helpful to have a thread dedicated to that issue. I've posted an answer below that is working.


Solution

  • <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>