added syntax highlighting for markdown codes (#716)

* added syntax highlighting for markdown codes * Added highlight to markdown renderer * Markdown code change test * Logging marked errors * Using sanitize * highlight styles * Removed unsed consoles * Using monokai as highlight theme * Using monokai for all markdown code, syntax highlight working on detail page * Surounded with pre code tags * Disable hljs and using rouge for builds * fied broken detail page * Added minified highlight.js with common languages * Fixed build script * Fixed build script to use yarn * Using spreading * Fixed build script to use yarn * Removed submodule * Using hightlight statically * Using built highlight.js * Static highlight.js * removed unnecessary changes * style(markdown): simplify css config
yarnpkg · Nov 15, 2017 · 3cd9aad · 3cd9aad
1 parent 88a74c7
commit 3cd9aad
Show file tree

Hide file tree

Showing 8 changed files with 1,156 additions and 215 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -27,7 +27,6 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css" />
     <link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}?t={{ site.time | date_to_xmlschema }}">
     <script src="https://cdn.polyfill.io/v2/polyfill.js?unknown=polyfill&excludes=Element"></script>
-
     <meta name="google-site-verification" content="DIcCyEkVaGHm864NWzItnt2n6Gg7hz3l47RBIRyxvcQ" />
   </head>
   <body>

diff --git a/_layouts/pages/install.html b/_layouts/pages/install.html
@@ -44,7 +44,8 @@
 {% highlight sh %}
 
 {% endhighlight %}
-<div class="language-sh highlighter-rouge"><pre class="rougeHighlight"><code>yarn --version</code></pre>
+<div class="language-sh highlighter-rouge">
+  <pre class="rougeHighlight"><code>yarn --version</code></pre>
 </div>
 
 <h3>{{i18n.docs_nightly}}</h3>

diff --git a/_sass/_code.scss b/_sass/_code.scss
@@ -1,72 +1,74 @@
-.rougeHighlight, pre { background-color: $code-bg; color: darken(#93a1a1, 15%) }
-.rougeHighlight .c { color: #586e75 } /* Comment */
-.rougeHighlight .err { color: darken(#93a1a1, 15%) } /* Error */
-.rougeHighlight .g { color: darken(#93a1a1, 15%) } /* Generic */
-.rougeHighlight .k { color: #859900 } /* Keyword */
-.rougeHighlight .l { color: darken(#93a1a1, 15%) } /* Literal */
-.rougeHighlight .n { color: darken(#93a1a1, 15%) } /* Name */
-.rougeHighlight .o { color: #859900 } /* Operator */
-.rougeHighlight .x { color: #cb4b16 } /* Other */
-.rougeHighlight .p { color: darken(#93a1a1, 15%) } /* Punctuation */
-.rougeHighlight .cm { color: #586e75 } /* Comment.Multiline */
-.rougeHighlight .cp { color: #859900 } /* Comment.Preproc */
-.rougeHighlight .c1 { color: #72c02c; } /* Comment.Single */
-.rougeHighlight .cs { color: #859900 } /* Comment.Special */
-.rougeHighlight .gd { color: #2aa198 } /* Generic.Deleted */
-.rougeHighlight .ge { color: darken(#93a1a1, 15%); font-style: italic } /* Generic.Emph */
-.rougeHighlight .gr { color: #dc322f } /* Generic.Error */
-.rougeHighlight .gh { color: #cb4b16 } /* Generic.Heading */
-.rougeHighlight .gi { color: #859900 } /* Generic.Inserted */
-.rougeHighlight .go { color: darken(#93a1a1, 15%) } /* Generic.Output */
-.rougeHighlight .gp { color: darken(#93a1a1, 15%) } /* Generic.Prompt */
-.rougeHighlight .gs { color: darken(#93a1a1, 15%); font-weight: bold } /* Generic.Strong */
-.rougeHighlight .gu { color: #cb4b16 } /* Generic.Subheading */
-.rougeHighlight .gt { color: darken(#93a1a1, 15%) } /* Generic.Traceback */
-.rougeHighlight .kc { color: #cb4b16 } /* Keyword.Constant */
-.rougeHighlight .kd { color: #268bd2 } /* Keyword.Declaration */
-.rougeHighlight .kn { color: #859900 } /* Keyword.Namespace */
-.rougeHighlight .kp { color: #859900 } /* Keyword.Pseudo */
-.rougeHighlight .kr { color: #268bd2 } /* Keyword.Reserved */
-.rougeHighlight .kt { color: #dc322f } /* Keyword.Type */
-.rougeHighlight .ld { color: darken(#93a1a1, 15%) } /* Literal.Date */
-.rougeHighlight .m { color: #2aa198 } /* Literal.Number */
-.rougeHighlight .s { color: #2aa198 } /* Literal.String */
-.rougeHighlight .na { color: darken(#93a1a1, 15%) } /* Name.Attribute */
-.rougeHighlight .nb { color: #B58900 } /* Name.Builtin */
-.rougeHighlight .nc { color: #268bd2 } /* Name.Class */
-.rougeHighlight .no { color: #cb4b16 } /* Name.Constant */
-.rougeHighlight .nd { color: #268bd2 } /* Name.Decorator */
-.rougeHighlight .ni { color: #cb4b16 } /* Name.Entity */
-.rougeHighlight .ne { color: #cb4b16 } /* Name.Exception */
-.rougeHighlight .nf { color: #268bd2 } /* Name.Function */
-.rougeHighlight .nl { color: darken(#93a1a1, 15%) } /* Name.Label */
-.rougeHighlight .nn { color: darken(#93a1a1, 15%) } /* Name.Namespace */
-.rougeHighlight .nx { color: darken(#93a1a1, 15%) } /* Name.Other */
-.rougeHighlight .py { color: darken(#93a1a1, 15%) } /* Name.Property */
-.rougeHighlight .nt { color: #268bd2 } /* Name.Tag */
-.rougeHighlight .nv { color: #268bd2 } /* Name.Variable */
-.rougeHighlight .ow { color: #859900 } /* Operator.Word */
-.rougeHighlight .w { color: darken(#93a1a1, 15%) } /* Text.Whitespace */
-.rougeHighlight .mf { color: #2aa198 } /* Literal.Number.Float */
-.rougeHighlight .mh { color: #2aa198 } /* Literal.Number.Hex */
-.rougeHighlight .mi { color: #2aa198 } /* Literal.Number.Integer */
-.rougeHighlight .mo { color: #2aa198 } /* Literal.Number.Oct */
-.rougeHighlight .sb { color: #586e75 } /* Literal.String.Backtick */
-.rougeHighlight .sc { color: #2aa198 } /* Literal.String.Char */
-.rougeHighlight .sd { color: darken(#93a1a1, 15%) } /* Literal.String.Doc */
-.rougeHighlight .s2 { color: #2aa198 } /* Literal.String.Double */
-.rougeHighlight .se { color: #cb4b16 } /* Literal.String.Escape */
-.rougeHighlight .sh { color: darken(#93a1a1, 15%) } /* Literal.String.Heredoc */
-.rougeHighlight .si { color: #2aa198 } /* Literal.String.Interpol */
-.rougeHighlight .sx { color: #2aa198 } /* Literal.String.Other */
-.rougeHighlight .sr { color: #dc322f } /* Literal.String.Regex */
-.rougeHighlight .s1 { color: #2aa198 } /* Literal.String.Single */
-.rougeHighlight .ss { color: #2aa198 } /* Literal.String.Symbol */
-.rougeHighlight .bp { color: #268bd2 } /* Name.Builtin.Pseudo */
-.rougeHighlight .vc { color: #268bd2 } /* Name.Variable.Class */
-.rougeHighlight .vg { color: #268bd2 } /* Name.Variable.Global */
-.rougeHighlight .vi { color: #268bd2 } /* Name.Variable.Instance */
-.rougeHighlight .il { color: #2aa198 } /* Literal.Number.Integer.Long */
+.rougeHighlight pre,
+.rougeHighlight, pre {
+
+  background: $gray-dark;
+  -webkit-font-smoothing: antialiased;
+  border-left: 4px solid $yarn-blue;
+  color: #ddd;
+ }
+.rougeHighlight .hll { background-color: #272822; }
+.rougeHighlight .c { color: #75715e } /* Comment */
+.rougeHighlight .err { color: #960050; background-color: #1e0010 } /* Error */
+.rougeHighlight .k { color: #66d9ef } /* Keyword */
+.rougeHighlight .l { color: #ae81ff } /* Literal */
+.rougeHighlight .n { color: #f8f8f2 } /* Name */
+.rougeHighlight .o { color: #f92672 } /* Operator */
+.rougeHighlight .p { color: #f8f8f2 } /* Punctuation */
+.rougeHighlight .cm { color: #75715e } /* Comment.Multiline */
+.rougeHighlight .cp { color: #75715e } /* Comment.Preproc */
+.rougeHighlight .c1 { color: #75715e } /* Comment.Single */
+.rougeHighlight .cs { color: #75715e } /* Comment.Special */
+.rougeHighlight .ge { font-style: italic } /* Generic.Emph */
+.rougeHighlight .gs { font-weight: bold } /* Generic.Strong */
+.rougeHighlight .kc { color: #66d9ef } /* Keyword.Constant */
+.rougeHighlight .kd { color: #66d9ef } /* Keyword.Declaration */
+.rougeHighlight .kn { color: #f92672 } /* Keyword.Namespace */
+.rougeHighlight .kp { color: #66d9ef } /* Keyword.Pseudo */
+.rougeHighlight .kr { color: #66d9ef } /* Keyword.Reserved */
+.rougeHighlight .kt { color: #66d9ef } /* Keyword.Type */
+.rougeHighlight .ld { color: #e6db74 } /* Literal.Date */
+.rougeHighlight .m { color: #ae81ff } /* Literal.Number */
+.rougeHighlight .s { color: #e6db74 } /* Literal.String */
+.rougeHighlight .na { color: #a6e22e } /* Name.Attribute */
+.rougeHighlight .nb { color: #f8f8f2 } /* Name.Builtin */
+.rougeHighlight .nc { color: #a6e22e } /* Name.Class */
+.rougeHighlight .no { color: #66d9ef } /* Name.Constant */
+.rougeHighlight .nd { color: #a6e22e } /* Name.Decorator */
+.rougeHighlight .ni { color: #f8f8f2 } /* Name.Entity */
+.rougeHighlight .ne { color: #a6e22e } /* Name.Exception */
+.rougeHighlight .nf { color: #a6e22e } /* Name.Function */
+.rougeHighlight .nl { color: #f8f8f2 } /* Name.Label */
+.rougeHighlight .nn { color: #f8f8f2 } /* Name.Namespace */
+.rougeHighlight .nx { color: #a6e22e } /* Name.Other */
+.rougeHighlight .py { color: #f8f8f2 } /* Name.Property */
+.rougeHighlight .nt { color: #f92672 } /* Name.Tag */
+.rougeHighlight .nv { color: #f8f8f2 } /* Name.Variable */
+.rougeHighlight .ow { color: #f92672 } /* Operator.Word */
+.rougeHighlight .w { color: #f8f8f2 } /* Text.Whitespace */
+.rougeHighlight .mf { color: #ae81ff } /* Literal.Number.Float */
+.rougeHighlight .mh { color: #ae81ff } /* Literal.Number.Hex */
+.rougeHighlight .mi { color: #ae81ff } /* Literal.Number.Integer */
+.rougeHighlight .mo { color: #ae81ff } /* Literal.Number.Oct */
+.rougeHighlight .sb { color: #e6db74 } /* Literal.String.Backtick */
+.rougeHighlight .sc { color: #e6db74 } /* Literal.String.Char */
+.rougeHighlight .sd { color: #e6db74 } /* Literal.String.Doc */
+.rougeHighlight .s2 { color: #e6db74 } /* Literal.String.Double */
+.rougeHighlight .se { color: #ae81ff } /* Literal.String.Escape */
+.rougeHighlight .sh { color: #e6db74 } /* Literal.String.Heredoc */
+.rougeHighlight .si { color: #e6db74 } /* Literal.String.Interpol */
+.rougeHighlight .sx { color: #e6db74 } /* Literal.String.Other */
+.rougeHighlight .sr { color: #e6db74 } /* Literal.String.Regex */
+.rougeHighlight .s1 { color: #e6db74 } /* Literal.String.Single */
+.rougeHighlight .ss { color: #e6db74 } /* Literal.String.Symbol */
+.rougeHighlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
+.rougeHighlight .vc { color: #f8f8f2 } /* Name.Variable.Class */
+.rougeHighlight .vg { color: #f8f8f2 } /* Name.Variable.Global */
+.rougeHighlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */
+.rougeHighlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */
+
+.rougeHighlight .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
+.rougeHighlight .gd { color: #f92672; } /* Generic.Deleted & Diff Deleted */
+.rougeHighlight .gi { color: #a6e22e; } /* Generic.Inserted & Diff Inserted */
 
 .language-diff .gi {
   color: $brand-success;
@@ -80,13 +82,6 @@
   display: block;
 }
 
-.language-sh pre {
-  background: $gray-dark;
-  color: white;
-  -webkit-font-smoothing: antialiased;
-  border-left: 4px solid $yarn-blue;
-}
-
 pre {
   max-width: 100%;
   margin-bottom: 1.2rem;

diff --git a/_sass/_highlight.scss b/_sass/_highlight.scss
@@ -0,0 +1,76 @@
+/*
+Monokai style - ported by Luigi Maselli - http://grigio.org
+*/
+
+.hljs {
+  background: #292b2c;
+  -webkit-font-smoothing: antialiased;
+  border-left: 4px solid #2C8EBB;
+  color: #ddd;
+  max-width: 100%;
+  margin-bottom: 1.2rem;
+  border-radius: 3px;
+  padding: .6rem 1.2rem;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.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/css/main.scss b/css/main.scss
@@ -45,6 +45,7 @@ $npm-red: #C12127;
 @import "_details.scss";
 @import "_readmore.scss";
 @import "_copyable.scss";
+@import "_highlight.scss";
 
 // should come from bootstrap but it doesn't
 .justify-items-between {

diff --git a/js/src/lib/Details/Markdown.js b/js/src/lib/Details/Markdown.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import marked from 'marked';
 import xss from 'xss';
+import hljs from '../../../../js/src/lib/highlight.pack';
 
 import { prefixURL } from '../util';
 
@@ -69,9 +70,29 @@ const renderAndEscapeMarkdown = ({ source, githubRepo }) => {
     };
   }
 
-  const html = marked(source, { renderer, mangle: false });
-  const escaped = xss(html);
-  return escaped;
+  renderer.code = function(code, lang) {
+    if (lang && hljs.getLanguage(lang)) {
+      try {
+        const prepared = hljs.highlight(lang, code);
+        return `<pre><code class="${prepared.language}">${prepared.value}</code></pre>`;
+      } catch (err) {}
+    }
+
+    try {
+      const prepared = hljs.highlightAuto(code);
+      return `<pre><code class="${prepared.language}">${prepared.value}</code></pre>`;
+    } catch (err) {}
+
+    return `<pre><code>${code}</code></pre>`;
+  };
+
+  return xss(marked(source, { renderer, mangle: false }), {
+    whiteList: {
+      ...xss.getDefaultWhiteList(),
+      code: ['class'],
+      span: ['class'],
+    },
+  });
 };
 
 const Markdown = ({ source, githubRepo }) => (