minor improvements to prism highlighting

Author: leebyron

site/_core/Prism.js

@@ -479,7 +479,7 @@ Prism.languages.clike = {
 	'operator': /[-+]{1,2}|!|<=?|>=?|={1,3}|&{1,2}|\|?\||\?|\*|\/|~|\^|%/,
 	'punctuation': /[{}[\];(),.:]/
 };
-;
+
 Prism.languages.javascript = Prism.languages.extend('clike', {
 	'keyword': /\b(as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|false|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/,
 	'number': /\b-?(0x[\dA-Fa-f]+|0b[01]+|0o[0-7]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|Infinity)\b/,
@@ -550,3 +550,50 @@ Prism.languages.insertBefore('inside', 'attr-value',{
 }, Prism.languages.jsx.tag);
 
 }(Prism));
+
+Prism.languages.graphql = {
+	'comment': /#.*/,
+	'string': /"(?:\\.|[^\\"])*"/,
+	'number': /(?:\B-|\b)\d+(?:\.\d+)?(?:[eE][+-]?\d+)?\b/,
+	'boolean': /\b(?:true|false)\b/,
+	'variable': /\$[a-z_]\w*/i,
+	'directive': {
+		pattern: /@[a-z_]\w*/i,
+		alias: 'function'
+	},
+	'attr-name': /[a-z_]\w*(?=\s*:)/i,
+	'keyword': [
+		{
+			pattern: /(fragment\s+(?!on)[a-z_]\w*\s+|\.\.\.\s*)on\b/,
+			lookbehind: true
+		},
+		/\b(?:query|fragment|mutation)\b/
+	],
+	'operator': /!|=|\.{3}/,
+	'type-def': {
+		pattern: /\b(?:type|interface)\b\s+[a-zA-Z_]\w*\s?{[\w\W]*?}/,
+		inside: {
+			keyword: /\b(?:type|interface)\b/,
+			'type-name': /[a-z_]\w*/i,
+			fields: {
+				pattern: /{[\w\W]*?}/,
+				inside: {
+					'punctuation': /[!{}\[\]:=,]/,
+					'attr-name': /[a-z_]\w*(?=\s*:)/i,
+					'type-name': /[a-z_]\w*/i,
+				}
+			}
+		}
+	},
+	'punctuation': /[!(){}\[\]:=,]/,
+	'enum': /[a-z_]\w*/i
+};
+
+Prism.languages.json = {
+	'attr-name': /"(?:\\.|[^\\"])*"(?=\s*:)/i,
+	'string': /"(?:\\.|[^\\"])*"/,
+	'boolean': /\b(?:true|false)\b/,
+	'keyword': /\bnull\b/,
+	'number': /(?:\B-|\b)\d+(?:\.\d+)?(?:[eE][+-]?\d+)?\b/,
+	'punctuation': /[{}[\],:]/,
+};

site/_css/index.less

@@ -116,7 +116,6 @@ body.index {
     .marketing-col {
       flex: 1;
       width: 320px;
-      text-align: center;
     }
 
     .fadein-cols(3);

site/index.html.js

@@ -30,7 +30,7 @@ var index = React.createClass({
             <section className="marketing-row">
               <div className="marketing-col">
                 <h4>Describe your data</h4>
-                <Prism>
+                <Prism language="graphql">
                   {`type Project {
   name: String
   tagline: String
@@ -40,7 +40,7 @@ var index = React.createClass({
               </div>
               <div className="marketing-col">
                 <h4>Ask for what you want</h4>
-                <Prism>
+                <Prism language="graphql">
                   {`{
   project(name: "GraphQL") {
     tagline
@@ -50,7 +50,7 @@ var index = React.createClass({
               </div>
               <div className="marketing-col">
                 <h4>Get predictable results</h4>
-                <Prism>
+                <Prism language="json">
                   {`{
   "project": {
     "tagline": "A query language for APIs"
@@ -108,7 +108,7 @@ var index = React.createClass({
             </div>
             <div className="response">
               <div id="r1">
-                <Prism>
+                <Prism language="json">
                   {`{
   "hero": {
     "name": "Luke Skywalker"
@@ -117,7 +117,7 @@ var index = React.createClass({
                 </Prism>
               </div>
               <div id="r2">
-                <Prism>
+                <Prism language="json">
                   {`{
   "hero": {
     "name": "Luke Skywalker",
@@ -127,7 +127,7 @@ var index = React.createClass({
                 </Prism>
               </div>
               <div id="r3">
-                <Prism>
+                <Prism language="json">
                   {`{
   "hero": {
     "name": "Luke Skywalker",
@@ -194,7 +194,7 @@ var index = React.createClass({
             <div className="app-to-server" aria-hidden>
               <img src="/img/phone.svg" width="496" height="440" className="phone" />
               <div className="query">
-              <Prism>
+              <Prism language="graphql">
                 {`{
   hero {
     name
@@ -206,7 +206,7 @@ var index = React.createClass({
               </Prism>
               </div>
               <div className="response">
-              <Prism>
+              <Prism language="json">
                 {`{
   "hero": {
     "name": "Luke Skywalker",
@@ -240,7 +240,7 @@ var index = React.createClass({
           <div className="window strong-typed-query" aria-hidden>
           <div className="query">
           <div id="query-highlight" className="highlight" />
-          <Prism>
+          <Prism language="graphql">
                 {`{
   hero {
     name
@@ -264,7 +264,7 @@ var index = React.createClass({
           </div>
           <div className="type-system">
           <div id="type-highlight" className="highlight" />
-          <Prism>
+          <Prism language="graphql">
                 {`type Query {
   hero: Character
 }