Add formatter for code block - fixes #2

common/radar.js

@@ -2,12 +2,16 @@ import fs, { readFile, outputFile } from 'fs-extra';
 import path from 'path';
 import frontmatter from 'front-matter';
 import marked from 'marked';
+import hljs from 'highlight.js';
 import {
   radarPath,
-  distPath,
   getAllMarkdownFiles,
 } from './file';
 
+marked.setOptions({
+  highlight: (code) => hljs.highlightAuto(code).value,
+});
+
 export const createRadar = async (tree) => {
   const fileNames = (await getAllMarkdownFiles(radarPath()));
   const revisions = await createRevisionsFromFiles(fileNames);
@@ -31,7 +35,7 @@ const checkAttributes = (fileName, attributes) => {
   if (attributes.quadrant && !quadrants.includes(attributes.quadrant)) {
     throw new Error(`Error: ${fileName} has an illegal value for 'quadrant' - must be one of ${quadrants}`);
   }
-}
+};
 
 const createRevisionsFromFiles = (fileNames) => (
   Promise.all(fileNames.map((fileName) => {
@@ -52,7 +56,7 @@ const createRevisionsFromFiles = (fileNames) => (
       });
     })
   }))
-)
+);
 
 const itemInfoFromFilename = (fileName) => {
   const [
@@ -72,7 +76,7 @@ const getAllReleases = (revisions) => (
     }
     return allReleases;
   }, []).sort()
-)
+);
 
 // const createQuadrants = (revisions) => (
 //   revisions.reduce((quadrants, revision) => {
@@ -104,7 +108,7 @@ const createItems = (revisions) => {
   return Object
     .values(itemMap)
     .sort((x, y) => (x.name > y.name ? 1 : -1));
-}
+};
 
 const addRevisionToItem = (item = {
   attributes: {
@@ -152,4 +156,4 @@ const flagWithIsNew = (items, allReleases) => (
 
 const isNewItem = (item, allReleases) => {
   return item.revisions.length > 1 && item.revisions[0].release === allReleases[allReleases.length-1]
-}
+};

package.json

@@ -31,6 +31,7 @@
     "css-mqpacker": "^5.0.1",
     "front-matter": "2.1.2",
     "fs-extra": "2.0.0",
+    "highlight.js": "9.10.0",
     "history": "4.5.1",
     "live-server": "1.2.0",
     "marked": "0.3.6",

radar/2017-03-01/hal-hateoas.md

@@ -8,16 +8,13 @@ Hypermedia As The Engine Of Application State or in short HATEOAS is a pattern t
 
 Let's assume we have a bank account and an action to deposit money on that account. Everything you need to know is that the account resource has an action for a deposit. The URL of that action can then fetched from the link attribute with the corresponding relation.
 
-`<account>`
-
-`    <account_number>12345</account_number>`
-
-`    <balance currency="usd">-25.00</balance>`
-
-`    <link rel="deposit" href="https://bank.example.com/account/12345/deposit" />`
-
-`</account>`
-
+```
+<account>
+    <account_number>12345</account_number>
+    <balance currency="usd">-25.00</balance>
+    <link rel="deposit" href="https://bank.example.com/account/12345/deposit" />
+</account>
+```
 
 Besides from HATEOAS there is an alternative implementation called Hypertext Application Language, in short HAL, which has much more features than the basic HATEOAS.
 

styles/components/hljs.css

@@ -0,0 +1,2 @@
+/* copied from here: http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/darcula.min.css*/
+.hljs{display:block;overflow-x:auto;padding:0.5em;background:#2b2b2b}.hljs{color:#bababa}.hljs-strong,.hljs-emphasis{color:#a8a8a2}.hljs-bullet,.hljs-quote,.hljs-link,.hljs-number,.hljs-regexp,.hljs-literal{color:#6896ba}.hljs-code,.hljs-selector-class{color:#a6e22e}.hljs-emphasis{font-style:italic}.hljs-keyword,.hljs-selector-tag,.hljs-section,.hljs-attribute,.hljs-name,.hljs-variable{color:#cb7832}.hljs-params{color:#b9b9b9}.hljs-string{color:#6a8759}.hljs-subst,.hljs-type,.hljs-built_in,.hljs-builtin-name,.hljs-symbol,.hljs-selector-id,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-template-tag,.hljs-template-variable,.hljs-addition{color:#e0c46c}.hljs-comment,.hljs-deletion,.hljs-meta{color:#7f7f7f}

styles/components/markdown.css

@@ -46,6 +46,8 @@
 
   pre {
     overflow-x: auto;
+    padding: 10px;
+    background: var(--color-gray-dark);
     -webkit-overflow-scrolling: touch;
   }
 }

tasks/build.js

@@ -17,18 +17,8 @@ import { renderPage } from '../js/server';
       save(pageHtml, `${pageName}.html`);
     });
 
-    // pages.map((pageHtml) => {
-    //   save(pageHtml, `${pageName}.html`)
-    // });
-    // console.log(pages);
-    // outputRadar(radar);
-
-    // const radarByQuadrants = groupByQuadrants(radar);
-    // createStatic(radar);
-
     console.log('Built radar');
-    // console.log(JSON.stringify(radar, null, 2));
   } catch(e) {
     console.error('error:', e);
   }
-})()
+})();

yarn.lock

@@ -1763,6 +1763,10 @@ hawk@~3.1.3:
     hoek "2.x.x"
     sntp "1.x.x"
 
+highlight.js@9.10.0:
+  version "9.10.0"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.10.0.tgz#f9f0b14c0be00f0e4fb1e577b749fed9e6f52f55"
+
 history@4.5.1:
   version "4.5.1"
   resolved "https://registry.yarnpkg.com/history/-/history-4.5.1.tgz#44935a51021e3b8e67ebac267a35675732aba569"