replace highlightjs with prismjs

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

@@ -23,9 +23,8 @@
  */
 import React from "react";
 
-import { LightAsync as ReactSyntaxHighlighter } from "react-syntax-highlighter";
-// @ts-ignore
-import { arduinoLight } from "react-syntax-highlighter/dist/cjs/styles/hljs";
+import { PrismAsyncLight as ReactSyntaxHighlighter } from "react-syntax-highlighter";
+import { ghcolors } from "react-syntax-highlighter/dist/esm/styles/prism";
 
 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 { arduinoLight } from "react-syntax-highlighter/dist/cjs/styles/hljs";
+import { PrismAsyncLight as ReactSyntaxHighlighter, createElement } from "react-syntax-highlighter";
+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";
-
-// 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.
+import refractor from "refractor/core";
 
 const isLanguageRegistered = (lang: string) => {
-  // @ts-ignore listLanguages seems unknown to type
-  const registeredLanguages = lowlight.listLanguages();
-  return !!registeredLanguages[lang];
+  const registeredLanguages = refractor.listLanguages();
+  return registeredLanguages.includes(lang);
 };
 
 const loadLanguage = (lang: string, callback: () => void) => {
@@ -39,22 +34,19 @@ const loadLanguage = (lang: string, callback: () => void) => {
     callback();
   } else {
     import(
-      /* webpackChunkName: "tokenizer-lowlight-[request]" */
-      `highlight.js/lib/languages/${lang}`
+      /* webpackChunkName: "tokenizer-refractor-[request]" */
+      `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) => {
-    return lowlight.highlight(language, value).value;
-  }
+  ...refractor
 };
 
 export default refractorAdapter;