hernik/blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

refactor: migrate code highlight to an extension

Browse source
This commit is contained in:
jeffreytse 2021-01-08 11:59:28 +08:00
parent fcdfc7ea09
commit c896442fcf
4 changed files with 83 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
_includes/extensions/code-highlight.html Normal file
View file

@ -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>

7
_includes/head.html
View file

@ -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>

20
_sass/yat/_base.scss
View file

@ -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;

29
assets/js/main.js
View file

@ -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);
}
});