# How to render icon inside a code block **URL:** \ **Category:** Help\ **Created:** [September 10, 2021, 6:04pm UTC](https://talk.jekyllrb.com/t/how-to-render-icon-inside-a-code-block/6408 "2021-09-10T18:04:05Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![rucko24](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rucko24/32/2901_2.png) [@rucko24](https://talk.jekyllrb.com/u/rucko24)\ **Post date:** [September 10, 2021, 6:04pm UTC](https://talk.jekyllrb.com/t/how-to-render-icon-inside-a-code-block/6408/1 "2021-09-10T18:04:05Z")
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.** ![image](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/e/e414052a680c090227c85d8b2d6c3f7c40b93f66.png) I have the css ready, but in the `
` tag only `` are rendered.

The theme I am using is **hydeout** with

- highlighter-rouge

**Example code block**

- [Reactor Netty Reference Guide](https://projectreactor.io/docs/netty/release/reference/index.html#response-timeout)

---




**Author:** ![rucko24](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rucko24/32/2901_2.png) [@rucko24](https://talk.jekyllrb.com/u/rucko24)\
**Post date:** [September 13, 2021, 7:00pm UTC](https://talk.jekyllrb.com/t/how-to-render-icon-inside-a-code-block/6408/2 "2021-09-13T19:00:59Z")




Momentary solution.

- Create code.html

```auto


    
{{include.content}}




```

- In your file.md put this

```auto
{% include code.html content=
' //this make a circle
your code here!  

'%}

```

- Create your class with circle css style.

``

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/f/f1494c8155e3ad7acdff4b556f9aa6672adc5104.png)

---




**Author:** ![BillRaymond](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/billraymond/32/5963_2.png) [@BillRaymond](https://talk.jekyllrb.com/u/BillRaymond)\
**Post date:** [September 13, 2021, 8:41pm UTC](https://talk.jekyllrb.com/t/how-to-render-icon-inside-a-code-block/6408/3 "2021-09-13T20:41:48Z")




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/](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.

---




**Author:** ![rucko24](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rucko24/32/2901_2.png) [@rucko24](https://talk.jekyllrb.com/u/rucko24)\
**Post date:** [November 16, 2021, 8:19pm UTC](https://talk.jekyllrb.com/t/how-to-render-icon-inside-a-code-block/6408/4 "2021-11-16T20:19:33Z")




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

- [Jekyll Actions · Actions · GitHub Marketplace · GitHub](https://github.com/marketplace/actions/jekyll-actions)

---




**Author:** ![BillRaymond](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/billraymond/32/5963_2.png) [@BillRaymond](https://talk.jekyllrb.com/u/BillRaymond)\
**Post date:** [November 16, 2021, 9:37pm UTC](https://talk.jekyllrb.com/t/how-to-render-icon-inside-a-code-block/6408/5 "2021-11-16T21:37:19Z")




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.

---




**Author:** ![rucko24](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rucko24/32/2901_2.png) [@rucko24](https://talk.jekyllrb.com/u/rucko24)\
**Post date:** [November 16, 2021, 9:53pm UTC](https://talk.jekyllrb.com/t/how-to-render-icon-inside-a-code-block/6408/6 "2021-11-16T21:53:09Z")




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

---




**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [November 17, 2021, 4:52am UTC](https://talk.jekyllrb.com/t/how-to-render-icon-inside-a-code-block/6408/7 "2021-11-17T04:52:43Z")




> [@BillRaymond](#):
>
> build Jekyll with an Action

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.

> **[GitHub - MichaelCurrin/jekyll-gh-actions-quickstart: Starter template for a...](https://github.com/MichaelCurrin/jekyll-gh-actions-quickstart)**
>
> Starter template for a Jekyll 4 site - deployed with GH Actions and GH Pages 🧪 🎬 🚀 - MichaelCurrin/jekyll-gh-actions-quickstart