0

Ok, so here for example let's say I want to embed a long gist such as doing: 

<script src="https://gist.github.com/benanne/3274371.js"></script>

Link to gist: https://gist.github.com/benanne/3274371

However, the embedded Gist is too long in my webpage and I would like it to show as just a few lines that could be either scrolled or unwrapped by clicking, etc.

Is that possible? How?

jhpratt
  • 6,841
  • 16
  • 40
  • 50
Guillaume Chevalier
  • 9,613
  • 8
  • 51
  • 79
  • Can you link to the page or put it in a jsfiddle? – GarethPW Aug 19 '17 at 01:35
  • Added example link to a Gist. Also, the HTML webpage I want to include a Gist into will be a new article on this section of a website: https://vooban.com/en/tips-articles-geek-stuff/ . I would expect a solution to work on any web page rather than just this one. If I can't use a Gist for that I might end up with a Git repo or something else. – Guillaume Chevalier Aug 20 '17 at 22:39

1 Answers1

1

Wrap the gist call in a container, style that and job done.

Edit just noticed the requirement to show/hide all, jQuery makes this trivial, you haven't mentioned jQuery or javascript in your question so I've come up with a hacky CSS/html option using target

.gistcontainer {
  max-height: 300px;
  overflow: auto;
}

.gistcontainer:target .show {display:none;}
.gistcontainer:target {max-height:none;}
<div class="gistcontainer" id="gist1">
  <a href="#gist1" class="show">More...</a>
  <script src="https://gist.github.com/benanne/3274371.js"></script>
</div>

This SO Question may also be of interest, particularly the fact the CSS classes used by gist seem to have changed over time, so a "wrapped" solution may be more future proof.

Jon P
  • 19,442
  • 8
  • 49
  • 72