code highlighting improvements including inline code

2021-07-10 10:24:05 -04:00 · 2021-07-10 10:24:05 -04:00 · 096ce5f351
parent d6d22db0a7
commit 096ce5f351
9 changed files with 108 additions and 46 deletions
--- a/README.md
+++ b/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
-```
-
-Clean node_modules testing:
-
-```bash
+# if cleaning node_modules & dist:
 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:
--- a/TODO.md
+++ b/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
- [ ] Recipes & trip logs w/images? Videos?
+- [ ] SYNTAX HIGHLIGHTING PLUGIN
+  - [ ] 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?
--- a/assets/css/_code-highlight.scss
+++ b/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;
+}
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@ -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,
--- a/assets/js/main.js
+++ b/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);
+  });
+});
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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": {
--- a/src/classes.php
+++ b/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(
-	'syntax_highlighting_code_block_style',
-	function() {
-		// return 'tomorrow-night-eighties';
-		return 'tomorrow-night';
-	}
-);
+add_filter('syntax_highlighting_code_block_styling', '__return_false');


 /**
@ -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);
 });
--- a/webpack.config.js
+++ b/webpack.config.js
@ -180,6 +180,7 @@ function getCSSWhitelistPatterns() {
    /^(.*)?-?paged(-.*)?$/,
    /^depth(-.*)?$/,
    /^children(-.*)?$/,
+    /^hljs(-.*)?$/,
    /^tek(-.*)?$/,
  ];
 }