Added PrismJS for syntax highlighting

Author: zoltantothcom

.babelrc

@@ -1,3 +1,12 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-react"]
+  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "plugins": [
+    [
+      "prismjs",
+      {
+        "languages": ["javascript"],
+        "theme": "twilight"
+      }
+    ]
+  ]
 }

css/prism.css

@@ -0,0 +1,124 @@
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism-okaidia&languages=clike+javascript */
+/**
+ * okaidia theme for JavaScript, CSS and HTML
+ * Loosely based on Monokai textmate theme by http://www.monokai.nl/
+ * @author ocodia
+ */
+
+code[class*='language-'],
+pre[class*='language-'] {
+  color: #f8f8f2;
+  background: none;
+  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: 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;
+}
+
+/* Code blocks */
+pre[class*='language-'] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+  border-radius: 0.3em;
+}
+
+:not(pre) > code[class*='language-'],
+pre[class*='language-'] {
+  background: #272822;
+}
+
+/* Inline code */
+:not(pre) > code[class*='language-'] {
+  padding: 0.1em;
+  border-radius: 0.3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #f8f8f2;
+}
+
+.namespace {
+  opacity: 0.7;
+}
+
+.token.property,
+.token.tag,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #f92672;
+}
+
+.token.boolean,
+.token.number {
+  color: #ae81ff;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #a6e22e;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable {
+  color: #f8f8f2;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.function,
+.token.class-name {
+  color: #e6db74;
+}
+
+.token.keyword {
+  color: #66d9ef;
+}
+
+.token.regex,
+.token.important {
+  color: #fd971f;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "prismjs": "^1.15.0",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
     "styled-components": "^4.1.3"
@@ -19,12 +20,15 @@
     "@babel/preset-react": "^7.0.0",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.5",
+    "babel-plugin-prismjs": "^1.0.2",
+    "css-loader": "^2.1.0",
     "eslint": "^5.12.1",
     "eslint-config-react": "^1.1.7",
     "eslint-loader": "^2.1.1",
     "eslint-plugin-react": "^7.12.4",
     "html-webpack-plugin": "^3.2.0",
     "prettier": "1.16.2",
+    "style-loader": "^0.23.1",
     "webpack": "^4.29.0",
     "webpack-bundle-analyzer": "^3.0.3",
     "webpack-cli": "^3.2.1",

src/index.js

@@ -1,20 +1,44 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import styled from 'styled-components';
+import Prism from 'prismjs';
+import '../css/prism.css';
 
 const Title = styled.h1`
   font-family: sans-serif;
-  padding: 2em;
+  padding: 1.5em;
   background: papayawhip;
-  font-size: 4em;
+  font-size: 2em;
   text-align: center;
   color: palevioletred;
   margin: 0;
 `;
 
 class Welcome extends React.Component {
+  componentDidMount() {
+    Prism.highlightAll();
+  }
+
   render() {
-    return <Title>Hello World</Title>;
+    return (
+      <React.Fragment>
+        <Title>JavaScript Patterns</Title>
+
+        <pre>
+          <code className="language-javascript">
+            {`
+    onSubmit(e) {
+      e.preventDefault();
+      const job = {
+        title: 'Developer',
+        company: 'Facebook' 
+        };
+      }
+  `}
+          </code>
+        </pre>
+      </React.Fragment>
+    );
   }
 }
 

webpack.config.js

@@ -24,6 +24,10 @@ module.exports = {
         test: /\.(js|jsx)$/,
         exclude: /node_modules/,
         use: ['babel-loader', 'eslint-loader']
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader']
       }
     ]
   },