Merge pull request #2 from aromalanil/code-highlighting

👨🏻‍💻 Added code highlighting in preview

package.json

@@ -1,6 +1,6 @@
 {
   "name": "markdown-editor",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "A react app to preview and edit Markdown",
   "private": true,
   "author": {
@@ -16,6 +16,7 @@
     "@testing-library/user-event": "^7.2.1",
     "marked": "^0.8.2",
     "node-sass": "^4.13.1",
+    "prismjs": "^1.21.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1",

src/App.scss

@@ -7,7 +7,7 @@ $primary-color: #339989;
 $primary-accent: #7de2d1;
 $primary-text: #24292e;
 $text-accent: #2b2c28;
-$white: #fffafb;
+$white: #fff;
 $gray: #eaecef;
 $dark-gray: #e1e4e8;
 $source-code-font: "Source Code Pro", monospace;
@@ -169,9 +169,11 @@ body {
 .html-div {
   p {
     margin: 0 0 1rem;
+    line-height: 1.5;
   }
   a {
     color: $primary-color;
+    text-decoration: none;
     &:hover {
       filter: brightness(1.2);
     }
@@ -182,21 +184,17 @@ body {
     margin: 24px 0;
     background-color: $dark-gray;
   }
-  pre{
-    background-color: $gray;
-    padding:1rem;
+  pre {
+    padding: 1rem;
     width: 100%;
     overflow: auto;
-    margin-top:0;
-    margin-bottom:1rem;
+    margin-top: 0;
+    margin-bottom: 1rem;
   }
   code {
-    font-size: 0.7rem;
-    line-height: 1.2rem;
     font-family: $source-code-font;
-    background-color: $gray;
-    padding: 0.2rem;
   }
+
   li + li {
     margin-top: 0.25em;
   }

src/components/MarkdownPreview.jsx

@@ -1,9 +1,15 @@
 import React, { useState, useEffect } from "react";
 import * as marked from "marked";
+import Prism from 'prismjs';
+import '../styles/github.css';
 
 function MarkdownPreview({ content }) {
   const [html, setHtml] = useState(getHtml(content));
 
+  useEffect(()=>{
+    Prism.highlightAll();
+  })
+
   useEffect(() => {
     setHtml(getHtml(content));
   }, [content]);

src/styles/github.css

@@ -0,0 +1,184 @@
+/**
+ * prism.js Github theme based on GitHub's theme.
+ * @author Sam Clarke
+ */
+pre {
+  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.45;
+  padding: 0.8em;
+  overflow: auto;
+  font-size: 0.9em;
+  border-radius: 6px;
+  background:  #f6f8fa;
+
+  -moz-tab-size: 8;
+  -o-tab-size: 8;
+  tab-size: 8;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+/* Inline code */
+:not(pre) > code {
+  color: inherit;
+  font-size: 85%;
+  border-radius: 0.3em;
+  white-space: normal;
+  background: #f5f5f5;
+  padding: 0.2em 0.4em;
+  margin: 0;
+  background-color: rgba(27, 31, 35, 0.05);
+}
+
+.token.comment,
+.token.blockquote {
+  color: #969896;
+}
+
+.token.cdata {
+  color: #183691;
+}
+
+.token.doctype,
+.token.punctuation,
+.token.variable,
+.token.macro.property {
+  color: #333;
+}
+
+.token.operator,
+.token.important,
+.token.keyword,
+.token.rule,
+.token.builtin {
+  color: #d73a49;
+}
+
+.token.string,
+.token.url,
+.token.regex,
+.token.attr-value {
+  color: #183691;
+}
+
+.token.property,
+.token.number,
+.token.boolean,
+.token.entity,
+.token.atrule,
+.token.constant,
+.token.symbol,
+.token.command,
+.token.code {
+  color: #0086b3;
+}
+
+.token.tag,
+.token.selector,
+.token.prolog {
+  color: #22863a;
+}
+
+.token.function,
+.token.namespace,
+.token.pseudo-element,
+.token.class,
+.token.class-name,
+.token.pseudo-class,
+.token.id,
+.token.url-reference .token.variable,
+.token.attr-name {
+  color: #6f42c1;
+}
+
+.token.entity {
+  cursor: help;
+}
+
+.token.title,
+.token.title .token.punctuation {
+  font-weight: bold;
+  color: #1d3e81;
+}
+
+.token.list {
+  color: #ed6a43;
+}
+
+.token.inserted {
+  background-color: #eaffea;
+  color: #55a532;
+}
+
+.token.deleted {
+  background-color: #ffecec;
+  color: #bd2c00;
+}
+
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+/* JSON */
+.language-json .token.property {
+  color: #183691;
+}
+
+.language-markup .token.tag .token.punctuation {
+  color: #333;
+}
+
+/* CSS */
+code.language-css,
+.language-css .token.function {
+  color: #0086b3;
+}
+
+/* YAML */
+.language-yaml .token.atrule {
+  color: #63a35c;
+}
+
+code.language-yaml {
+  color: #183691;
+}
+
+/* Ruby */
+.language-ruby .token.function {
+  color: #333;
+}
+
+/* Markdown */
+.language-markdown .token.url {
+  color: #795da3;
+}
+
+/* Makefile */
+.language-makefile .token.symbol {
+  color: #795da3;
+}
+
+.language-makefile .token.variable {
+  color: #183691;
+}
+
+.language-makefile .token.builtin {
+  color: #0086b3;
+}
+
+/* Bash */
+.language-bash .token.keyword {
+  color: #0086b3;
+}