replace highlightjs with prismjs

package.json

@@ -21,7 +21,8 @@
   "resolutions": {
     "babel-core": "7.0.0-bridge.0",
     "gitdiff-parser": "https://github.com/scm-manager/gitdiff-parser#617747460280bf4522bb84d217a9064ac8eb6d3d",
-    "lowlight": "1.13.1"
+    "refractor": "3.0.0",
+    "prismjs": "1.20.0"
   },
   "babel": {
     "presets": [

scm-ui/eslint-config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scm-manager/eslint-config",
-  "version": "2.0.0",
+  "version": "2.1.0-SNAPSHOT",
   "description": "ESLint configuration for scm-manager and its plugins",
   "main": "src/index.js",
   "author": "Sebastian Sdorra <s.sdorra@gmail.com>",

scm-ui/ui-components/package.json

@@ -33,6 +33,7 @@
     "@types/react-router-dom": "^5.1.0",
     "@types/react-select": "^2.0.19",
     "@types/react-syntax-highlighter": "^11.0.1",
+    "@types/refractor": "^2.8.0",
     "@types/storybook__addon-storyshots": "^5.1.1",
     "@types/styled-components": "^5.1.0",
     "enzyme-context": "^1.1.2",
@@ -52,6 +53,7 @@
     "date-fns": "^2.4.1",
     "gitdiff-parser": "^0.1.2",
     "lowlight": "^1.13.0",
+    "prism-themes": "^1.4.0",
     "query-string": "5",
     "react": "^16.8.6",
     "react-diff-view": "^2.4.1",
@@ -60,7 +62,8 @@
     "react-markdown": "^4.0.6",
     "react-router-dom": "^5.1.2",
     "react-select": "^2.1.2",
-    "react-syntax-highlighter": "https://github.com/conorhastings/react-syntax-highlighter#08bcf49b1aa7877ce94f7208e73dfa6bef8b26e7"
+    "react-syntax-highlighter": "https://github.com/conorhastings/react-syntax-highlighter#08bcf49b1aa7877ce94f7208e73dfa6bef8b26e7",
+    "refractor": "^3.0.0"
   },
   "babel": {
     "presets": [

scm-ui/ui-components/src/SyntaxHighlighter.tsx

@@ -23,9 +23,8 @@
  */
 import React from "react";
 
-import { LightAsync as ReactSyntaxHighlighter } from "react-syntax-highlighter";
+import { PrismAsyncLight as ReactSyntaxHighlighter } from "react-syntax-highlighter";
-// @ts-ignore
+import { ghcolors } from "react-syntax-highlighter/dist/esm/styles/prism";
-import { arduinoLight } from "react-syntax-highlighter/dist/cjs/styles/hljs";
 
 type Props = {
   language?: string;
@@ -50,7 +49,7 @@ class SyntaxHighlighter extends React.Component<Props> {
   render() {
     const language = this.getLanguage();
     return (
-      <ReactSyntaxHighlighter showLineNumbers={false} language={language} style={arduinoLight}>
+      <ReactSyntaxHighlighter showLineNumbers={false} language={language} style={ghcolors}>
         {this.props.value}
       </ReactSyntaxHighlighter>
     );

scm-ui/ui-components/src/repos/TokenizedDiffView.tsx

@@ -29,7 +29,7 @@ import { File } from "./DiffTypes";
 
 // styling for the diff tokens
 // this must be aligned with th style, which is used in the SyntaxHighlighter component
-import "highlight.js/styles/arduino-light.css";
+import "prism-themes/themes/prism-ghcolors.css";
 
 const DiffView = styled(Diff)`
   /* align line numbers */
@@ -58,6 +58,22 @@ const DiffView = styled(Diff)`
   &.unified .diff-widget-content .is-indented-line {
     padding-left: 6.5rem;
   }
+  
+  /* conflict between prism and bulma number class */
+  .number {
+    align-items: inherit;
+    background-color: inherit;
+    border-radius: inherit;
+    display: initial;
+    font-size: inherit;
+    height: inherit;
+    justify-content: inherit;
+    margin-right: inherit;
+    margin-left: 0;
+    min-width: inherit;
+    padding: 0;
+    text-align: inherit;
+  }
 `;
 
 // WebWorker which creates tokens for syntax highlighting

scm-ui/ui-components/src/repos/annotate/Annotate.tsx

@@ -24,10 +24,9 @@
 
 import React, { FC, useReducer } from "react";
 import { Repository, AnnotatedSource, AnnotatedLine } from "@scm-manager/ui-types";
-
 // @ts-ignore
-import { LightAsync as ReactSyntaxHighlighter, createElement } from "react-syntax-highlighter";
+import { PrismAsyncLight as ReactSyntaxHighlighter, createElement } from "react-syntax-highlighter";
-import { arduinoLight } from "react-syntax-highlighter/dist/cjs/styles/hljs";
+import { ghcolors } from "react-syntax-highlighter/dist/esm/styles/prism";
 import { DateInput } from "../../dates";
 import Popover from "./Popover";
 import AnnotateLine from "./AnnotateLine";
@@ -145,7 +144,7 @@ const Annotate: FC<Props> = ({ source, repository, baseDate }) => {
       <ReactSyntaxHighlighter
         showLineNumbers={false}
         language={source.language}
-        style={arduinoLight}
+        style={ghcolors}
         renderer={defaultRenderer}
       >
         {code}

scm-ui/ui-components/src/repos/refractorAdapter.ts

@@ -22,16 +22,11 @@
  * SOFTWARE.
  */
 
-import lowlight from "lowlight/lib/core";
+import refractor from "refractor/core";
-
-// adapter to let lowlight look like refractor
-// this is required because react-diff-view does only support refractor,
-// but we want same highlighting as in the source code browser.
 
 const isLanguageRegistered = (lang: string) => {
-  // @ts-ignore listLanguages seems unknown to type
+  const registeredLanguages = refractor.listLanguages();
-  const registeredLanguages = lowlight.listLanguages();
+  return registeredLanguages.includes(lang);
-  return !!registeredLanguages[lang];
 };
 
 const loadLanguage = (lang: string, callback: () => void) => {
@@ -39,22 +34,19 @@ const loadLanguage = (lang: string, callback: () => void) => {
     callback();
   } else {
     import(
-      /* webpackChunkName: "tokenizer-lowlight-[request]" */
+      /* webpackChunkName: "tokenizer-refractor-[request]" */
-      `highlight.js/lib/languages/${lang}`
+      `refractor/lang/${lang}`
     ).then(loadedLanguage => {
-      lowlight.registerLanguage(lang, loadedLanguage.default);
+      refractor.register(loadedLanguage.default);
       callback();
     });
   }
 };
 
 const refractorAdapter = {
-  ...lowlight,
   isLanguageRegistered,
   loadLanguage,
-  highlight: (value: string, language: string) => {
+  ...refractor
-    return lowlight.highlight(language, value).value;
-  }
 };
 
 export default refractorAdapter;

scm-ui/ui-plugins/package.json

@@ -19,7 +19,7 @@
   },
   "devDependencies": {
     "@scm-manager/babel-preset": "^2.0.0",
-    "@scm-manager/eslint-config": "^2.0.0",
+    "@scm-manager/eslint-config": "^2.1.0-SNAPSHOT",
     "@scm-manager/jest-preset": "^2.0.0",
     "@scm-manager/prettier-config": "^2.0.0",
     "@scm-manager/tsconfig": "^2.0.0",

yarn.lock

@@ -3191,6 +3191,11 @@
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.0.1.tgz#b6e98083f13faa1e5231bfa3bdb1b0feff536b6d"
   integrity sha512-boy4xPNEtiw6N3abRhBi/e7hNvy3Tt8E9ZRAQrwAGzoCGZS/1wjo9KY7JHhnfnEsG5wSjDbymCozUM9a3ea7OQ==
 
+"@types/prismjs@*":
+  version "1.16.1"
+  resolved "https://registry.yarnpkg.com/@types/prismjs/-/prismjs-1.16.1.tgz#50b82947207847db6abcbcd14caa89e3b897c259"
+  integrity sha512-RNgcK3FEc1GpeOkamGDq42EYkb6yZW5OWQwTS56NJIB8WL0QGISQglA7En7NUx9RGP8AC52DOe+squqbAckXlA==
+
 "@types/prop-types@*":
   version "15.7.3"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
@@ -3291,6 +3296,13 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
+"@types/refractor@^2.8.0":
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/@types/refractor/-/refractor-2.8.0.tgz#2e17b69f27e89c1ea076f49b599abe3567c54e01"
+  integrity sha512-l3wSB96RFZnvB8bnbF8UmYsDD1MQl+u7jtYq+DgI/vo3RD5pdbK3OitGEvMO3DNJhTYmCEhXLVWyyWTddzwNzQ==
+  dependencies:
+    "@types/prismjs" "*"
+
 "@types/source-list-map@*":
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9"
@@ -7488,7 +7500,7 @@ fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6:
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
 
-fault@^1.0.0:
+fault@^1.0.0, fault@^1.0.2:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/fault/-/fault-1.0.4.tgz#eafcfc0a6d214fc94601e170df29954a4f842f13"
   integrity sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==
@@ -10823,7 +10835,7 @@ lower-case@^2.0.1:
   dependencies:
     tslib "^1.10.0"
 
-lowlight@1.13.1, lowlight@^1.13.0, lowlight@~1.11.0:
+lowlight@^1.13.0:
   version "1.13.1"
   resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.13.1.tgz#c4f0e03906ebd23fedf2d258f6ab2f6324cf90eb"
   integrity sha512-kQ71/T6RksEVz9AlPq07/2m+SU/1kGvt9k39UtvHX760u4SaWakaYH7hYgH5n6sTsCWk4MVYzUzLU59aN5CSmQ==
@@ -10831,6 +10843,14 @@ lowlight@1.13.1, lowlight@^1.13.0, lowlight@~1.11.0:
     fault "^1.0.0"
     highlight.js "~9.16.0"
 
+lowlight@~1.11.0:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.11.0.tgz#1304d83005126d4e8b1dc0f07981e9b689ec2efc"
+  integrity sha512-xrGGN6XLL7MbTMdPD6NfWPwY43SNkjf/d0mecSx/CW36fUZTjRHEq0/Cdug3TWKtRXLWi7iMl1eP0olYxj/a4A==
+  dependencies:
+    fault "^1.0.2"
+    highlight.js "~9.13.0"
+
 lru-cache@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
@@ -12175,7 +12195,7 @@ parse-asn1@^5.0.0, parse-asn1@^5.1.5:
     pbkdf2 "^3.0.3"
     safe-buffer "^5.1.1"
 
-parse-entities@^1.1.0, parse-entities@^1.1.2:
+parse-entities@^1.1.0:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-1.2.2.tgz#c31bf0f653b6661354f8973559cb86dd1d5edf50"
   integrity sha512-NzfpbxW/NPrzZ/yYSoQxyqUZMZXIdCfE0OIN4ESsnptHJECoUk3FZktxNuzQf4tjt5UEopnxpYJbvYuxIFDdsg==
@@ -12187,6 +12207,18 @@ parse-entities@^1.1.0, parse-entities@^1.1.2:
     is-decimal "^1.0.0"
     is-hexadecimal "^1.0.0"
 
+parse-entities@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-2.0.0.tgz#53c6eb5b9314a1f4ec99fa0fdf7ce01ecda0cbe8"
+  integrity sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==
+  dependencies:
+    character-entities "^1.0.0"
+    character-entities-legacy "^1.0.0"
+    character-reference-invalid "^1.0.0"
+    is-alphanumerical "^1.0.0"
+    is-decimal "^1.0.0"
+    is-hexadecimal "^1.0.0"
+
 parse-github-repo-url@^1.3.0:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/parse-github-repo-url/-/parse-github-repo-url-1.4.1.tgz#9e7d8bb252a6cb6ba42595060b7bf6df3dbc1f50"
@@ -12910,20 +12942,18 @@ pretty-hrtime@^1.0.3:
   resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
   integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=
 
-prismjs@^1.16.0, prismjs@^1.8.4:
+prism-themes@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/prism-themes/-/prism-themes-1.4.0.tgz#2f93a33450532577c7962928655d7b4305fa843d"
+  integrity sha512-VTy6t69sS1FavspBsodoF/x/eduPydUXyZH+++Jkun0VQ4X7lCZVvsfGsYKzkUan2PJNcV2mA4lAFcr7KKXD1g==
+
+prismjs@1.20.0, prismjs@^1.16.0, prismjs@^1.8.4, prismjs@~1.20.0:
   version "1.20.0"
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.20.0.tgz#9b685fc480a3514ee7198eac6a3bf5024319ff03"
   integrity sha512-AEDjSrVNkynnw6A+B1DsFkd6AVdTnp+/WoUixFRULlCLZVRZlVQMVWio/16jv7G1FscUxQxOQhWwApgbnxr6kQ==
   optionalDependencies:
     clipboard "^2.0.0"
 
-prismjs@~1.17.0:
-  version "1.17.1"
-  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.17.1.tgz#e669fcbd4cdd873c35102881c33b14d0d68519be"
-  integrity sha512-PrEDJAFdUGbOP6xK/UsfkC5ghJsPJviKgnQOoxaDbBjwc8op68Quupwt1DeAFoG8GImPhiKXAvvsH7wDSLsu1Q==
-  optionalDependencies:
-    clipboard "^2.0.0"
-
 private@^0.1.8, private@~0.1.5:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
@@ -13847,14 +13877,14 @@ reflect.ownkeys@^0.2.0:
   resolved "https://registry.yarnpkg.com/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz#749aceec7f3fdf8b63f927a04809e90c5c0b3460"
   integrity sha1-dJrO7H8/34tj+SegSAnpDFwLNGA=
 
-refractor@^2.10.1, refractor@^2.4.1:
+refractor@3.0.0, refractor@^2.10.1, refractor@^2.4.1, refractor@^3.0.0:
-  version "2.10.1"
+  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/refractor/-/refractor-2.10.1.tgz#166c32f114ed16fd96190ad21d5193d3afc7d34e"
+  resolved "https://registry.yarnpkg.com/refractor/-/refractor-3.0.0.tgz#7c8072eaf49dbc1b333e7acc64fb52a1c9b17c75"
-  integrity sha512-Xh9o7hQiQlDbxo5/XkOX6H+x/q8rmlmZKr97Ie1Q8ZM32IRRd3B/UxuA/yXDW79DBSXGWxm2yRTbcTVmAciJRw==
+  integrity sha512-eCGK/oP4VuyW/ERqjMZRZHxl2QsztbkedkYy/SxqE/+Gh1gLaAF17tWIOcVJDiyGhar1NZy/0B9dFef7J0+FDw==
   dependencies:
     hastscript "^5.0.0"
-    parse-entities "^1.1.2"
+    parse-entities "^2.0.0"
-    prismjs "~1.17.0"
+    prismjs "~1.20.0"
 
 regenerate-unicode-properties@^8.2.0:
   version "8.2.0"