Dla celów osadzania bardzo długich Gistów z Github na blogu Wordpress, jaki kod pozwoli mi ustawić wysokość tak, aby wygenerować pionowe paski przewijania? Coś około 500px byłoby idealne.Gist - jak ustawić wysokość i szerokość wbudowanego Gista?
EDIT: Problem został rozwiązany, ale spędziłem tyle czasu w tej kwestii, uważam, że byłoby pomocne mieć wątek poświęcony temu zagadnieniu. Zamieszczam poniżej odpowiedź, która działa.
<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>
Przykład: Gotowa strona zapożyczone z: [. Odpowiedź działa jak reklamowane jako od 24 lutego 2016 roku z Firefox 44.0.2 na OSX Snow Leopard 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>© Wiley Publishing, 2011</p>
<script src="https://gist.github.com/lawlist/12345678.js"></script>
</body>
</html>
To musi być wewnętrzne, prawda? Nie mogłem go uruchomić jako zewnętrznego arkusza stylów. –
@Josh C - Obecnie nie mam aktualnej konfiguracji użycia kropli na stronach internetowych. Wypróbuj pozostałe dwa rozwiązania w tym wątku i sprawdź, czy jeden z nich działa. Być może coś się zmieniło między 19 kwietnia 2014 r. A bieżącą datą. – lawlist
Przepraszam, przepraszam. Czy to musi być wewnętrzne? –
Wygląda na to, że coś się zmieniło, więc teraz musisz to zrobić:
<style type="text/css"> .gist {width:500px; overflow:auto} .gist .file-data {max-height: 500px;max-width: 500px;} </style>
Żadna z powyższych odpowiedzi nie działa. Oto zaktualizowany CSS, który wyświetla treść poprawnie z widocznymi paskiem przewijania w razie potrzeby.
.gist {
max-width:350px;
overflow:auto;
}
.gist .blob-wrapper.data {
max-height:200px;
overflow:auto;
}
Zobacz ten wpis na blogu na przykład: How to set custom height and width of embedded Github Gist.
Być może odpowiedź @ haxan7 powinna być teraz oznaczona jako poprawna, biorąc pod uwagę, że oryginalna prawidłowa odpowiedź została zmieniona? – starbeamrainbowlabs
@starbeamrainbowlabs - Właśnie sprawdziłem, że moja odpowiedź nadal działa od 24 lutego 2016 roku z Firefoksem 44.0.2 na OS X Snow Leopard 10.6.8. – lawlist