diff --git a/package.json b/package.json index f8d6c968c9..9beb5f891f 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,8 @@ "resolutions": { "babel-core": "7.0.0-bridge.0", "gitdiff-parser": "https://github.com/scm-manager/gitdiff-parser#420d6cfa17a6a8f9bf1a517a2c629dcb332dbe13", - "lowlight": "1.13.1" + "refractor": "3.0.0", + "prismjs": "1.20.0" }, "babel": { "presets": [ diff --git a/scm-ui/ui-components/package.json b/scm-ui/ui-components/package.json index 6b799db3fd..2ceb3c5f62 100644 --- a/scm-ui/ui-components/package.json +++ b/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": [ diff --git a/scm-ui/ui-components/src/SyntaxHighlighter.tsx b/scm-ui/ui-components/src/SyntaxHighlighter.tsx index a8a06ac29d..93a0c4c555 100644 --- a/scm-ui/ui-components/src/SyntaxHighlighter.tsx +++ b/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; @@ -53,7 +52,7 @@ class SyntaxHighlighter extends React.Component { const { showLineNumbers } = this.props; const language = this.getLanguage(); return ( - + {this.props.value} ); diff --git a/scm-ui/ui-components/src/repos/TokenizedDiffView.tsx b/scm-ui/ui-components/src/repos/TokenizedDiffView.tsx index c012742dbd..3f004272f8 100644 --- a/scm-ui/ui-components/src/repos/TokenizedDiffView.tsx +++ b/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 diff --git a/scm-ui/ui-components/src/repos/annotate/Annotate.tsx b/scm-ui/ui-components/src/repos/annotate/Annotate.tsx index d95b24fcdf..90ed0f9207 100644 --- a/scm-ui/ui-components/src/repos/annotate/Annotate.tsx +++ b/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 "../../useDateFormatter"; import Popover from "./Popover"; import AnnotateLine from "./AnnotateLine"; @@ -145,7 +144,7 @@ const Annotate: FC = ({ source, repository, baseDate }) => { {code} diff --git a/scm-ui/ui-components/src/repos/refractorAdapter.ts b/scm-ui/ui-components/src/repos/refractorAdapter.ts index acb56fa396..0bac53e4d2 100644 --- a/scm-ui/ui-components/src/repos/refractorAdapter.ts +++ b/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;