From 9a51a552c4b8944d95e4487200b005f049862471 Mon Sep 17 00:00:00 2001 From: ttang Date: Fri, 7 Jul 2023 17:15:03 +0800 Subject: [PATCH] feat: highlight code --- packages/client/scan/package.json | 2 + .../src/components/ModelView/Definition.tsx | 62 +++- .../client/scan/src/container/ModelView.tsx | 2 +- packages/client/scan/src/index.tsx | 1 + .../scan/src/styles/prism-vsc-dark-plus.css | 318 ++++++++++++++++++ 5 files changed, 372 insertions(+), 13 deletions(-) create mode 100644 packages/client/scan/src/styles/prism-vsc-dark-plus.css diff --git a/packages/client/scan/package.json b/packages/client/scan/package.json index 77548d92..de86b82b 100644 --- a/packages/client/scan/package.json +++ b/packages/client/scan/package.json @@ -18,6 +18,7 @@ "@types/jest": "^27.0.1", "@types/lodash": "^4.14.191", "@types/node": "^16.7.13", + "@types/prismjs": "^1.26.0", "@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", "@types/styled-components": "^5.1.26", @@ -34,6 +35,7 @@ "lodash": "^4.17.21", "lodash-es": "^4.17.21", "monaco-editor": "^0.36.1", + "prismjs": "^1.29.0", "react": "^18.2.0", "react-aria-components": "^1.0.0-alpha.5", "react-device-detect": "^2.2.2", diff --git a/packages/client/scan/src/components/ModelView/Definition.tsx b/packages/client/scan/src/components/ModelView/Definition.tsx index 1b516f44..b211bfb7 100644 --- a/packages/client/scan/src/components/ModelView/Definition.tsx +++ b/packages/client/scan/src/components/ModelView/Definition.tsx @@ -1,6 +1,7 @@ import { useCallback, useEffect, useState } from 'react' import { Link, useParams } from 'react-router-dom' import styled from 'styled-components' +import Prism from 'prismjs' import FileSaver from 'file-saver' import { GraphQLEditor, PassedSchema } from 'graphql-editor' import { getModelInfo, queryModelGraphql } from '../../api' @@ -9,6 +10,10 @@ import { schemas } from '../../utils/composedb-types/schemas' import { AxiosError } from 'axios' import { useCeramicCtx } from '../../context/CeramicCtx' +import 'prismjs/components/prism-typescript' +import 'prismjs/plugins/line-numbers/prism-line-numbers.js' +import 'prismjs/plugins/line-numbers/prism-line-numbers.css' + export default function Definition() { const { streamId } = useParams() const { network } = useCeramicCtx() @@ -116,9 +121,10 @@ export default function Definition() {
- 
-                {JSON.stringify(modelData.composite, null, 2)}
-
+
)} @@ -139,11 +145,10 @@ export default function Definition() {
- 
-                
-                  {JSON.stringify(modelData.runtimeDefinition, null, 2)}
-                
-
+
)} @@ -152,6 +157,34 @@ export default function Definition() { ) } +export function Code({ name, content }: { name: string; content: string }) { + useEffect(() => { + Prism.highlightAll() + }, [content]) + + const preCode = `
${content}
` + return ( + +
+ + ) +} + +const CodeBox = styled.div` + > .name { + border-bottom: none; + display: inline-block; + padding: 10px 20px; + } + > .line-numbers { + overflow: scroll; + /* margin-bottom: 20px; */ + } +` + const EditorBox = styled.div` height: calc(100vh - 300px); max-height: 800px; @@ -175,10 +208,10 @@ const ResultBox = styled.div` border: 1px solid #39424c; border-radius: 20px; } - div { + > div { width: calc(50% - 10px); margin: 20px 0px; - padding: 10px; + /* padding: 10px; */ box-sizing: border-box; background-color: #1a1a1c; .title { @@ -192,7 +225,8 @@ const ResultBox = styled.div` line-height: 28px; font-style: italic; color: #ffffff; - + padding: 10px; + box-sizing: border-box; button { background: #ffffff; } @@ -204,10 +238,14 @@ const ResultBox = styled.div` } } .result-text { - width: 100%; word-wrap: break-word; color: #718096; overflow: scroll; + width: 100%; + margin-top: 0; + > div { + width: fit-content; + } } button { diff --git a/packages/client/scan/src/container/ModelView.tsx b/packages/client/scan/src/container/ModelView.tsx index be5b1b8b..992ee9e4 100644 --- a/packages/client/scan/src/container/ModelView.tsx +++ b/packages/client/scan/src/container/ModelView.tsx @@ -155,7 +155,7 @@ export default function ModelView() {
{modelStream?.streamContent?.name} - {!isIndexed && } + {!isIndexed && } Model Definition diff --git a/packages/client/scan/src/index.tsx b/packages/client/scan/src/index.tsx index 273cf430..a06462e8 100644 --- a/packages/client/scan/src/index.tsx +++ b/packages/client/scan/src/index.tsx @@ -5,6 +5,7 @@ import { BrowserRouter } from 'react-router-dom' import './styles/index.css' import './styles/select.css' import './styles/tab.css' +import './styles/prism-vsc-dark-plus.css' import App from './App' import reportWebVitals from './reportWebVitals' diff --git a/packages/client/scan/src/styles/prism-vsc-dark-plus.css b/packages/client/scan/src/styles/prism-vsc-dark-plus.css new file mode 100644 index 00000000..b4753b89 --- /dev/null +++ b/packages/client/scan/src/styles/prism-vsc-dark-plus.css @@ -0,0 +1,318 @@ +pre[class*="language-"], +code[class*="language-"] { + color: #d4d4d4; + font-size: 13px; + text-shadow: none; + font-family: Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + line-height: 1.5; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::selection, +code[class*="language-"]::selection, +pre[class*="language-"] *::selection, +code[class*="language-"] *::selection { + text-shadow: none; + background: #264F78; +} + +@media print { + pre[class*="language-"], + code[class*="language-"] { + text-shadow: none; + } +} + +pre[class*="language-"] { + padding: 1em; + margin: 0; + overflow: auto; + background: #1e1e1e; +} + +:not(pre) > code[class*="language-"] { + padding: .1em .3em; + border-radius: .3em; + color: #db4c69; + background: #1e1e1e; +} +/********************************************************* +* Tokens +*/ +.namespace { + opacity: .7; +} + +.token.doctype .token.doctype-tag { + color: #569CD6; +} + +.token.doctype .token.name { + color: #9cdcfe; +} + +.token.comment, +.token.prolog { + color: #6a9955; +} + +.token.punctuation, +.language-html .language-css .token.punctuation, +.language-html .language-javascript .token.punctuation { + color: #d4d4d4; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.inserted, +.token.unit { + color: #b5cea8; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.deleted { + color: #ce9178; +} + +.language-css .token.string.url { + text-decoration: underline; +} + +.token.operator, +.token.entity { + color: #d4d4d4; +} + +.token.operator.arrow { + color: #569CD6; +} + +.token.atrule { + color: #ce9178; +} + +.token.atrule .token.rule { + color: #c586c0; +} + +.token.atrule .token.url { + color: #9cdcfe; +} + +.token.atrule .token.url .token.function { + color: #dcdcaa; +} + +.token.atrule .token.url .token.punctuation { + color: #d4d4d4; +} + +.token.keyword { + color: #569CD6; +} + +.token.keyword.module, +.token.keyword.control-flow { + color: #c586c0; +} + +.token.function, +.token.function .token.maybe-class-name { + color: #dcdcaa; +} + +.token.regex { + color: #d16969; +} + +.token.important { + color: #569cd6; +} + +.token.italic { + font-style: italic; +} + +.token.constant { + color: #9cdcfe; +} + +.token.class-name, +.token.maybe-class-name { + color: #4ec9b0; +} + +.token.console { + color: #9cdcfe; +} + +.token.parameter { + color: #9cdcfe; +} + +.token.interpolation { + color: #9cdcfe; +} + +.token.punctuation.interpolation-punctuation { + color: #569cd6; +} + +.token.boolean { + color: #569cd6; +} + +.token.property, +.token.variable, +.token.imports .token.maybe-class-name, +.token.exports .token.maybe-class-name { + color: #9cdcfe; +} + +.token.selector { + color: #d7ba7d; +} + +.token.escape { + color: #d7ba7d; +} + +.token.tag { + color: #569cd6; +} + +.token.tag .token.punctuation { + color: #808080; +} + +.token.cdata { + color: #808080; +} + +.token.attr-name { + color: #9cdcfe; +} + +.token.attr-value, +.token.attr-value .token.punctuation { + color: #ce9178; +} + +.token.attr-value .token.punctuation.attr-equals { + color: #d4d4d4; +} + +.token.entity { + color: #569cd6; +} + +.token.namespace { + color: #4ec9b0; +} +/********************************************************* +* Language Specific +*/ + +pre[class*="language-javascript"], +code[class*="language-javascript"], +pre[class*="language-jsx"], +code[class*="language-jsx"], +pre[class*="language-typescript"], +code[class*="language-typescript"], +pre[class*="language-tsx"], +code[class*="language-tsx"] { + color: #9cdcfe; +} + +pre[class*="language-css"], +code[class*="language-css"] { + color: #ce9178; +} + +pre[class*="language-html"], +code[class*="language-html"] { + color: #d4d4d4; +} + +.language-regex .token.anchor { + color: #dcdcaa; +} + +.language-html .token.punctuation { + color: #808080; +} +/********************************************************* +* Line highlighting +*/ +pre[class*="language-"] > code[class*="language-"] { + position: relative; + z-index: 1; +} + +.line-highlight.line-highlight { + background: #f7ebc6; + box-shadow: inset 5px 0 0 #f7d87c; + z-index: 0; +} + +pre[class*="language-"].line-numbers { + position: relative; + padding-left: 3.8em; + counter-reset: linenumber; + white-space: pre-wrap; +} + +pre[class*="language-"].line-numbers > code { + position: relative; + white-space: inherit; +} + +.line-numbers .line-numbers-rows { + position: absolute; + pointer-events: none; + top: 0; + font-size: 100%; + left: -3.8em; + width: 3em; /* works for line-numbers below 1000 lines */ + letter-spacing: -1px; + border-right: 1px solid #999; + + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + +} + +.line-numbers-rows > span { + pointer-events: none; + display: block; + counter-increment: linenumber; +} + +.line-numbers-rows > span:before { + content: counter(linenumber); + color: #999; + display: block; + padding-right: 0.8em; + text-align: right; +}