Switch to extensions for new marked package

marked-gfm-heading-id
marked-highlight

gulpfile.js

@@ -1,16 +1,17 @@
 // node-slate
 
 // Imports
-import { marked }   from 'marked';
-// import { gfmHeadingId } from "marked-gfm-heading-id";
+import { gfmHeadingId } from 'marked-gfm-heading-id';
+import { marked } from 'marked';
+import { markedHighlight } from 'marked-highlight';
 import browserSync  from 'browser-sync';
 import chalk        from 'chalk';
 import cleanCss     from 'gulp-clean-css';
 import concat       from 'gulp-concat';
 import ejs          from 'gulp-ejs';
 import fs           from 'fs';
 import gulp         from 'gulp';
-import highlight    from 'highlight.js';
+import hljs         from 'highlight.js';
 import jsHint       from 'gulp-jshint';
 import log          from 'fancy-log';
 import mergeStream  from 'merge-stream';
@@ -51,19 +52,21 @@ const jsFiles = {
    };
 
 // Helper functions
-const renderer = new marked.Renderer();
-renderer.code = (code, language) => {
-   const highlighted = language ? highlight.highlight(code, { language: language }).value :
-      highlight.highlightAuto(code).value;
-   return `<pre class="highlight ${language}"><code>${highlighted}</code></pre>`;
-   };
 const readIndexYml = () => yaml.load(fs.readFileSync('source/index.yml', 'utf-8'));
+const highlightOptions = {
+   langPrefix: 'hljs language-',
+   highlight(code, lang) {
+      const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+      return hljs.highlight(code, { language }).value;
+      },
+   };
+marked.use(gfmHeadingId(), markedHighlight(highlightOptions));
 const getPageData = () => {
    const config = readIndexYml();
    const includes = config.includes
       .map(include => `source/includes/${include}.md`)
       .map(include => fs.readFileSync(include, 'utf-8'))
-      .map(include => marked(include, { renderer: renderer, mangle: false }));
+      .map(include => marked(include));
    const code = (filename) => filename.split('.')[0];
    const getPageData = {
       current_page: { data: config },

package.json

@@ -5,7 +5,10 @@
    "license": "Apache-2.0",
    "type": "module",
    "main": "build/1-dev/index.html",
-   "repository": "github:center-key/node-slate",
+   "repository": {
+      "type": "git",
+      "url": "git+https://github.com/center-key/node-slate.git"
+   },
    "homepage": "https://node-slate.js.org",
    "bugs": "https://github.com/center-key/node-slate/issues",
    "docs": "https://github.com/center-key/node-slate#readme",
@@ -48,9 +51,9 @@
       "test": "jshint gulpfile.js"
    },
    "dependencies": {
-      "browser-sync": "~2.29",
+      "browser-sync": "~3.0",
       "chalk": "~5.3",
-      "fuse.js": "~6.6",
+      "fuse.js": "~7.0",
       "gulp": "~4.0",
       "gulp-clean-css": "~4.3",
       "gulp-cli": "~2.3",
@@ -61,9 +64,9 @@
       "gulp-prettify": "~0.5",
       "gulp-rename": "~2.0",
       "gulp-sass": "~5.1",
-      "gulp-size": "~4.0",
+      "gulp-size": "~5.0",
       "gulp-uglify": "~3.0",
-      "highlight.js": "~11.8",
+      "highlight.js": "~11.9",
       "imagesloaded": "~5.0",
       "jquery": "~3.7",
       "jquery-highlight": "~3.5",
@@ -72,14 +75,15 @@
       "jquery.tocify": "~1.9",
       "js-yaml": "~4.1",
       "jshint": "~2.13",
-      "marked": "~5.1",
-      "marked-gfm-heading-id": "~3.0",
+      "marked": "~11.1",
+      "marked-gfm-heading-id": "~3.1",
+      "marked-highlight": "~2.1",
       "merge-stream": "~2.0",
-      "rev-web-assets": "~1.2",
+      "rev-web-assets": "~1.3",
       "rimraf": "~5.0",
       "run-scripts-util": "~1.2",
-      "sass": "~1.63",
-      "tocbot": "~4.21",
-      "w3c-html-validator": "~1.4"
+      "sass": "~1.69",
+      "tocbot": "~4.25",
+      "w3c-html-validator": "~1.6"
    }
 }

source/css/screen.css.scss

@@ -403,9 +403,9 @@ html, body {
       @extend %break-words;
       @extend %code-font;
       }
-   pre>code {
+   pre>code.hljs {
       background-color: transparent;
-      padding: 0;
+      padding: 0px;
       }
    aside {
       @extend %icon-info-sign;

source/js/app/_lang.js

@@ -25,12 +25,9 @@ under the License.
       if (language === '') return;
       $('.lang-selector a').removeClass('active');
       $('.lang-selector a[data-language-name=' + language + ']').addClass('active');
-      for (var i=0; i < languages.length; i++) {
-         $('.highlight.' + languages[i]).hide();
-         $('.lang-specific.' + languages[i]).hide();
-         }
-      $('.highlight.' + language).show();
-      $('.lang-specific.' + language).show();
+      for (var i=0; i < languages.length; i++)
+         $('.hljs.language-' + languages[i]).parent().hide();
+      $('.hljs.language-' + language).parent().show();
       global.toc.calculateHeights();
       if ($(window.location.hash).get(0))  //scroll to the new location of the position
          $(window.location.hash).get(0).scrollIntoView(true);