As CODE100 is coming to Amsterdam, we wanted an archive of the entire code puzzles we had to this point. Because the demanding situations are all on GitHub, it made sense to make use of GitHub pages for that. So I had to repair two problems:

• I sought after to have color coding of code examples just like the GitHub personal templates have.
• I sought after to have collapsible and expandable portions of the web page. I didn’t need to write an personal JavaScript answer for that.

This is how to reach each. You’ll take a look at the CODE100 puzzle archive to look this in motion.

Including supply code color coding to GitHub pages

For your `config.yml` report outline kramdown because the markdown used and rouge because the highlighter.

markdown: kramdown
highlighter: rouge

This permits you to use code fences and get color coding. You’ll upload your personal CSS to color it any means you prefer.

Including collapsible parts the use of element and abstract

The brand new(ish) HTML parts element and abstract lead to collapsible report sections. The beauty of those is they don’t want any script and paintings impartial of enter. Even higher is that the use of in-page seek additionally routinely expands sections. No less than in Chromium based totally browsers. The issue is that there’s no means in markdown to outline those sections.

GitHub lets in to make use of abstract and element as HTML within their flavour of markdown. Should you take a look at the notworking.md report within the supply repo, you’ll be able to see it running.

Then again, if you render it as GitHub Pages the content material within the `main points` remains markdown and doesn’t get rendered (even while you upload newlines). You’ll after all use HTML (as the second one demo presentations), however this defeats the aim of the use of markdown.

My workaround used to be to make use of HTML feedback and create an come with to make use of in my web page templates.

HTML feedback are nice as a result of they don’t do the rest in GitHub markdown. There appears to be no usual for Markdown feedback, in the end.

The `detail-summary.html` come with is so simple as it will get:

{% seize abstract %}<!-- abstract -->{% endcapture%}
{% seize main points %}<!-- main points -->{% endcapture%}
{% seize endsummary %}<!-- endsummary -->{% endcapture%}
{% seize enddetails %}<!-- enddetails -->{% endcapture%}

 exchange: main points, '<main points>' 
 
{{ newhtml }}

In my web page template I wish to use this as a pre-render as a substitute of merely the use of `{{ content material }}`:

{% come with detail-summary.html html=content material %}

And in my markdown recordsdata I take advantage of HTML feedback:

<!-- main points -->
<!-- abstract -->
## Resolution
<!-- endsummary -->
 
``json
 
 [
   0,0,0,121,231,143,195,118,216,
   195,54,223,195,182,216,121,231,
   143,0,0,0,3,15,30,97,155,183,
   49,153,179,1,157,187,3,207,30,
   0,0,0
 ]
``
 
Did you get it? Did you discover a higher means?
<!-- enddetails -->

This renders as a collapsed segment with `Resolution` because the abstract.

The great factor here’s that it complements steadily. Within the GitHub rendered readme it’s only a headline.

If you wish to play with this, I created a bare-bones model right here.