Chore: update highlightjs syntax (#1435)

* Chore: update highlightjs syntax
See highlightjs/highlight.js#2277
Also updates vf-component-libary to 11ty 0.12.1

tools/vf-component-library/CHANGELOG.md

@@ -1,9 +1,11 @@
-### 1.2.0
+### 1.1.0
 
 * Adds the form options as their own set of components in the list.
   * https://github.com/visual-framework/vf-core/pull/1390/files
+* Updates to use 11ty 0.12.1
+  * https://github.com/visual-framework/vf-core/pull/1435
 
-### 1.1.0
+### 1.0.24
 
 * changes the `vf-intro` so it's a white background, removes the padding.
 * changes the links in `vf-intro` to be the 'correct' buttons.

tools/vf-component-library/package.json

@@ -24,7 +24,7 @@
   ],
   "private": false,
   "dependencies": {
-    "@11ty/eleventy": "0.11.1",
+    "@11ty/eleventy": "0.12.1",
     "@visual-framework/vf-config": "^1.0.1-alpha.0",
     "@visual-framework/vf-core": "^2.2.19",
     "@visual-framework/vf-extensions": "^1.0.0-rc.0",

tools/vf-extensions/CHANGELOG.md

@@ -1,11 +1,15 @@
-# Change Log
+### 1.0.0-rc.1
 
-## 1.0.0-rc.0
+* Updates highlightjs syntax of render and codeblock tags
+  * https://github.com/visual-framework/vf-core/pull/1435
+  * https://github.com/highlightjs/highlight.js/issues/2277
+
+### 1.0.0-rc.0
 
 * Improve Eleventy-Fractal integration to avoid unnecessary Eleventy rebuilds on Sass and JS updates.
   * https://github.com/visual-framework/vf-core/pull/1309
 
-## 1.0.0-alpha.9
+### 1.0.0-alpha.9
 
 * Update documentation note on pointing to `gulp-build-search-index.js`
 * Search indexer now removes html areas wrapped in `class="vf-search-client-side--no-index"`

tools/vf-extensions/tags/codeblock.js

@@ -4,15 +4,13 @@ const hljs = require('highlight.js');
 
 // Return a block of syntax as code with style formatting
 // uses: https://highlightjs.org/
-
 // Sample:
 // {% codeblock 'html' -%}
 //   <link rel="stylesheet" href="https://dev.assets.emblstatic.net/vf/develop/css/styles.css">
 //   <script src="https://dev.assets.emblstatic.net/vf/develop/scripts/scripts.js"></script>
 // {% endcodeblock %}
 
 module.exports = function(nunjucksEngine,fractal){
-
     function codeblockExtension() {
 
         this.tags = ['codeblock'];
@@ -36,13 +34,11 @@ module.exports = function(nunjucksEngine,fractal){
           // let format = format || 'html'; // if format is not set, use "html"
           let txt = body();
           if(typeof txt == "undefined") return;
-          txt = hljs.highlight(format, txt).value;
+          txt = hljs.highlight(txt, {language: format, ignoreIllegals: true }).value;
 
           return new nunjucksEngine.runtime.SafeString(`<pre class="vf-code-example__pre"><code class="Code Code--lang-${format} vf-code-example">${txt}</code></pre>`);
         };
 
     };
-
     return new codeblockExtension();
-
 };

tools/vf-extensions/tags/render.js

@@ -61,7 +61,7 @@ module.exports = function (nunjucksEngine,fractal) {
               }
               if (highlight) {
                 const hljs = require('highlight.js');
-                html = hljs.highlight(codetype, html).value;
+                html = hljs.highlight(html, {language: codetype, ignoreIllegals: true }).value;
               }
               if (escape) {
                 // escaped by default, so just don't pass a safe string

tools/vf-frctl-extensions/CHANGELOG.md

@@ -1,3 +1,9 @@
+### 1.0.1
+
+* Updates highlightjs syntax of codeblock tag
+  * https://github.com/visual-framework/vf-core/pull/1435
+  * https://github.com/highlightjs/highlight.js/issues/2277
+
 ### 1.0.0
 
 - Initial release to be used with vf-core 2.2.0

tools/vf-frctl-extensions/codeblock.js

@@ -36,7 +36,7 @@ module.exports = function(fractal){
           // let format = format || 'html'; // if format is not set, use "html"
           let txt = body();
           if(typeof txt == "undefined") return;
-          txt = hljs.highlight(format, txt).value;
+          txt = hljs.highlight(txt, {language: format, ignoreIllegals: true }).value;
 
           return `<pre class="vf-code-example__pre"><code class="Code Code--lang-${format} vf-code-example">${txt}</code></pre>`;
         };