Gist - 如何設置嵌入Gist的高度和寬度

爲了從Github中嵌入非常長的Gist在Wordpress博客中，什麼代碼將允許我設置高度以便生成垂直滾動條？ 500px左右的東西將是完美的。Gist - 如何設置嵌入Gist的高度和寬度

編輯：這個問題現在已經解決了，但我花了這麼多時間在這個問題上，我相信這將是有幫助的專用於該問題的線索。我已經在下面發佈了一個答案，正在工作。

2014-04-09 lawlist

也許@ haxan7的答案現在應該被標記爲正確的答案，因爲原來的正確答案現在已經改變了？ – starbeamrainbowlabs

@starbeamrainbowlabs - 我剛剛證實，截至2016年2月24日，OSX Snow Leopard 10.6.8上的Firefox 44.0.2仍然可以正常工作。 – lawlist

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

例：樣板網頁從借來的：[答案工程2016 2月24日，作爲標榜與Firefox 44.0.2在OSX雪豹10.6.8] http://www.dummies.com/how-to/content/a-sample-web-page-in-html.html

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

來源

2014-04-09 00:52:20 lawlist

這需要是內部的嗎？我無法將其作爲外部樣式表工作。 –

@Josh C - 我目前沒有在網頁中使用gist的當前設置。嘗試在這個線程中的其他兩個解決方案，看看他們中的一個是否工作。 2014年4月19日至今的日期可能有所不同。 – lawlist

不好意思讓我改說一下。這是否需要內部？ –

他們似乎已經改變了一些東西，所以現在你需要這樣做：

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

來源

2015-04-21 16:14:20

上述答案都不再有效。這裏是更新後的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。

來源

2015-12-28 18:43:31

Gist - 如何設置嵌入Gist的高度和寬度

回答

相關問題