feat: highlight code syntax in markdown files

fix #1358
SwissDataScienceCenter · Oct 28, 2021 · cf7e166 · cf7e166
1 parent dcb5fe3
commit cf7e166
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 4 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -53,6 +53,7 @@
     "redux-thunk": "^2.2.0",
     "sass": "^1.37.5",
     "showdown": "^1.9.1",
+    "showdown-highlight": "^2.1.8",
     "styled-jsx": "^3.4.5",
     "uuid": "^3.3.3",
     "xregexp": "^4.4.0",

diff --git a/client/src/utils/HelperFunctions.js b/client/src/utils/HelperFunctions.js
@@ -19,6 +19,7 @@
 // title.Author: Alex K. - https://stackoverflow.com/users/246342/alex-k
 // Source: https://stackoverflow.com/questions/6507056/replace-all-whitespace-characters/6507078#6507078
 import showdown from "showdown";
+import showdownHighlight from "showdown-highlight";
 import DOMPurify from "dompurify";
 import XRegExp from "xregexp";
 
@@ -166,7 +167,13 @@ function sanitizedHTMLFromMarkdown(markdown, singleLine = false) {
     replace: `<${key} $1 class="$3 ${showdownClasses[key]}" $4>`
   }));
 
-  const converter = new showdown.Converter({ ...showdownOptions, extensions: [...bindings] });
+  const converter = new showdown.Converter({
+    ...showdownOptions,
+    extensions: [
+      ...bindings,
+      showdownHighlight({ pre: true })
+    ]
+  });
   if (singleLine && markdown) {
     const lineBreakers = ["<br>", "<br />", "<br/>", "\n"];
     const breakPosition = Math.max(...lineBreakers.map(elem => markdown.indexOf(elem)));