admin-web: Add linenumbers

yusys-cloud · Aug 25, 2022 · 4aa5aa4 · 4aa5aa4
1 parent 5e00e5e
commit 4aa5aa4
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 8 deletions.
diff --git a/admin/src/assets/js/prism.js b/admin/src/assets/js/prism.js
diff --git a/admin/src/components/molecules/DAGDefinition.tsx b/admin/src/components/molecules/DAGDefinition.tsx
@@ -3,19 +3,30 @@ import Prism from '../../assets/js/prism';
 
 type Props = {
   value: string;
+  lineNumbers?: boolean;
+  startLine?: number;
 };
 
-function DAGDefinition({ value }: Props) {
+const language = 'yaml';
+
+function DAGDefinition({ value, lineNumbers, startLine }: Props) {
   React.useEffect(() => {
     Prism.highlightAll();
   }, [value]);
+  const className = React.useMemo(() => {
+    if (lineNumbers) {
+      return `language-${language} line-numbers`;
+    }
+    return `language-${language}`;
+  }, [lineNumbers]);
   return (
     <pre
       style={{
         fontSize: '0.9rem',
       }}
+      data-start={startLine || 1}
     >
-      <code className="language-yaml">{value}</code>
+      <code className={className}>{value}</code>
     </pre>
   );
 }

diff --git a/admin/src/components/organizations/DAGSpec.tsx b/admin/src/components/organizations/DAGSpec.tsx
@@ -195,7 +195,7 @@ function DAGSpec({ data }: Props) {
                     ></DAGEditor>
                   </Box>
                 ) : (
-                  <DAGDefinition value={data.Definition} />
+                  <DAGDefinition value={data.Definition} lineNumbers />
                 )}
               </BorderedBox>
             </Box>