code highlighting improvements including inline code

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

View file

@ -21,23 +21,23 @@ The theme uses Webpack as its bundler with ES6 modules for JavaScript files. It
## Hamburgers ## Hamburgers
The sass for the hamburgers package throws warnings unless fixed: The sass for the hamburgers package throws warnings unless fixed, so do this before first `npm run` attempts:
```bash ```bash
npm i -g sass-migrator npm i -g sass-migrator
HBPATH="./node_modules/hamburgers/_sass/hamburgers/" HBPATH="./node_modules/hamburgers/_sass/hamburgers/"
find ${HBPATH} -type f | while read f; do npx sass-migrator division -d ${f}; done find ${HBPATH} -type f | while read f; do npx sass-migrator division -d ${f}; done
``` # if cleaning node_modules & dist:
Clean node_modules testing:
```bash
rm -rf node_modules && rm -rf dist && npm i && HBPATH="./node_modules/hamburgers/_sass/hamburgers/" rm -rf node_modules && rm -rf dist && npm i && HBPATH="./node_modules/hamburgers/_sass/hamburgers/"
find ${HBPATH} -type f | while read f; do npx sass-migrator division -d ${f}; done find ${HBPATH} -type f | while read f; do npx sass-migrator division -d ${f}; done
NODE_ENV=development node --trace-deprecation node_modules/webpack/bin/webpack.js
NODE_ENV=production node --trace-deprecation node_modules/webpack/bin/webpack.js
``` ```
## Syntax Highlighting
This theme supports server-side syntax highlighting via the [Syntax-highlighting Code Block](https://wordpress.org/plugins/syntax-highlighting-code-block/) plugin. In `classes.php` the plugin-provided styling is disabled, and the theme incorporates sass styling from the highlight.js node package, imported in `_code-highlight.scss` (to change the highlight style, change the import there).
However, the plugin doesn't support highlighting inline code, but I like that option, so the theme also incorporates highlight.js in `main.js` with a DOM Loaded action to highlight any code blocks tagged with the class `to-highlight` (must also have `language-$LANG` class) -- this should be done in WordPress in the editor, where you can edit a paragraph as HTML and add the classes (e.g. `<code class="to-highlight language-python">`).
## Static Files via nginx ## Static Files via nginx
Static files under `assets/_root` should be served by nginx with location config like so: Static files under `assets/_root` should be served by nginx with location config like so:

15
TODO.md
View file

@ -31,8 +31,16 @@
- [X] ~~*re-do Front Page as content from within WP?*~~ [2021-07-09] - [X] ~~*re-do Front Page as content from within WP?*~~ [2021-07-09]
- [X] ~~*using 'featured image' or some such?*~~ [2021-07-09] - [X] ~~*using 'featured image' or some such?*~~ [2021-07-09]
- [X] ~~*using shortcode for social icons?*~~ [2021-07-09] - [X] ~~*using shortcode for social icons?*~~ [2021-07-09]
- [ ] figure out Search - [ ] SYNTAX HIGHLIGHTING PLUGIN
- [ ] Recipes & trip logs w/images? Videos? - [ ] wrapping lines now? how to ensure nowrap?
- [ ] add remaining content
- [ ] blog pagination?
- [ ] footer 'sidebar' (blog-only)?
- [ ] date archives?
- [ ] tag archives?
- [ ] search?
- [ ] meta? etc?
- [ ] search field up top somewhere?
- [ ] double-check npm run build output to ensure it's all working - [ ] double-check npm run build output to ensure it's all working
- [ ] ... - [ ] ...
- [ ] profit! - [ ] profit!
@ -47,6 +55,7 @@
- [ ] indieweb stuff? - [ ] indieweb stuff?
- [ ] use wordpress for filebrowser login auth? - [ ] use wordpress for filebrowser login auth?
- [ ] Portfolio: just a blog category view of project blog posts? - [ ] Portfolio: just a blog category view of project blog posts?
- [ ] add recipe posts - [ ] figure out Search
- [ ] Recipes & trip logs w/images? Videos?
- [ ] add some code/notes posts of things I've learned? - [ ] add some code/notes posts of things I've learned?
- [ ] other ideas? - [ ] other ideas?

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

View file

@ -13,32 +13,8 @@
/* Navbar custom styling */ /* Navbar custom styling */
@import "nav-bar-help"; @import "nav-bar-help";
/* /* Code block & inline syntax highlighting */
* Code syntax highlighting @import "code-highlight";
* 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;
}
/* main */ /* main */
html, html,

View file

@ -36,3 +36,31 @@ import 'bootstrap/js/dist/dropdown';
// import navbar burger code // import navbar burger code
import "./_hamburger-helper"; 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);
});
});

14
package-lock.json generated
View file

@ -17,6 +17,7 @@
"@popperjs/core": "^2.x", "@popperjs/core": "^2.x",
"bootstrap": "^5.x", "bootstrap": "^5.x",
"hamburgers": "^1.x", "hamburgers": "^1.x",
"highlight.js": "^11.1.0",
"regenerator": "^0.14.7" "regenerator": "^0.14.7"
}, },
"devDependencies": { "devDependencies": {
@ -4801,6 +4802,14 @@
"integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==", "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
"dev": true "dev": true
}, },
"node_modules/highlight.js": {
"version": "11.1.0",
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.1.0.tgz",
"integrity": "sha512-X9VVhYKHQPPuwffO8jk4bP/FVj+ibNCy3HxZZNDXFtJrq4O5FdcdCDRIkDis5MiMnjh7UwEdHgRZJcHFYdzDdA==",
"engines": {
"node": ">=12.0.0"
}
},
"node_modules/hosted-git-info": { "node_modules/hosted-git-info": {
"version": "2.8.9", "version": "2.8.9",
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
@ -13551,6 +13560,11 @@
"integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==", "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
"dev": true "dev": true
}, },
"highlight.js": {
"version": "11.1.0",
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.1.0.tgz",
"integrity": "sha512-X9VVhYKHQPPuwffO8jk4bP/FVj+ibNCy3HxZZNDXFtJrq4O5FdcdCDRIkDis5MiMnjh7UwEdHgRZJcHFYdzDdA=="
},
"hosted-git-info": { "hosted-git-info": {
"version": "2.8.9", "version": "2.8.9",
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",

View file

@ -19,6 +19,7 @@
"@popperjs/core": "^2.x", "@popperjs/core": "^2.x",
"bootstrap": "^5.x", "bootstrap": "^5.x",
"hamburgers": "^1.x", "hamburgers": "^1.x",
"highlight.js": "^11.1.0",
"regenerator": "^0.14.7" "regenerator": "^0.14.7"
}, },
"devDependencies": { "devDependencies": {

View file

@ -67,15 +67,9 @@ add_filter( 'wp_nav_menu_objects', function($items, $args) {
}, 1, 2 ); }, 1, 2 );
/** /**
* Filter for syntax-highlighting-code-block plugin style theme * Filter to remove syntax-highlighting-code-block plugin styles from frontend
*/ */
add_filter( add_filter('syntax_highlighting_code_block_styling', '__return_false');
'syntax_highlighting_code_block_style',
function() {
// return 'tomorrow-night-eighties';
return 'tomorrow-night';
}
);
/** /**
@ -84,7 +78,6 @@ add_filter(
add_filter( 'document_title_separator', function ( $separator ) { add_filter( 'document_title_separator', function ( $separator ) {
return '\\'; return '\\';
} ); } );
add_filter('document_title_parts', function ($title) { add_filter('document_title_parts', function ($title) {
return (is_home() || is_front_page()) ? $title : array_reverse($title); return (is_home() || is_front_page()) ? $title : array_reverse($title);
}); });

View file

@ -180,6 +180,7 @@ function getCSSWhitelistPatterns() {
/^(.*)?-?paged(-.*)?$/, /^(.*)?-?paged(-.*)?$/,
/^depth(-.*)?$/, /^depth(-.*)?$/,
/^children(-.*)?$/, /^children(-.*)?$/,
/^hljs(-.*)?$/,
/^tek(-.*)?$/, /^tek(-.*)?$/,
]; ];
} }