Markdown is now rendered

- Made math button icon
- Made feedback button icon
- Added marked dependency
- Added spacing between buttons

frontend/package.json

@@ -13,6 +13,7 @@
     "axios": "^0.18.0",
     "file-saver": "^2.0.2",
     "highlight.js": "^9.12.0",
+    "marked":"^4.0.18",
     "v-clipboard": "^2.0.1",
     "vue": "^2.6.12",
     "vue-class-component": "^6.0.0",

frontend/src/components/submission_notes/CorrectionHelpCard.vue

@@ -5,21 +5,21 @@
       <h3>Tips on using the correction interface</h3>
     </v-card-title>
     <v-card-text>
+      Markdown is rendered by default. <br>
+      Select the Σ button to choose to have math rendered or not. <br>
+      In case you need the un-rendered markdown, click the "Copy to Clipboard" button. <br>
+      Cick on the individual line numbers in order to add feedback for a specific line. <br>
+      After adding feedback to a line, clicking the feedback button will hide it or show it. <br>
+      When feedback is hidden, the lines that contain feedback will be highlighted in red. <br>
+      <!--  ------THE OLD FLAVOR TEXT, SAVED IN CASE IT IS NEEDED FOR SOME REASON (it is very cool) -------
       Never trade an ale.
       The sea-dog leads with yellow fever, crush the captain's quarters until it waves.<br>
       Ho-ho-ho! malaria of life.<br>
-      Halitosis, adventure, and yellow fever.<br>
-      The girl drinks with halitosis, pull the galley before it laughs.<br>
-      The moon fires with life, vandalize the bikini atoll before it travels.<br>
-      The tuna blows with fight, haul the freighter before it whines.<br>
-      The cannibal robs with hunger, fire the lighthouse until it whines.<br>
-      The captain loves with death, vandalize the lighthouse before it whines.<br>
-      The anchor loots with treasure, raid the freighter before it grows.<br>
-      The reef commands with endurance, view the quarter-deck until it whines.<br>
       The scallywag loots with passion, crush the bikini atoll before it falls.<br>
       The sea leads with treasure, ransack the brig until it dies.<br>
       The parrot robs with desolation, view the seychelles before it screams.<br>
       The warm anchor quirky blows the landlubber.<br>
+      The warm anchor quirky blows the landlubber.<br> -->
     </v-card-text>
   </v-card>
 </template>

frontend/src/components/submission_notes/base/SubmissionLine.vue

@@ -16,7 +16,11 @@
     </td>
     <td class="code-cell-content pl-2">
       <!-- eslint-disable-next-line -->
-      <span class="code-line" :key="key" v-html="code"/>
+      <span
+        :key="key"
+        class="code-line"
+        v-html="html"
+      />
       <slot />
     </td>
   </div>
@@ -46,7 +50,9 @@ export default {
   },
   data () {
     return {
-      key: 0
+      key: 0,
+      html:'',
+      markdowned:true
     }
   },
   computed: {
@@ -58,6 +64,8 @@ export default {
     subNotesEventBus.$on('resetSubmission', () => {
       this.key++
     })
+    const {marked} = require('marked')
+    this.html = marked.parse(this.code)
   },
   methods: {
     toggleEditor () {
@@ -77,7 +85,7 @@ export default {
   }
 
   .code-line {
-    white-space: pre-wrap;
+    white-space: normal;
     font-family: monospace;
   }
 

frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionTopToolbar.vue

@@ -23,12 +23,35 @@
       Score: {{ score }} </span>
     <v-spacer />
     <toggle-feedback-visibility-button />
+    &nbsp;
     <div v-if="isMarkdown">
-      <v-btn @click="$emit('input', !mathIsRendered)">
+      <!-- <v-btn @click="$emit('input', !mathIsRendered)">
         {{ mathIsRendered ? 'Reset Math' : 'Render Math' }}
+      </v-btn> -->
+      <v-btn
+        v-if="mathIsRendered"
+        text
+        color="info"
+        title="Math is being rendered"
+        :style="{backgroundColor: '#cce7ff'}"
+        @click="$emit('input', !mathIsRendered)"
+      >
+        <v-icon>
+          functions
+        </v-icon>
+      </v-btn>
+      <v-btn
+        v-else
+        text
+        color="grey"
+        title="Math is not being rendered"
+        @click="$emit('input', !mathIsRendered)"
+      >
+        <v-icon>
+          functions
+        </v-icon>
       </v-btn>
     </div>
-    <v-spacer />
     <v-tooltip
       v-if="sourceCodeAvailable"
       top

frontend/src/components/submission_notes/toolbars/ToggleFeedbackVisibilityButton.vue

 <template>
   <v-btn
-    id="feedback-visibility-toggle"
+    v-if="showFeedback"
     text
     color="info"
+    title="Feedback is being shown"
+    :style="{backgroundColor: '#cce7ff'}"
     @click="showFeedback = !showFeedback"
   >
-    <div v-if="showFeedback">
-      Hide Feedback
-    </div>
-    <div v-else>
-      Show Feedback
-    </div>
+    <v-icon>
+      rate_review
+    </v-icon>
+  </v-btn>
+  <v-btn
+    v-else
+    text
+    color="grey"
+    title="Feedback is not being shown"
+    @click="showFeedback = !showFeedback"
+  >
+    <v-icon>
+      rate_review
+    </v-icon>
   </v-btn>
 </template>