Merge pull request #77 from yohamta/feature/syntax-highlignt

Added syntax highlight feature on web UI
dagu-org · May 13, 2022 · 22c434a · 22c434a
2 parents 4360d8b + a3d1d2c
commit 22c434a
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 6 deletions.
diff --git a/internal/admin/handlers/web/assets/css/prism.css b/internal/admin/handlers/web/assets/css/prism.css
diff --git a/internal/admin/handlers/web/assets/js/prism.css b/internal/admin/handlers/web/assets/js/prism.css
diff --git a/internal/admin/handlers/web/assets/js/prism.js b/internal/admin/handlers/web/assets/js/prism.js
diff --git a/internal/admin/handlers/web/templates/base.gohtml b/internal/admin/handlers/web/templates/base.gohtml
@@ -4,7 +4,8 @@
   <head>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="stylesheet" href="/assets/css/bulma.min.css?v={{ version }}" />
-    <link href="/assets/css/lineicons.css?v={{ version }}" rel="stylesheet" />
+    <link rel="stylesheet" href="/assets/css/lineicons.css?v={{ version }}" />
+    <link rel="stylesheet" href="/assets/css/prism.css?v={{ version }}">
     <script src="/assets/js/react.min.js?v={{ version }}"></script>
     <script src="/assets/js/react-dom.min.js?v={{ version }}"></script>
     <script src="/assets/js/babel.min.js?v={{ version }}"></script>
@@ -14,6 +15,7 @@
     <script src="/assets/js/state-local.min.js?v={{ version }}"></script>
     <script src="/assets/js/monaco-loader.min.js?v={{ version }}"></script>
     <script src="/assets/js/monaco-react.min.js?v={{ version }}"></script>
+    <script src="/assets/js/prism.js?v={{ version }}" data-manual></script>
     <script>
       mermaid.initialize({ startOnLoad: true });
     </script>

diff --git a/internal/admin/handlers/web/templates/dag.gohtml b/internal/admin/handlers/web/templates/dag.gohtml
@@ -260,8 +260,8 @@
   }
   function ConfigTab({ data }) {
     const mermaidStyle = {
-      display: 'flex', alignItems: 'center', justifyContent: 'center',
-      width: (data.DAG.Config.Steps.length * 200) + "px",
+      display: 'flex', alignItems: 'flex-center', justifyContent: 'flex-start',
+      width: (data.DAG.Config.Steps.length * 240) + "px",
       minWidth: "100%",
       minHeight: "100px",
     };
@@ -323,9 +323,9 @@
   function StatusTab({ data, subTab }) {
     const mermaidStyle = {
       display: 'flex',
-      alignItems: 'flex-start',
+      alignItems: 'flex-center',
       justifyContent: 'flex-start',
-      width: (data.DAG.Status.Nodes.length * 100) + "px",
+      width: (data.DAG.Status.Nodes.length * 240) + "px",
       minWidth: "100%",
       minHeight: "100px",
     };
@@ -900,9 +900,12 @@
     )
   }
   function ConfigPreview({ value, onEdit }) {
+    React.useEffect(() => {
+      Prism.highlightAll();
+    }, [value])
     return (
       <div>
-        <pre>{value}</pre>
+        <pre><code className="language-yaml">{value}</code></pre>
         <button className="button is-info" onClick={onEdit}>Edit</button>
       </div>
     )