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

Hi @BigRaymond

Thanks for the help, that’s right, the magic is to use asiidoc, this information is also interesting, because continuous integration is needed but not github deployment, to support .adoc files

Thanks for the follow-up. Yes, that is correct. You can use GitHub Pages, but you will need to build Jekyll with an Action. I started doing that with my site this year and like the solution quite a bit. I have not used AsciiDocs, but I may want to look into that for a project I will be starting next year.

1 Like

Me too @BillRaymond i have a jekyll site with .md format.

I like to recommend this template which uses generic Actions to build a site. It makes it easy to customize, reuse for non-Jekyll sites, and also just see what is going on, compared with using a specialized Jekyll GH Pages Action.