code highlighting

pull/508/head
LabyrinthLion 4 years ago
parent 99639ec9d3
commit d961b5e887

5
package-lock.json generated

@ -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",

@ -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",

@ -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: "..."},
.

@ -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;

@ -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) => {

@ -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.

@ -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! */
}

@ -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>

@ -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');

@ -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
```

@ -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
```

@ -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())
),
}}

@ -1,13 +1,370 @@
body {
margin: 0;
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;
margin: 0;
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;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
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;
}

Loading…
Cancel
Save