2014-04-09 12 views
16

वर्डप्रेस ब्लॉग में गिथब से बहुत लंबे समय तक एम्बेड करने के प्रयोजनों के लिए, मुझे कौन सा कोड ऊंचाई सेट करने की अनुमति देगा ताकि ऊर्ध्वाधर स्क्रॉल-बार उत्पन्न हो जाएं? 500px के आसपास कुछ सही होगा।गिस्ट - एक एम्बेडेड गिस्ट की ऊंचाई और चौड़ाई को सेट करने के लिए कैसे करें


संपादित: मुद्दा अब हल हो गई है, लेकिन मैं इस मुद्दे पर इतना समय बिताया है, मेरा मानना ​​है कि यह एक धागा कि इस मुद्दे के लिए समर्पित है के लिए मददगार होगा। मैंने नीचे एक उत्तर पोस्ट किया है जो काम कर रहा है।

+0

शायद @ haxan7 का उत्तर अब सही के रूप में चिह्नित किया जाना चाहिए क्योंकि मूल सही उत्तर अब बदल गया है? – starbeamrainbowlabs

+0

@starbeamrainbowlabs - मैंने अभी सत्यापित किया है कि मेरा उत्तर अभी भी 24 फरवरी, 2016 को ओएसएक्स हिम तेंदुए 10.6.8 पर फ़ायरफ़ॉक्स 44.0.2 के साथ काम करता है। – lawlist

उत्तर

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

उदाहरण: बॉयलरप्लेट वेबपेज से उधार लिया: [। जवाब पर OSX हिम तेंदुए 10.6.8 24 फरवरी, 2016 के रूप में के रूप में विज्ञापित काम करता है फ़ायरफ़ॉक्स 44.0.2 के साथ] 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> 
+0

इसे आंतरिक होने की आवश्यकता है? मैं इसे बाहरी स्टाइल शीट के रूप में काम नहीं कर सका। –

+0

@ जोश सी - वर्तमान में वेबपृष्ठों में गिस्ट्स का उपयोग करने के लिए वर्तमान सेटअप नहीं है। इस धागे में अन्य दो समाधानों को आज़माएं और देखें कि उनमें से कोई काम करता है या नहीं। शायद 1 9 अप्रैल, 2014 और वर्तमान तिथि के बीच कुछ बदल गया है। – lawlist

+0

क्षमा करें मुझे दोबारा दोहराएं। क्या इसे आंतरिक होना चाहिए? –

1

ऐसा लगता है कि ऐसा कुछ बदल गया है, इसलिए अब आपको यह करने की ज़रूरत है:

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

उपरोक्त में से कोई भी उत्तर अब काम नहीं करता है। यहां अपडेट किया गया सीएसएस है जो आवश्यक स्क्रॉलबार के साथ सही ढंग से गिस्ट को प्रदर्शित करता है। How to set custom height and width of embedded Github Gist:

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

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

उदाहरण के लिए इस ब्लॉग पोस्ट देखें।

संबंधित मुद्दे