Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-14 01:15:44 +01:00
Code Issues Packages Projects Releases Activity

replace highlightjs with prismjs

Browse Source
This commit is contained in:
Sebastian Sdorra
2020-06-16 21:04:07 +02:00
parent 7deb300c03
commit a4e6e4186a
9 changed files with 85 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@@ -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": [

2
scm-ui/eslint-config/package.json
View File

@@ -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>",

5
scm-ui/ui-components/package.json
View File

@@ -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": [

7
scm-ui/ui-components/src/SyntaxHighlighter.tsx
View File

@@ -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>
);

18
scm-ui/ui-components/src/repos/TokenizedDiffView.tsx
View File

@@ -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

7
scm-ui/ui-components/src/repos/annotate/Annotate.tsx
View File

@@ -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}

22
scm-ui/ui-components/src/repos/refractorAdapter.ts
View File

@@ -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;

2
scm-ui/ui-plugins/package.json
View File

@@ -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",

64
yarn.lock
View File

@@ -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:
version "2.10.1"
resolved "https://registry.yarnpkg.com/refractor/-/refractor-2.10.1.tgz#166c32f114ed16fd96190ad21d5193d3afc7d34e"
integrity sha512-Xh9o7hQiQlDbxo5/XkOX6H+x/q8rmlmZKr97Ie1Q8ZM32IRRd3B/UxuA/yXDW79DBSXGWxm2yRTbcTVmAciJRw==
refractor@3.0.0, refractor@^2.10.1, refractor@^2.4.1, refractor@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/refractor/-/refractor-3.0.0.tgz#7c8072eaf49dbc1b333e7acc64fb52a1c9b17c75"
integrity sha512-eCGK/oP4VuyW/ERqjMZRZHxl2QsztbkedkYy/SxqE/+Gh1gLaAF17tWIOcVJDiyGhar1NZy/0B9dFef7J0+FDw==
dependencies:
hastscript "^5.0.0"
parse-entities "^1.1.2"
prismjs "~1.17.0"
parse-entities "^2.0.0"
prismjs "~1.20.0"
regenerate-unicode-properties@^8.2.0:
version "8.2.0"