[WIP] Replace Highlight.js with Prism

package.json

@@ -51,6 +51,7 @@
     "@types/numeral": "^0.0.28",
     "@types/react-beautiful-dnd": "^13.0.0",
     "@types/react-input-autosize": "^2.2.0",
+    "@types/react-syntax-highlighter": "^11.0.5",
     "@types/react-virtualized-auto-sizer": "^1.0.0",
     "@types/react-window": "^1.8.2",
     "@types/vfile-message": "^2.0.0",
@@ -66,6 +67,8 @@
     "react-focus-on": "^3.5.0",
     "react-input-autosize": "^2.2.2",
     "react-is": "~16.3.0",
+    "react-syntax-highlighter": "^15.4.3",
+    "react-syntax-highlighter-virtualized-renderer": "^1.1.0",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.8.5",
     "rehype-raw": "^5.0.0",

src/components/code/__snapshots__/_code_block.test.tsx.snap

@@ -19,12 +19,12 @@ exports[`EuiCodeBlockImpl block renders a pre block tag 1`] = `
   class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge testClass1 testClass2"
 >
   <pre
-    class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
+    aria-label="aria-label"
+    class="prismjs euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
+    data-test-subj="test subject string"
   >
     <code
-      aria-label="aria-label"
       class="euiCodeBlock__code"
-      data-test-subj="test subject string"
     >
       var some = 'code';
 console.log(some);
@@ -71,7 +71,7 @@ exports[`EuiCodeBlockImpl inline highlights javascript code, adding "js" class 1
   class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
 >
   <code
-    class="euiCodeBlock__code js hljs javascript"
+    class="euiCodeBlock__code js"
   />
 </span>
 `;

src/components/code/__snapshots__/code_block.test.tsx.snap

@@ -122,13 +122,20 @@ exports[`EuiCodeBlock props language is rendered 1`] = `
   class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge"
 >
   <pre
-    class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
+    class="prismjs euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
   >
     <code
-      class="euiCodeBlock__code html hljs xml"
+      class="euiCodeBlock__code html"
+      style="white-space: pre;"
     >
-      var some = 'code';
-console.log(some);
+      <span
+        class=""
+      >
+        var some = 'code';
+
+      </span>
+      console.log(some);
+
     </code>
   </pre>
 </div>
@@ -258,12 +265,12 @@ exports[`EuiCodeBlock renders a code block 1`] = `
   class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge testClass1 testClass2"
 >
   <pre
-    class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
+    aria-label="aria-label"
+    class="prismjs euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
+    data-test-subj="test subject string"
   >
     <code
-      aria-label="aria-label"
       class="euiCodeBlock__code"
-      data-test-subj="test subject string"
     >
       var some = 'code';
 console.log(some);

src/components/code/_code_block.scss

@@ -164,120 +164,106 @@
     background: transparent;
   }
 
-  .hljs > *::selection {
-    // Only change the color if the variable IS a color
-    // or else no highlight color shows up at all
-    @if type-of($euiCodeBlockSelectedBackgroundColor) == color {
-      background-color: $euiCodeBlockSelectedBackgroundColor;
-    }
-  }
-
-  .hljs-comment,
-  .hljs-quote {
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
     color: $euiCodeBlockCommentColor;
     font-style: italic;
   }
 
-  .hljs-selector-tag {
-    color: $euiCodeBlockSelectorTagColor;
-    font-weight: $euiCodeFontWeightBold;
-  }
-
-  .hljs-string,
-  .hljs-subst,
-  .hljs-doctag {
-    color: $euiCodeBlockStringColor;
+  .token.punctuation {
+    opacity: .7;
   }
 
-  .hljs-number,
-  .hljs-literal,
-  .hljs-regexp,
-  .hljs-variable,
-  .hljs-template-variable,
-  .hljs-tag .hljs-attr {
-    color: $euiCodeBlockNumberColor;
+  .token.namespace {
+    opacity: .7;
   }
 
-  .hljs-keyword {
-    color: $euiCodeBlockKeywordColor;
-  }
-
-  .hljs-function > .hljs-title {
-    color: $euiCodeBlockFunctionTitleColor;
-  }
-
-  .hljs-tag {
+  .token.property,
+  .token.tag,
+  .token.boolean,
+  .token.number,
+  .token.constant,
+  .token.symbol {
     color: $euiCodeBlockTagColor;
   }
 
-  .hljs-name {
-    color: $euiCodeBlockNameColor;
-  }
-
-  .hljs-type,
-  .hljs-class .hljs-title {
-    color: $euiCodeBlockTypeColor;
-  }
-
-  .hljs-attribute {
-    color: $euiCodeBlockAttributeColor;
-  }
-
-  .hljs-symbol,
-  .hljs-bullet,
-  .hljs-built_in,
-  .hljs-builtin-name,
-  .hljs-link {
-    color: $euiCodeBlockSymbolColor;
+  .token.selector,
+  .token.attr-name,
+  .token.string,
+  .token.char,
+  .token.builtin,
+  .token.inserted {
+    color: $euiCodeBlockStringColor;
   }
 
-  .hljs-params {
-    color: $euiCodeBlockParamsColor;
+  .token.operator,
+  .token.entity,
+  .token.url,
+  .language-css .token.string,
+  .style .token.string,
+  .token.variable {
+    color: inherit;
   }
 
-  .hljs-meta {
-    color: $euiCodeBlockMetaColor;
+  .token.atrule,
+  .token.attr-value,
+  .token.keyword {
+    color: $euiCodeBlockKeywordColor;
   }
 
-  .hljs-title {
-    color: $euiCodeBlockTitleColor;
+  .token.regex,
+  .token.important {
+    color: #e90;
   }
 
-  .hljs-section {
-    color: $euiCodeBlockSectionColor;
+  .token.important,
+  .token.bold {
+    font-weight: $euiFontWeightBold;
   }
-
-  .hljs-addition,
-  .hljs-deletion {
-    padding-left: $euiSizeXS;
-    margin-left: -$euiSizeXS;
+  .token.italic {
+    font-style: italic;
   }
 
-  .hljs-addition {
-    box-shadow: -$euiSizeXS 0 $euiCodeBlockAdditionColor;
+  .token.entity {
+    cursor: help;
   }
 
-  .hljs-deletion {
-    box-shadow: -$euiSizeXS 0 $euiCodeBlockDeletionColor;
+  .token.deleted {
+    color: $euiCodeBlockDeletionColor;
   }
+}
 
-  .hljs-selector-class {
-    color: $euiCodeBlockSelectorClassColor;
-  }
 
-  .hljs-selector-id {
-    color: $euiCodeBlockSelectorIdColor;
-  }
 
-  .hljs-emphasis {
-    font-style: italic;
-  }
 
-  .hljs-strong {
-    font-weight: $euiCodeFontWeightBold;
-  }
 
-  .hljs-link {
-    text-decoration: underline;
-  }
-}
+// .euiCodeBlock {
+//   pre {
+//     @include euiScrollBar;
+//     height: 100%;
+//     overflow: auto;
+//     display: block;
+//     white-space: pre;
+//   }
+//
+//   code[class*="language-"] {
+//     @include euiCodeFont;
+//     display: block;
+//     line-height: $euiLineHeight;
+//     font-weight: $euiFontWeightRegular;
+//     font-size: inherit;
+//   }
+//
+//   /* Inline code */
+//   :not(pre) > code[class*="language-"] {
+//     display: inline-block;
+//     white-space: pre;
+//     color: $euiTextColor;
+//     font-size: 90%; /* 1 */
+//     padding: 0 $euiSizeS;
+//     background: $euiCodeBlockBackgroundColor;
+//   }
+//
+// }