diff --git a/package-lock.json b/package-lock.json index 16367b19..69ea98f8 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index f14f3e33..2889a2ec 100644 --- a/package.json +++ b/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", diff --git a/public/Projects/1-Beginner/Cause-Effect-App.md b/public/Projects/1-Beginner/Cause-Effect-App.md index d6659343..6b0e8369 100644 --- a/public/Projects/1-Beginner/Cause-Effect-App.md +++ b/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: "..."}, . diff --git a/public/Projects/1-Beginner/First-DB-App.md b/public/Projects/1-Beginner/First-DB-App.md index c92c4f25..c8a81d14 100644 --- a/public/Projects/1-Beginner/First-DB-App.md +++ b/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; diff --git a/public/Projects/1-Beginner/GitHub-Status-App.md b/public/Projects/1-Beginner/GitHub-Status-App.md index 9c580ff4..5c553460 100644 --- a/public/Projects/1-Beginner/GitHub-Status-App.md +++ b/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) => { diff --git a/public/Projects/1-Beginner/IOT-Mailbox-App.md b/public/Projects/1-Beginner/IOT-Mailbox-App.md index df66319c..4550dd34 100644 --- a/public/Projects/1-Beginner/IOT-Mailbox-App.md +++ b/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. diff --git a/public/Projects/2-Intermediate/Bit-Masks-App.md b/public/Projects/2-Intermediate/Bit-Masks-App.md index b7f7a5c3..28ad4404 100644 --- a/public/Projects/2-Intermediate/Bit-Masks-App.md +++ b/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! */ } diff --git a/public/Projects/2-Intermediate/Charity-Finder-App.md b/public/Projects/2-Intermediate/Charity-Finder-App.md index 11f4a391..650d473f 100644 --- a/public/Projects/2-Intermediate/Charity-Finder-App.md +++ b/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 true diff --git a/public/Projects/2-Intermediate/Podcast-Directory-App.md b/public/Projects/2-Intermediate/Podcast-Directory-App.md index 9959e375..5c0b630e 100644 --- a/public/Projects/2-Intermediate/Podcast-Directory-App.md +++ b/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'); diff --git a/public/Projects/3-Advanced/GitHub-Timeline-App.md b/public/Projects/3-Advanced/GitHub-Timeline-App.md index dd2ab8d4..fe6c6b2e 100644 --- a/public/Projects/3-Advanced/GitHub-Timeline-App.md +++ b/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 ``` diff --git a/public/Projects/3-Advanced/GitTweet-App.md b/public/Projects/3-Advanced/GitTweet-App.md index 9d7268d2..a724565c 100644 --- a/public/Projects/3-Advanced/GitTweet-App.md +++ b/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 ``` diff --git a/src/Projects.js b/src/Projects.js index ccfb9d47..f0a86700 100644 --- a/src/Projects.js +++ b/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(
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; }