Gist: come impostare l'altezza e la larghezza di un Gist incorporato

Per l'incorporamento di Giste molto lunghe da Github in un blog Wordpress, quale codice mi consentirà di impostare l'altezza in modo da generare barre di scorrimento verticali? Qualcosa intorno a 500 px sarebbe perfetto.Gist: come impostare l'altezza e la larghezza di un Gist incorporato

EDIT: Il problema è ora risolto, ma ho trascorso così tanto tempo su questo tema, credo che sarebbe utile avere un thread dedicato a tale questione. Ho pubblicato una risposta qui sotto che funziona.

fonte

2014-04-09 lawlist

Forse la risposta di @haxan7 dovrebbe essere contrassegnata come corretta, considerando che la risposta corretta originale è ora cambiata? – starbeamrainbowlabs

@starbeamrainbowlabs - Ho appena verificato che la mia risposta funziona ancora a partire dal 24 febbraio 2016 con Firefox 44.0.2 su OSX Snow Leopard 10.6.8. – 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>

Esempio: pagina web Boilerplate preso in prestito da: [. La risposta funziona come pubblicizzato a partire dal 24 febbraio 2016 con Firefox 44.0.2 su 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>&#169; Wiley Publishing, 2011</p> 
<script src="https://gist.github.com/lawlist/12345678.js"></script> 
</body> 
</html>

fonte

2014-04-09 00:52:20 lawlist

Questo deve essere interno vero? Non riuscivo a farlo funzionare come foglio di stile esterno. –

@Josh C - Attualmente non ho una configurazione corrente per l'utilizzo degli elenchi nelle pagine web. Prova le altre due soluzioni in questa discussione e verifica se una di queste funzioni. Forse qualcosa è cambiato tra il 19 aprile 2014 e la data corrente. – lawlist

Mi dispiace fammi riformulare. Questo doveva essere interno? –

Sembrano aver cambiato qualcosa, quindi ora devi fare questo:

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

fonte

2015-04-21 16:14:20

Nessuna delle risposte precedenti funziona più. Ecco il CSS aggiornato che mostra l'essenza correttamente con le barre di scorrimento visibili dove necessario.

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

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

Vedi questo post del blog, ad esempio: How to set custom height and width of embedded Github Gist.

fonte

2015-12-28 18:43:31

Gist: come impostare l'altezza e la larghezza di un Gist incorporato

risposta

Problemi correlati