display html content on UI

MarkUsProject · Jan 28, 2025 · 66c08ed · 66c08ed
1 parent 8c95009
commit 66c08ed
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 40 deletions.
diff --git a/app/assets/stylesheets/entrypoints/rmd.scss b/app/assets/stylesheets/entrypoints/rmd.scss
@@ -0,0 +1,15 @@
+/* MarkUs custom styling */
+@use 'fonts';
+@import '../common/constants';
+
+.markus-annotation {
+  background-color: $light-alert;
+}
+
+div.markus-annotation {
+  border: 5px solid $sharp-line;
+}
+
+.markus-annotation-content {
+  font-family: $fonts;
+}
diff --git a/app/javascript/Components/Result/file_viewer.jsx b/app/javascript/Components/Result/file_viewer.jsx
@@ -61,7 +61,10 @@ export class FileViewer extends React.Component {
       return <ImageViewer mime_type={this.props.mime_type} {...commonProps} />;
     } else if (this.props.selectedFileType === "pdf") {
       return <PDFViewer annotationFocus={this.props.annotationFocus} {...commonProps} />;
-    } else if (this.props.selectedFileType === "jupyter-notebook") {
+    } else if (
+      this.props.selectedFileType === "jupyter-notebook" ||
+      this.props.selectedFileType === "markdown"
+    ) {
       return <HTMLViewer annotationFocus={this.props.annotationFocus} {...commonProps} />;
     } else if (this.props.selectedFileType === "binary") {
       return <BinaryViewer content={this.state.content} {...commonProps} />;

diff --git a/app/javascript/Components/Result/submission_file_panel.jsx b/app/javascript/Components/Result/submission_file_panel.jsx
@@ -12,6 +12,7 @@ const MAX_CONTENT_SIZES = {
   image: 50_000_000,
   pdf: 50_000_000,
   "jupyter-notebook": 50_000_000,
+  markdown: 50_000_000,
   text: 100_000,
   binary: 100_000,
 };

diff --git a/app/views/layouts/html_content.html.erb b/app/views/layouts/html_content.html.erb
@@ -1,43 +1,45 @@
 <!DOCTYPE html>
 <html lang="<%= I18n.locale %>">
-  <head>
-    <% if @file_type == 'jupyter-notebook' %>
-      <%= stylesheet_link_tag 'notebook_common' %>
-      <% if @current_user&.theme == 'dark' %>
-        <%= stylesheet_link_tag 'notebook_dark' %>
-      <% else %>
-        <%= stylesheet_link_tag 'notebook_light' %>
-      <% end %>
-      <%= javascript_include_tag 'require', nonce: true %>
-      <%= javascript_tag nonce: true do %>
-        // Same as mathjax_config.js except startup.typeset is true
-        window.MathJax = {
-          startup: {
-            typeset: true
-          },
-          tex: {
-            // Allow inline single dollar sign notation
-            inlineMath: [
-              ["$", "$"],
-              ["\\(", "\\)"]
-            ],
-            processEnvironments: true,
-            processRefs: false
-          },
-          options: {
-            ignoreHtmlClass: "tex2jax_ignore",
-            processHtmlClass: "tex2jax_process"
-            },
-          svg: {
-            fontCache: "global"
-          }
-        };
-      <% end %>
-      <%= javascript_include_tag 'markus_notebook', nonce: true %>
-      <%= javascript_include_tag 'plotly', nonce: true %>
+<head>
+  <% if @file_type == 'jupyter-notebook' %>
+    <%= stylesheet_link_tag 'notebook_common' %>
+    <% if @current_user&.theme == 'dark' %>
+      <%= stylesheet_link_tag 'notebook_dark' %>
+    <% else %>
+      <%= stylesheet_link_tag 'notebook_light' %>
     <% end %>
-  </head>
-  <body>
-    <%= yield :layout %>
-  </body>
+    <%= javascript_include_tag 'plotly', nonce: true %>
+  <% elsif @file_type == 'markdown' %>
+    <%= stylesheet_link_tag 'rmd' %>
+  <% end %>
+  <%= javascript_include_tag 'require', nonce: true %>
+  <%= javascript_tag nonce: true do %>
+    // Same as mathjax_config.js except startup.typeset is true
+    window.MathJax = {
+    startup: {
+    typeset: true
+    },
+    tex: {
+    // Allow inline single dollar sign notation
+    inlineMath: [
+    ["$", "$"],
+    ["\\(", "\\)"]
+    ],
+    processEnvironments: true,
+    processRefs: false
+    },
+    options: {
+    ignoreHtmlClass: "tex2jax_ignore",
+    processHtmlClass: "tex2jax_process"
+    },
+    svg: {
+    fontCache: "global"
+    }
+    };
+  <% end %>
+  <%= javascript_include_tag 'markus_notebook', nonce: true %>
+</head>
+<body>
+<%= yield :layout %>
+</body>
 </html>