In this post, I am going to show you how to embed GitHub code snippets in the Hugo Template blog post in 5 simple steps.

In Hugo Template, we enclose code snippet inside backtick ```

Generally, it doesn’t highlight the syntax based on what programming language the snippet/code is written in.

GitHub Gist code snippets helps us to embed pre-formatted code in markdown. It’s best and simplest way to embed pre-formatted code in markdown. It helps us to highlight the syntax based on what programming language the snippet is written in.

YouTube Video:

Here are the 5 simple steps :

Step #1: Get your source code

Either you can copy raw code form your GitHub repository or you can directly copy code form your code editor.

Step #2: Create Secret Gist form

In this step, you need to go to After browsing the URL, you will see form to input file name and big text box for code. Input file name and paste your code in the text box.

I am copying code form my GitHub and giving fine name Convert.php

How to Embed Github Code Snippets in Hugo Template

Step #3: Get Embed URL From Gist

After you hit the create secret gist. You will see below screen. You can get the embed your form this UI.

<script src=""></script>

The above url has two parts :

  1. URl :
  2. At the end JS file : 0c318ba491f926abbb194eb62ebeacdf.js

gist github embed url

Step #4: Create shortcodes

In your hugo project, inside layouts/shortcodes folder you need to create shortcodes file. My file name will be github-code-snippets.html. In this file you can put below code and I will replace JS file string with {{ index .Params 0 }} in the embed script. You can do similar in your embed script.

<script src="{{ index .Params 0 }}.js"></script>

Step #5: Embed in Post

Finally, now you can embed the shortcodes for your snippets.

{{ <github-code-snippets 0c318ba491f926abbb194eb62ebeacdf> }}

Above code has two parts :

  1. Shortcode file name without extension : github-code-snippets
  2. JS file string form embed script : 0c318ba491f926abbb194eb62ebeacdf

Reward for your hard work is here. Now, you can see beautiful code with highlighted syntax.

Below code snippets with highlighted syntax is the output :