diff options
Diffstat (limited to '_includes/extensions')
-rw-r--r-- | _includes/extensions/code-highlight.html | 82 |
1 files changed, 82 insertions, 0 deletions
diff --git a/_includes/extensions/code-highlight.html b/_includes/extensions/code-highlight.html new file mode 100644 index 0000000..c843459 --- /dev/null +++ b/_includes/extensions/code-highlight.html @@ -0,0 +1,82 @@ +<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='false' -%} +{%- 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 -%} + +<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 handle(block) { + addLangData(block); + hljs.highlightBlock(block); + } + + for (var i = 0; i < els.length; i++) { + var el = els[i]; + handle(el); + } +}); +</script> + +<style> + /* code language badge */ + pre::before { + content: attr(data-lang); + color: #fff; + background-color: #ff4e00; + padding: 0 .5em; + border-radius: 0 2px; + text-transform: uppercase; + 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> |