[update] code highlight

PlatziDev · May 26, 2017 · e65970f · e65970f
1 parent b587c42
commit e65970f
Show file tree

Hide file tree

Showing 5 changed files with 145 additions and 2 deletions.
diff --git a/main/actions/exported-styles.js b/main/actions/exported-styles.js
@@ -154,4 +154,64 @@ body mark {
   background-color: #058ecd;
   color: #fff;
 }
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #272822;
+  color: #ddd
+}
+.hljs-tag,
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal,
+.hljs-strong,
+.hljs-name {
+  color: #f92672
+}
+.hljs-code {
+  color: #66d9ef
+}
+.hljs-class .hljs-title {
+  color: white
+}
+.hljs-attribute,
+.hljs-symbol,
+.hljs-regexp,
+.hljs-link {
+  color: #bf79db
+}
+.hljs-string,
+.hljs-bullet,
+.hljs-subst,
+.hljs-title,
+.hljs-section,
+.hljs-emphasis,
+.hljs-type,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-addition,
+.hljs-variable,
+.hljs-template-tag,
+.hljs-template-variable {
+  color: #a6e22e
+}
+.hljs-comment,
+.hljs-quote,
+.hljs-deletion,
+.hljs-meta {
+  color: #75715e
+}
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal,
+.hljs-doctag,
+.hljs-title,
+.hljs-section,
+.hljs-type,
+.hljs-selector-id {
+  font-weight: bold
+}
 `
diff --git a/package.json b/package.json
@@ -66,6 +66,7 @@
   "dependencies": {
     "app-root-path": "^2.0.1",
     "electron-is-dev": "^0.1.2",
+    "highlight.js": "^9.11.0",
     "next": "^3.0.0-beta5",
     "prop-types": "^15.5.10",
     "pulse-editor": "^1.0.0",

diff --git a/renderer/components/export-button.js b/renderer/components/export-button.js
@@ -3,9 +3,17 @@ import { Base } from 'pulse-editor/buttons'
 import { ipcRenderer } from 'electron'
 import { string, func } from 'prop-types'
 import Icon from 'react-icons/lib/fa/file-code-o'
+import highlight from 'highlight.js'
 import createParser from '@platzi/markdown'
 
-const parser = createParser()
+const parser = createParser({
+  highlight(code, lang) {
+    if (lang && highlight.getLanguage(lang)) {
+      return highlight.highlight(lang, code).value;
+    }
+    return highlight.highlightAuto(code).value;
+  }
+})
 
 export default class NewButton extends Component {
   static contextTypes = {

diff --git a/renderer/pages/index.js b/renderer/pages/index.js
@@ -15,6 +15,7 @@ import {
   Heading,
   Youtube
 } from 'pulse-editor/buttons'
+import highlight from 'highlight.js'
 
 import Save from '../components/save-button'
 import Open from '../components/open-button'
@@ -157,7 +158,16 @@ export default class extends Component {
 
         <div className='PulseEditor-content'>
           <Field />
-          <Preview />
+          <Preview
+            parser={{
+              highlight(code, lang) {
+                if (lang && highlight.getLanguage(lang)) {
+                  return highlight.highlight(lang, code).value;
+                }
+                return highlight.highlightAuto(code).value;
+              }
+            }}
+          />
         </div>
 
         <EmojiBar />
@@ -459,6 +469,66 @@ export default class extends Component {
             background-color: #058ecd;
             color: #fff;
           }
+          .hljs {
+            display: block;
+            overflow-x: auto;
+            padding: 0.5em;
+            background: #272822;
+            color: #ddd
+          }
+          .hljs-tag,
+          .hljs-keyword,
+          .hljs-selector-tag,
+          .hljs-literal,
+          .hljs-strong,
+          .hljs-name {
+            color: #f92672
+          }
+          .hljs-code {
+            color: #66d9ef
+          }
+          .hljs-class .hljs-title {
+            color: white
+          }
+          .hljs-attribute,
+          .hljs-symbol,
+          .hljs-regexp,
+          .hljs-link {
+            color: #bf79db
+          }
+          .hljs-string,
+          .hljs-bullet,
+          .hljs-subst,
+          .hljs-title,
+          .hljs-section,
+          .hljs-emphasis,
+          .hljs-type,
+          .hljs-built_in,
+          .hljs-builtin-name,
+          .hljs-selector-attr,
+          .hljs-selector-pseudo,
+          .hljs-addition,
+          .hljs-variable,
+          .hljs-template-tag,
+          .hljs-template-variable {
+            color: #a6e22e
+          }
+          .hljs-comment,
+          .hljs-quote,
+          .hljs-deletion,
+          .hljs-meta {
+            color: #75715e
+          }
+          .hljs-keyword,
+          .hljs-selector-tag,
+          .hljs-literal,
+          .hljs-doctag,
+          .hljs-title,
+          .hljs-section,
+          .hljs-type,
+          .hljs-selector-id {
+            font-weight: bold
+          }
         `}</style>
       </Editor>
     )

diff --git a/yarn.lock b/yarn.lock
@@ -2659,6 +2659,10 @@ hawk@~3.1.3:
     hoek "2.x.x"
     sntp "1.x.x"
 
+highlight.js@^9.11.0:
+  version "9.11.0"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.11.0.tgz#47f98c7399918700db2caf230ded12cec41a84ae"
+
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"