CODEWITHSUNDEEP
htmlgithubgist
Guillaume Chevalier
Guillaume Chevalier

Reputation: 10948

Embed a short compact version of a Gist in HTML

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?

Upvotes: 0

Views: 1209

Answers (1)

Jon P
Jon P

Reputation: 19797

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.

Upvotes: 1

Related Questions