adam/wp-73k
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

code highlighting improvements including inline code

Browse source
This commit is contained in:
Adam Piontek 2021-07-10 10:24:05 -04:00
parent d6d22db0a7
commit 096ce5f351
9 changed files with 108 additions and 46 deletions

40
assets/css/_code-highlight.scss Normal file
View file

@ -0,0 +1,40 @@
/*
* Code syntax highlighting
* <pre><code> highlighting is done server-side
* by plugin 'Syntax-highlighting Code Block'
* url: https://wordpress.org/plugins/syntax-highlighting-code-block/
*
* <code> inline highlighting done client-side
* by highlight.js in main.js, where languages
* have to be imported & enabled to work for inline
*/
@import '../../node_modules/highlight.js/scss/base16/eighties.scss';
.wp-block-code {
.shcb-language {
@extend .d-none;
}
}
.hljs {
background-color: #1c1c1c;
color: #cacaca;
}
pre, code, .font-monospace {
font-family: $font-family-monospace;
font-weight: 300;
font-size: 15px;
}
pre code.hljs {
padding: 0.4rem 0.75rem;
border-radius: .5em;
white-space: unset;
overflow-wrap: unset;
}
code {
@extend .hljs;
}
p code.hljs, p code, li code {
padding: .2em .4em .1em;
border-radius: .25em;
}

28
assets/css/app.scss
View file

@ -13,32 +13,8 @@
/* Navbar custom styling */
@import "nav-bar-help";
/*
* Code syntax highlighting
* Actual highlighting is done by plugin
* "Syntax-highlighting Code Block (with Server-side Rendering)"
* url: https://wordpress.org/plugins/syntax-highlighting-code-block/
*
* highlighting style is set in classes.php by adding filter to
* 'syntax_highlighting_code_block_style'
*/
pre, code, .font-monospace {
font-family: $font-family-monospace;
font-weight: 300;
font-size: 15px;
}
code.hljs {
padding: 0.4rem 0.75rem;
border-radius: .5em;
// background-color: #1c1c1c;
}
p code, li code {
background-color: #1d1f21;
color: #c5c8c6;
padding: .2em .4em .1em;
border-radius: .25em;
display: inline;
}
/* Code block & inline syntax highlighting */
@import "code-highlight";
/* main */
html,

28
assets/js/main.js
View file

@ -36,3 +36,31 @@ import 'bootstrap/js/dist/dropdown';
// import navbar burger code
import "./_hamburger-helper";
// import highlight.js for handling inline code
import hljs from '../../node_modules/highlight.js/lib/core';
import markdown from '../../node_modules/highlight.js/lib/languages/markdown';
hljs.registerLanguage('markdown', markdown);
import javascript from '../../node_modules/highlight.js/lib/languages/javascript';
hljs.registerLanguage('javascript', javascript);
import powershell from '../../node_modules/highlight.js/lib/languages/powershell';
hljs.registerLanguage('powershell', powershell);
import bash from '../../node_modules/highlight.js/lib/languages/bash';
hljs.registerLanguage('bash', bash);
import shell from '../../node_modules/highlight.js/lib/languages/shell';
hljs.registerLanguage('shell', shell);
import csharp from '../../node_modules/highlight.js/lib/languages/csharp';
hljs.registerLanguage('csharp', csharp);
import python from '../../node_modules/highlight.js/lib/languages/python';
hljs.registerLanguage('python', python);
import php from '../../node_modules/highlight.js/lib/languages/php';
hljs.registerLanguage('php', php);
import elixir from '../../node_modules/highlight.js/lib/languages/elixir';
hljs.registerLanguage('elixir', elixir);
// highlight any code blocks tagged with class 'to-highlight'
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('code.to-highlight').forEach((el) => {
hljs.highlightElement(el);
});
});