How to render icon inside a code block

Hello there,

Would it be possible to render a simple icon in a block code?

More precisely it is a simple circle to explain linear code as in the following image.

The green circles with number inside.

I have the css ready, but in the <pre> tag only <span> are rendered.

The theme I am using is hydeout with

  • highlighter-rouge

Example code block

Momentary solution.

  • Create code.html
<div class="highlight">
    <pre class="code-block"><code>{{include.content}}</code></pre>
</div>
  • In your file.md put this
{% include code.html content=
'                           //this make a circle
your code here! <i class="circle-note" data-value="1"></i> 

'%}
  • Create your class with circle css style.

<i class="circle-note" data-value="1"></i>

You have no idea the rabbit hole I went down trying to help you with this and that is about the same solution I came up with. However, there is another option, but I will not say I solved the problem, but rather came up with an alternative worth investigating.

I took at look at the docs link you shared and learned they are on GitHub. Upon closer inspection, they use ASCIIDoctor (aka ASCIIDocs). It seems like a more advanced markdown language design for documentation where markdown seems to be more for just web presentation.

At any rate, it looks like the functionality for callouts is an out-of-box feature with the open source project and you can see how it works here:

https://docs.asciidoctor.org/asciidoc/latest/verbatim/callouts/

Best I can tell, there are plugins for ASCIIDocs so you can use it with Jekyll (just not GitHub Pages), but it feels like that would be a lot of work since you already have a better, more Jekyll-friendly version.

1 Like