Merge pull request ramsaylanier#36 from ramsaylanier/syntax-highlighting

add sytax highlight to code and pre nodes
sshyran · Apr 7, 2017 · f2b540e · f2b540e
2 parents 6fbc8f9 + 9c34433
commit f2b540e
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 7 deletions.
diff --git a/app/components/posts/PostContent.js b/app/components/posts/PostContent.js
@@ -5,9 +5,15 @@ import CSSModules from 'react-css-modules'
 import styles from './post.scss'
 import Shortcodes  from '../shortcodes/shortcodes'
 import {TweenMax, Power4} from 'gsap'
+import hljs from 'highlightjs'
 
 @CSSModules(styles, {allowMultiple: true})
 class PostContent extends Component {
+
+  componentDidUpdate() {
+
+  }
+
   componentDidMount() {
     const content = this._content
     const anchors = content.getElementsByTagName('a')
@@ -32,8 +38,14 @@ class PostContent extends Component {
     })
 
     // render embed shortcodes
-    const shortcodes = document.getElementsByClassName('post--shortcode')
+    const shortcodes = document.getElementsByClassName('post__shortcode')
     map(shortcodes, (shortcode) => Shortcodes.renderEmbed(shortcode))
+
+    // syntax highlight for code and pre elements
+    const code = document.getElementsByTagName('pre')
+    for (let i = 0; i < code.length; i++) {
+      hljs.highlightBlock(code[i])
+    }
   }
 
   _parseContent() {
@@ -42,10 +54,10 @@ class PostContent extends Component {
     const splitContent = trimmed.split('\n')
     const voidTags = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'code', 'pre', 'img']
     const shortcodes = ['caption', 'embed', 'gist']
+    let tagIsClosed = true
 
     map(splitContent, (line, index) => {
       let newline = line
-
       // check if line is a shortcode
       if (newline[0] === '[') {
         const shortcode = line.match(/([[])\w+/g).toString().substr(1)
@@ -56,6 +68,7 @@ class PostContent extends Component {
         // wrap lines without voidTags in paragraph tags
         let tag = line.match(/^<\w+/g)
         tag = tag ? tag[0].slice(1) : ''
+        tagIsClosed = line.match(/<\/\w*>$/g)
         if (voidTags.indexOf(tag) === -1 && line.length > 1) {
           newline = '<p>' + line + '</p>'
         }

diff --git a/app/components/widgets/PostList/post-list-widget.scss b/app/components/widgets/PostList/post-list-widget.scss
@@ -1,5 +1,4 @@
 @import '../../../styles/vars';
-@import '../../../styles/typography';
 
 .base{
   margin-bottom: 1rem;

diff --git a/app/styles.scss b/app/styles.scss
@@ -7,6 +7,7 @@
 @import "./styles/background";
 @import "./styles/images";
 @import "./styles/z-index";
+@import "./styles/hljs";
 
 *{
   box-sizing: border-box;

diff --git a/app/styles/hljs.scss b/app/styles/hljs.scss
@@ -0,0 +1,8 @@
+/*
+
+Original style from softwaremaniacs.org (c) Ivan Sagalaev <[email protected]>
+
+*/
+:global{
+  .hljs{display:block;overflow-x:auto;padding:0.5em;background:#F0F0F0}.hljs,.hljs-subst{color:#444}.hljs-comment{color:#888888}.hljs-keyword,.hljs-attribute,.hljs-selector-tag,.hljs-meta-keyword,.hljs-doctag,.hljs-name{font-weight:bold}.hljs-type,.hljs-string,.hljs-number,.hljs-selector-id,.hljs-selector-class,.hljs-quote,.hljs-template-tag,.hljs-deletion{color:#880000}.hljs-title,.hljs-section{color:#880000;font-weight:bold}.hljs-regexp,.hljs-symbol,.hljs-variable,.hljs-template-variable,.hljs-link,.hljs-selector-attr,.hljs-selector-pseudo{color:#BC6060}.hljs-literal{color:#78A960}.hljs-built_in,.hljs-bullet,.hljs-code,.hljs-addition{color:#397300}.hljs-meta{color:#1f7199}.hljs-meta-string{color:#4d99bf}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}
+}
diff --git a/app/styles/typography.scss b/app/styles/typography.scss
@@ -1,7 +1,3 @@
-$heading: "jaf-facitweb", Helvetica, sans-serif;
-$copy: "freight-text-pro", serif;
-$mono: "source-code-pro", sans-serif;
-
 html {font-size: 1.125em;}
 
 body {
@@ -65,6 +61,7 @@ pre{
   margin-bottom: 1.5rem;
 
   p{
+    font-family: $mono;
     font-size: 1rem;
     margin: 0;
   }

diff --git a/app/styles/vars.scss b/app/styles/vars.scss
@@ -18,3 +18,9 @@ $mobile-landscape: 	"only screen and (min-device-width: 320px) and (max-device-w
 $tablet:      		"only screen and (min-width: 569px) and (max-width: 980px)";
 $desktop:     		"only screen and (min-width: 981px) and (max-width: 1200px)";
 $desktop-xl:  		"only screen and (min-width: 1201px)";
+
+
+// Typography
+$heading: "jaf-facitweb", Helvetica, sans-serif;
+$copy: "freight-text-pro", serif;
+$mono: "source-code-pro", sans-serif;
diff --git a/package.json b/package.json
@@ -92,6 +92,7 @@
     "graphql-tag": "^0.1.7",
     "graphql-tools": "^0.11.0",
     "gsap": "^1.19.1",
+    "highlightjs": "^9.10.0",
     "history": "^1.17.0",
     "htmlparser2": "^3.9.0",
     "lodash": "^4.13.1",