diff options
| -rw-r--r-- | _includes/extensions/code-highlight.html | 82 | ||||
| -rw-r--r-- | _includes/head.html | 7 | ||||
| -rw-r--r-- | _sass/yat/_base.scss | 20 | ||||
| -rw-r--r-- | assets/js/main.js | 29 |
4 files changed, 83 insertions, 55 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> diff --git a/_includes/head.html b/_includes/head.html index 1ac5112..66cca12 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -7,16 +7,11 @@ <link rel="shortcut icon" href="{{ site.favicon }}"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/typeface-noto-sans@0.0.72/index.min.css"> - <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> <link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}"> <script src="{{ "/assets/js/main.js" | relative_url }}"></script> {%- feed_meta -%} {%- if jekyll.environment == 'production' and site.google_analytics -%} {%- include extensions/google-analytics.html -%} {%- endif -%} + {%- include extensions/code-highlight.html -%} </head> diff --git a/_sass/yat/_base.scss b/_sass/yat/_base.scss index 879442a..224c287 100644 --- a/_sass/yat/_base.scss +++ b/_sass/yat/_base.scss @@ -159,26 +159,6 @@ pre { position: relative; background-color: #f0f0f0; - // code language badge - &::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; - } - > code { display: inline-block; padding: 20px!important; diff --git a/assets/js/main.js b/assets/js/main.js index ff3f2a3..0e5982a 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -56,32 +56,3 @@ function smoothScrollTo(y, time) { } } -// Init highlight js -document.addEventListener('DOMContentLoaded', function(event) { - var els = document.querySelectorAll('pre code') - function handle(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); - hljs.highlightBlock(block); - } - for (var i = 0; i < els.length; i++) { - var el = els[i]; - handle(el); - } -}); |