code highlighting improvements including inline code

README.md

@@ -21,23 +21,23 @@ The theme uses Webpack as its bundler with ES6 modules for JavaScript files. It
 
 ## 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
 npm i -g sass-migrator
 HBPATH="./node_modules/hamburgers/_sass/hamburgers/"
 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/"
 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 under `assets/_root` should be served by nginx with location config like so:

TODO.md

@@ -31,8 +31,16 @@
 - [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 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
 - [ ] ...
 - [ ] profit!
@@ -47,6 +55,7 @@
   - [ ] indieweb stuff?
 - [ ] use wordpress for filebrowser login auth?
 - [ ] 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?
 - [ ] other ideas?

assets/css/_code-highlight.scss

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

assets/css/app.scss

@@ -13,32 +13,8 @@
 /* Navbar custom styling */
 @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 */
 html,

assets/js/main.js

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

package-lock.json

@@ -17,6 +17,7 @@
         "@popperjs/core": "^2.x",
         "bootstrap": "^5.x",
         "hamburgers": "^1.x",
+        "highlight.js": "^11.1.0",
         "regenerator": "^0.14.7"
       },
       "devDependencies": {
@@ -4801,6 +4802,14 @@
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
       "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": {
       "version": "2.8.9",
       "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==",
       "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": {
       "version": "2.8.9",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",

package.json

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

src/classes.php

@@ -67,15 +67,9 @@ add_filter( 'wp_nav_menu_objects', function($items, $args) {
 }, 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 ) {
   return '\\';
 } );
-
 add_filter('document_title_parts', function ($title) {
   return (is_home() || is_front_page()) ? $title : array_reverse($title);
 });

webpack.config.js

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