Displaying specific GitHub gist lines in Jekyll

Question

I am trying to add specific lines of GitHub gist code in a Jekyll article. Using jekyll-gist I can embed the entire gist using the {% gist <gist_ID> %} format, however this displays the entire gist.

An alternative is to use gist-embed with HTML as follows:

<script
  type="text/javascript"
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gist-embed.min.js"
></script>

<code data-gist-id="<gist_ID>" data-gist-line="X-X" data-gist-hide-footer="true"></code>

Although this produces messy results in Jekyll with double opening brackets.

Is there a way to use a data-gist-line argument in jekyll-gist? Or are there alternatives that work well with Jekyll markdown files?

Answer 1

Albeit not the pretties solution, what works is to make a specific CSS exception for gist-embed-generated code-blocks as follows:

td:not([id^="file-"]) # removes any borders around gist's line numbers
code:not([data-gist-id]) # get's rid of double inline-code formatting brackets

A non-HTML markdown solution with jekyll-gist would be prettier, but this gets the job done with a clean output.