diff --git a/src/public/app/services/note_list_renderer.js b/src/public/app/services/note_list_renderer.js
index a6b0b6f78..8394d350f 100644
--- a/src/public/app/services/note_list_renderer.js
+++ b/src/public/app/services/note_list_renderer.js
@@ -5,6 +5,7 @@ import attributeRenderer from "./attribute_renderer.js";
 import libraryLoader from "./library_loader.js";
 import treeService from "./tree.js";
 import utils from "./utils.js";
+import { applySyntaxHighlight } from "./syntax_highlight.js";
 
 const TPL = `
 <div class="note-list">
@@ -368,6 +369,8 @@ class NoteListRenderer {
                 });
             }
 
+            applySyntaxHighlight($renderedContent);
+
             $content.append($renderedContent);
             $content.addClass(`type-${type}`);
         } catch (e) {
diff --git a/src/public/app/services/syntax_highlight.js b/src/public/app/services/syntax_highlight.js
index 3ccf2c135..01c0f843c 100644
--- a/src/public/app/services/syntax_highlight.js
+++ b/src/public/app/services/syntax_highlight.js
@@ -1,5 +1,10 @@
 import mime_types from "./mime_types.js";
 
+/**
+ * Identifies all the code blocks under the specified hierarchy and uses the highlight.js library to obtain the highlighted text which is then applied on to the code blocks.
+ * 
+ * @param $container the container under which to look for code blocks and to apply syntax highlighting to them.
+ */
 export function applySyntaxHighlight($container) {
     const codeBlocks = $container.find("pre code");
     for (const codeBlock of codeBlocks) {