Hugo converts files written in Markdown to HTML, but sometimes you may need to show some raw HTML for a specific purpose. I recently passed a Microsoft certification (I know, check me out) and I was keen to add my Acclaim badge to the about page on my site. I knew this would be possible, but when I initially tried it, it was horrible. It didn’t respect the HTML and just came out as text. Luckily I found this amazing article by Ana Ulin.

It goes through how to add a short code for HTML which makeHugorespect the HTML you add. The post is really clear so I’m not going to repeat it, but I just thought I’d show how I added the badge.

How to add the Acclaim digital badge

So first you need to log into the Acclaim website, you should see your earned badges when you log in, if not you will need to follow the process of claiming your new badge.

Click on the badge you want to put on your site and then click the share button

You’ll be presented with a few options, we want the code </> option. You’ll notice in the code window, they provide a handy Copy button. Click it, so you have the code in your clipboard

Now we need to paste the html code into our post and wrap it with the short code fields, like in the below example

{{
< rawhtml >
}}

<div data-iframe-width="150" data-iframe-height="270" data-share-badge-id="1fcfc4d4-xxxx-xxxx-xxxx-37dd873f50a6" data-share-badge-host="https://www.youracclaim.com"></div><script type="text/javascript" async src="//cdn.youracclaim.com/assets/utilities/embed.js"></script>

{{
< /rawhtml >
}}

I have split the short codes over 3 lines, otherwiseHugowould try and render them (even though its in a code block).

You can add as many badges as you want. I added two simply by copying the two html script blocks and placing them one after the other. I think it looks cool, I just need to earn more now 🐱‍💻