Resolve failing build when < > characters in markdown

package.json

@@ -30,14 +30,16 @@
     "prettier": "~2.3.2",
     "prettier-plugin-svelte": "^2.3.1",
     "svelte": "^3.42.1",
-    "svelte-preprocess": "^4.7.4"
+    "svelte-preprocess": "^4.7.4",
+    "vite-plugin-md": "^0.11.0"
   },
   "type": "module",
   "dependencies": {
     "@lukeed/uuid": "^2.0.0",
     "bluebird": "^3.7.2",
     "cheerio": "^1.0.0-rc.10",
     "cookie": "^0.4.1",
+    "escape-goat": "^4.0.0",
     "file-saver": "^2.0.5",
     "got": "^11.8.2",
     "jszip": "^3.7.1",

src/guides/snow/cases/detect-snow-cover/process.md

@@ -93,7 +93,7 @@ Cool, we have raster data. But why do you have multiple files of the same locati
   <summary>How does the NDSI indicator work?</summary>
     <p>The Normalized Difference Snow Index (NDSI) is derived from the green and short wave infrared bands. This formula shows snow cover over land areas.</p>
     <p>Since snow absorbs most of the incident radiation in the SWIR while clouds do not, this enables NDSI to distinguish snow from clouds. This formula is commonly used in snow/ice cover mapping application as well as glacier monitoring.</p>
-    <p>A value of NDSI &gt; 0.0 is considered to have some snow present. A value with NDSI &lt;= 0.0 is a snow-free land surface.</p>
+    <p>A value of NDSI > 0.0 is considered to have some snow present. A value with NDSI <= 0.0 is a snow-free land surface.</p>
 </details>
 
 Enough dry theory. Now it's down to the nitty-gritty.

src/routes/guide/[slug].svelte

@@ -39,6 +39,7 @@
   // let downloads
 
   import {toast} from '@zerodevx/svelte-toast'
+  import {htmlEscape, htmlUnescape} from 'escape-goat';
 
   import {onMount} from 'svelte'
   import {choice as selected, location, range} from '$lib/store'

src/routes/guides.json.js

@@ -4,6 +4,7 @@ import marked from 'marked';
 import grayMatter from 'gray-matter'
 const __dirname = path.resolve(path.dirname(''));
 import * as cheerio from 'cheerio';
+import {htmlEscape, htmlUnescape} from 'escape-goat';
 const mode = process.env.NODE_ENV
 const guidesPath = mode === 'development' ? __dirname : '/opt/build/repo'
 
@@ -58,8 +59,9 @@ export async function get({
         const html = await marked(content, {
             renderer
         })
-
+        
         const optimHTML = await imageSrc(html)
+        const escapedHTML = htmlEscape(html)
 
         guides.push({
             case: data.case,

svelte.config.js

@@ -2,11 +2,12 @@
 import preprocess from 'svelte-preprocess'
 import md from 'mdsvex';
 import adapter from '@sveltejs/adapter-netlify';
+import Markdown from 'vite-plugin-md'
 
 const config = {
 	extensions: [".svelte", ".md", '.svx'],
 	preprocess: [
-		md.mdsvex(),
+		md.mdsvex({ extensions: ['.svx', '.md'] }),
 		preprocess({
 			defaults: {
 				style: 'postcss'
@@ -19,6 +20,9 @@ const config = {
 		// hydrate the <div id="svelte"> element in src/app.html
 		target: '#svelte',
 		adapter: adapter(),
+		vite: () => ({
+			plugins: [Markdown]
+		})
 	}
 };