make the snippets markdown

client/AddForm.js

@@ -1,4 +1,5 @@
 const Vue = require('vue/dist/vue.js')
+const marked = require('marked')
 
 Vue.component('add-form', {
     props: ['problemProp', 'solutionProp', 'keywordStringProp'],
@@ -30,9 +31,9 @@ Vue.component('add-form', {
 		},
 		markdownPreview: function() {
 			if (this.solution) {
-				return this.solution
+				return marked(this.solution)
 			} else {
-				return "Preview of markdown solution rendering"
+				return "<p>Preview of markdown rendering of the solution</p>"
 			}
 		}
 	},
@@ -46,7 +47,7 @@ Vue.component('add-form', {
 			<br />
 			<input type="button" value="Submit" v-on:click="submit">
 			<hr />
-			<div class="md">{{ markdownPreview }}</div>
+			<div class="md" v-html="markdownPreview"></div>
 		</div>
 	`,
 	methods: {

client/ViewPage.js

@@ -1,5 +1,6 @@
 const {ipcRenderer} = require('electron')
 const Vue = require('vue/dist/vue.js')
+const marked = require('marked')
 
 let vm
 
@@ -17,6 +18,11 @@ Vue.component('view-page', {
 			}
 		}
 	},
+	computed: {
+		markedSolution: function() {
+			return marked(this.snippet.solution)
+		}
+	},
 	watch: {
 		snippetKey: function(key) {
 			if (key) {
@@ -33,7 +39,7 @@ Vue.component('view-page', {
 			</div>
 			<div id="view-results">
 				<p class="problem">{{ snippet.problem }}</p>
-				<p class="solution">{{ snippet.solution }}</p>
+				<div class="solution" v-html="markedSolution"></div>
 				<p class="keywords">{{ snippet.keywords }}</p>
 			</div>
 		</div>

client/style.css

@@ -6,9 +6,5 @@
 	width: 50%;
 }
 
-#view-results .solution {
-	font-family: monospace;
-	white-space: pre-wrap;
-}