blog/_includes/extensions/code-highlight.html

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/highlight.min.js"></script>
<!-- and it's easy to individually load additional languages -->
<script charset="UTF-8"
        src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/languages/go.min.js"></script>

{%- assign name = 'code_badge.enabled' -%}
{%- include functions.html func='get_value' default='true' -%}
{%- assign badge_enabled = return -%}

{%- assign name = 'code_badge.color' -%}
{%- include functions.html func='get_value' default='#fff' -%}
{%- assign badge_color = return -%}

{%- assign name = 'code_badge.background_color' -%}
{%- include functions.html func='get_value' default='#ff4e00' -%}
{%- assign badge_background_color = return -%}

{%- assign name = 'code_badge.text_transform' -%}
{%- include functions.html func='get_value' default='uppercase' -%}
{%- assign badge_text_transform = return -%}

{{ badge_enabled }}
{{ badge_color }}
{{ badge_background_color }}
{{ badge_text_transform }}

<script>
// Init highlight js
document.addEventListener('DOMContentLoaded', function(event) {
  var els = document.querySelectorAll('pre code')

  function addLangData(block) {
    var outer = block.parentElement.parentElement.parentElement;
    var lang = block.getAttribute('data-lang');
    for (var i = 0; i < outer.classList.length; i++) {
      var cls = outer.classList[i];
      if (cls.startsWith('language-')) {
        lang = cls;
        break;
      }
    }
    if (!lang) {
      cls = block.getAttribute('class');
      lang = cls ? cls.replace('hljs ', '') : '';
    }
    if (lang.startsWith('language-')) {
      lang = lang.substr(9);
    }
    block.setAttribute('class', 'hljs ' + lang);
    block.parentNode.setAttribute('data-lang', lang);
  }

  function addBadge(block) {
    var enabled = ('{{ badge_enabled }}' || 'true').toLowerCase();
    if (enabled == 'true') {
      var pre = block.parentElement;
      pre.classList.add('badge');
    }
  }

  function handle(block) {
    addLangData(block);
    addBadge(block)
    hljs.highlightBlock(block);
  }

  for (var i = 0; i < els.length; i++) {
    var el = els[i];
    handle(el);
  }
});
</script>

<style>
  /* code language badge */
  pre.badge::before {
    content: attr(data-lang);
    color: {{badge_color}};
    background-color: {{badge_background_color}};
    padding: 0 .5em;
    border-radius: 0 2px;
    text-transform: {{badge_text_transform}};
    text-align: center;
    min-width: 32px;
    display: inline-block;
    position: absolute;
    right: 0;
  }

  /* fix wrong badge display for firefox browser */
  code > table pre::before {
    display: none;
  }
</style>