Another quick Jekyll plugin - which creates unique IDs for your fenced code blocks so you can link to them or easily hook ClipboardJS.

A fenced code block like:

echo "wat"

will render in html as

<code id="code-1">
echo "wat"

And then you can link to it using <a href="#code-1"> or add a ClipboardJS hook using the #code-1 ID attribute.


Drop permalink-for-fenced-code-blocks.rb into your Jekyll _plugins folder. By default, you’ll also get a <button> element for each code block, that looks like:

<button class="copy-code" data-clipboard-target="#code-1">copy to clipboard</button>

which you can hook up with ClipboardJS data-clipboard-target. If you don’t want this button element, start Jekyll like this:

NO_COPY_BUTTON=1 jekyll serve -w

You should be able to see it in action in any of the above code blocks.