summaryrefslogtreecommitdiff
path: root/_includes
diff options
context:
space:
mode:
authorjeffreytse <jeffreytse.mail@gmail.com>2021-01-08 11:59:28 +0800
committerjeffreytse <jeffreytse.mail@gmail.com>2021-01-08 12:04:25 +0800
commitc896442fcf46fe12fc1c8b811ddc71f8127e8509 (patch)
treec912e7abd55dc3a23ae2f1f553ddd3e4a5768489 /_includes
parentfcdfc7ea09f0e0d191772650b4f197aa8f56355a (diff)
refactor: migrate code highlight to an extension
Diffstat (limited to '_includes')
-rw-r--r--_includes/extensions/code-highlight.html82
-rw-r--r--_includes/head.html7
2 files changed, 83 insertions, 6 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>