code highlighting

package-lock.json

@@ -12173,6 +12173,11 @@
         }
       }
     },
+    "prismjs": {
+      "version": "1.25.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.25.0.tgz",
+      "integrity": "sha512-WCjJHl1KEWbnkQom1+SzftbtXMKQoezOCYs5rECqMN+jP+apI7ftoflyqigqzopSO3hMhTEb0mFClA8lkolgEg=="
+    },
     "process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",

package.json

@@ -10,6 +10,7 @@
         "evergreen-ui": "^6.5.1",
         "gh-pages": "^3.2.3",
         "marked": "^3.0.8",
+        "prismjs": "^1.25.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-scripts": "4.0.3",

public/Projects/1-Beginner/Cause-Effect-App.md

@@ -51,7 +51,7 @@ constraints:
 -   Consider defining your test data in a JavaScript object having a format
     such as this:
 
-```
+```javascript
 const people = [
   {name: "...", street: "...", city: "...", state: "...", country: "...", telephone: "...", birthday: "..."},
   .

public/Projects/1-Beginner/First-DB-App.md

@@ -29,7 +29,8 @@ can test the query logic you'll be adding. You'll be required to hook up
 buttons on the web page you build to the `clearDB` and `loadDB` functions, and
 to write your own `queryDB` handler to connect to the `Query DB` button. You'll
 also need to add a `queryAllRows` function to the Customer class.
-```js
+
+```javascript
 class Customer {
   constructor(dbName) {
     this.dbName = dbName;

public/Projects/1-Beginner/GitHub-Status-App.md

@@ -40,8 +40,9 @@ technique to make it stand out. Use your imagination!
 web site page from the command line command `node ghstatus`. You can use this 
 output to determine which JSON element contain the status information you'll 
 need to develop this app.
-```
-ghstatus.js
+
+```javascript
+// ghstatus.js
 
 const request = require('request');
 request('https://www.githubstatus.com/',  { json: true }, (err, res, body) => {  

public/Projects/1-Beginner/IOT-Mailbox-App.md

@@ -18,7 +18,7 @@ process, and to signal the app web page with the state of the mailbox door
 (open or closed) at preset intervals. Keep in mind that the interval you specify
 shouldn't exceed the time it normally takes to open or close the door or you
 might miss a delivery!
-```
+```javascript
 /**
  * Monitor the light levels inside an IOT enabled snail mailbox to detect
  * when the mailbox door has been opened and closed.

public/Projects/2-Intermediate/Bit-Masks-App.md

@@ -5,7 +5,7 @@
 It's difficult to find an app that doesn't rely on some form of conditional
 logic to implement its functionality. This is almost always performed using 
 statements like:
-```
+```Javascript
 if (processAccount === true) { 
   /* do something */
 }
@@ -52,7 +52,7 @@ to their timezones.
 Searches should be conducted by combining a bit mask for the desired time zone
 against the city-specific bit sequences to identify matches. Determining if a 
 city meets the search criteria shouldn't rely on a statement such as
-```
+```javascript
 if (city[i].gmtOffset === searchOffset ) {
   /* Found it! */
 }

public/Projects/2-Intermediate/Charity-Finder-App.md

@@ -57,7 +57,7 @@ the relationship between projects and organizations.
 - [What is Web Site Conversion?](https://www.marketing91.com/what-is-website-conversion/)
 - [Global Giving API](https://www.globalgiving.org/api/)
 - Sample XML for a project returned through the API:
-```
+```xml
 <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
 <projects numberFound="26842">
     <hasNext>true</hasNext>

public/Projects/2-Intermediate/Podcast-Directory-App.md

@@ -51,7 +51,7 @@ episodes for that podcast in the episode table.
 - [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/querySelectorAll)
 - Hint! You can use the following code to help you get started with this
 project. You can execute this using the  command line command `node puptest`.
-```
+```javascript
 // puptest.js
 const puppeteer = require('puppeteer');
 

public/Projects/3-Advanced/GitHub-Timeline-App.md

@@ -45,7 +45,7 @@ Sample code showing how to use the GitHub API's are:
 You can use this CURL command to see the JSON returned by the V3 REST API for
 your repos:
 
-```
+```shell
 curl -u "user-id" https://api.github.com/users/user-id/repos
 ```
 

public/Projects/3-Advanced/GitTweet-App.md

@@ -63,7 +63,7 @@ to be reselected each time.
   You can use this CURL command to see the JSON returned by the V3 REST API for
   your repos:
 
-  ```
+  ```shell
   curl -u "user-id" https://api.github.com/users/user-id/repos
   ```
 

src/Projects.js

@@ -3,6 +3,7 @@ import { parse } from 'csv-string';
 import ProjectsCSV from './Projects.csv';
 import { useState } from 'react';
 import marked from 'marked';
+import Prism from 'prismjs';
 
 var data = [];
 fetch(ProjectsCSV).then(async (res) => {
@@ -23,7 +24,7 @@ const unescapeHTML = (str) =>
             }[tag] || tag)
     );
 
-const task_list = (str) => {
+const postmarked = (str) => {
     var a = document.createElement('div');
     a.innerHTML = str;
     var b = new XPathEvaluator();
@@ -37,6 +38,7 @@ const task_list = (str) => {
     for (var e of ds) {
         e.classList.add('task-list-item');
     }
+    Prism.highlightAllUnder(a);
     return a.innerHTML;
 };
 
@@ -101,7 +103,7 @@ export default function Projects({ tier }) {
                                         setContent(
                                             <div
                                                 dangerouslySetInnerHTML={{
-                                                    __html: task_list(
+                                                    __html: postmarked(
                                                         marked(await res.text())
                                                     ),
                                                 }}

src/index.css

@@ -1,8 +1,8 @@
 body {
     margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
+        'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
+        'Helvetica Neue', sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
@@ -11,3 +11,360 @@ code {
     font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
         monospace;
 }
+
+pre {
+    padding: 16px;
+    overflow: auto;
+    font-size: 85%;
+    line-height: 1.45;
+    background-color: rgb(246, 248, 250);
+    border-radius: 6px;
+    margin-bottom: 0;
+    word-break: normal;
+}
+
+:not(pre) > code {
+    padding: 0.2em 0.4em;
+    margin: 0;
+    font-size: 85%;
+    background-color: #afb8c133;
+    border-radius: 6px;
+    font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
+        Liberation Mono, monospace;
+}
+
+code[class*='language-'],
+pre[class*='language-'] {
+    color: #393a34;
+    font-family: 'Consolas', 'Bitstream Vera Sans Mono', 'Courier New', Courier,
+        monospace;
+    direction: ltr;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    font-size: 0.9em;
+    line-height: 1.2em;
+
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+}
+
+pre > code[class*='language-'] {
+    font-size: 1em;
+}
+
+pre[class*='language-']::-moz-selection,
+pre[class*='language-'] ::-moz-selection,
+code[class*='language-']::-moz-selection,
+code[class*='language-'] ::-moz-selection {
+    background: #c1def1;
+}
+
+pre[class*='language-']::selection,
+pre[class*='language-'] ::selection,
+code[class*='language-']::selection,
+code[class*='language-'] ::selection {
+    background: #c1def1;
+}
+
+/* Code blocks */
+pre[class*='language-'] {
+    padding: 1em;
+    margin: 0.5em 0;
+    overflow: auto;
+    border: 1px solid #dddddd;
+    background-color: white;
+}
+
+/* Inline code */
+:not(pre) > code[class*='language-'] {
+    padding: 0.2em;
+    padding-top: 1px;
+    padding-bottom: 1px;
+    background: #f8f8f8;
+    border: 1px solid #dddddd;
+}
+
+pre[class*='language-'],
+code[class*='language-'] {
+    color: #d4d4d4;
+    font-size: 13px;
+    text-shadow: none;
+    font-family: Menlo, Monaco, Consolas, 'Andale Mono', 'Ubuntu Mono',
+        'Courier New', monospace;
+    direction: ltr;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    line-height: 1.5;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+}
+
+pre[class*='language-']::selection,
+code[class*='language-']::selection,
+pre[class*='language-'] *::selection,
+code[class*='language-'] *::selection {
+    text-shadow: none;
+    background: #264f78;
+}
+
+@media print {
+    pre[class*='language-'],
+    code[class*='language-'] {
+        text-shadow: none;
+    }
+}
+
+pre[class*='language-'] {
+    padding: 1em;
+    margin: 0.5em 0;
+    overflow: auto;
+    background: #1e1e1e;
+}
+
+:not(pre) > code[class*='language-'] {
+    padding: 0.1em 0.3em;
+    border-radius: 0.3em;
+    color: #db4c69;
+    background: #1e1e1e;
+}
+/*********************************************************
+* Tokens
+*/
+.namespace {
+    opacity: 0.7;
+}
+
+.token.doctype .token.doctype-tag {
+    color: #569cd6;
+}
+
+.token.doctype .token.name {
+    color: #9cdcfe;
+}
+
+.token.comment,
+.token.prolog {
+    color: #6a9955;
+}
+
+.token.punctuation,
+.language-html .language-css .token.punctuation,
+.language-html .language-javascript .token.punctuation {
+    color: #d4d4d4;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.inserted,
+.token.unit {
+    color: #b5cea8;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.deleted {
+    color: #ce9178;
+}
+
+.language-css .token.string.url {
+    text-decoration: underline;
+}
+
+.token.operator,
+.token.entity {
+    color: #d4d4d4;
+}
+
+.token.operator.arrow {
+    color: #569cd6;
+}
+
+.token.atrule {
+    color: #ce9178;
+}
+
+.token.atrule .token.rule {
+    color: #c586c0;
+}
+
+.token.atrule .token.url {
+    color: #9cdcfe;
+}
+
+.token.atrule .token.url .token.function {
+    color: #dcdcaa;
+}
+
+.token.atrule .token.url .token.punctuation {
+    color: #d4d4d4;
+}
+
+.token.keyword {
+    color: #569cd6;
+}
+
+.token.keyword.module,
+.token.keyword.control-flow {
+    color: #c586c0;
+}
+
+.token.function,
+.token.function .token.maybe-class-name {
+    color: #dcdcaa;
+}
+
+.token.regex {
+    color: #d16969;
+}
+
+.token.important {
+    color: #569cd6;
+}
+
+.token.italic {
+    font-style: italic;
+}
+
+.token.constant {
+    color: #9cdcfe;
+}
+
+.token.class-name,
+.token.maybe-class-name {
+    color: #4ec9b0;
+}
+
+.token.console {
+    color: #9cdcfe;
+}
+
+.token.parameter {
+    color: #9cdcfe;
+}
+
+.token.interpolation {
+    color: #9cdcfe;
+}
+
+.token.punctuation.interpolation-punctuation {
+    color: #569cd6;
+}
+
+.token.boolean {
+    color: #569cd6;
+}
+
+.token.property,
+.token.variable,
+.token.imports .token.maybe-class-name,
+.token.exports .token.maybe-class-name {
+    color: #9cdcfe;
+}
+
+.token.selector {
+    color: #d7ba7d;
+}
+
+.token.escape {
+    color: #d7ba7d;
+}
+
+.token.tag {
+    color: #569cd6;
+}
+
+.token.tag .token.punctuation {
+    color: #808080;
+}
+
+.token.cdata {
+    color: #808080;
+}
+
+.token.attr-name {
+    color: #9cdcfe;
+}
+
+.token.attr-value,
+.token.attr-value .token.punctuation {
+    color: #ce9178;
+}
+
+.token.attr-value .token.punctuation.attr-equals {
+    color: #d4d4d4;
+}
+
+.token.entity {
+    color: #569cd6;
+}
+
+.token.namespace {
+    color: #4ec9b0;
+}
+/*********************************************************
+* Language Specific
+*/
+
+pre[class*='language-javascript'],
+code[class*='language-javascript'],
+pre[class*='language-jsx'],
+code[class*='language-jsx'],
+pre[class*='language-typescript'],
+code[class*='language-typescript'],
+pre[class*='language-tsx'],
+code[class*='language-tsx'] {
+    color: #9cdcfe;
+}
+
+pre[class*='language-css'],
+code[class*='language-css'] {
+    color: #ce9178;
+}
+
+pre[class*='language-html'],
+code[class*='language-html'] {
+    color: #d4d4d4;
+}
+
+.language-regex .token.anchor {
+    color: #dcdcaa;
+}
+
+.language-html .token.punctuation {
+    color: #808080;
+}
+/*********************************************************
+* Line highlighting
+*/
+pre[class*='language-'] > code[class*='language-'] {
+    position: relative;
+    z-index: 1;
+}
+
+.line-highlight.line-highlight {
+    background: #f7ebc6;
+    box-shadow: inset 5px 0 0 #f7d87c;
+    z-index: 0;
+}