1 files changed, 18 insertions, 2 deletions
diff --git a/app/assets/javascripts/content_editor/extensions/code_block_highlight.js b/app/assets/javascripts/content_editor/extensions/code_block_highlight.js
index ce8bd57c7e3..50d72f4089a 100644
--- a/app/assets/javascripts/content_editor/extensions/code_block_highlight.js
+++ b/app/assets/javascripts/content_editor/extensions/code_block_highlight.js
@@ -1,12 +1,20 @@
 import { CodeBlockLowlight } from '@tiptap/extension-code-block-lowlight';
+import * as lowlight from 'lowlight';
 import { defaultMarkdownSerializer } from 'prosemirror-markdown/src/to_markdown';
 
-const extractLanguage = (element) => element.firstElementChild?.getAttribute('lang');
+const extractLanguage = (element) => element.getAttribute('lang');
 
 const ExtendedCodeBlockLowlight = CodeBlockLowlight.extend({
   addAttributes() {
     return {
-      ...this.parent(),
+      language: {
+        default: null,
+        parseHTML: (element) => {
+          return {
+            language: extractLanguage(element),
+          };
+        },
+      },
       /* `params` is the name of the attribute that
         prosemirror-markdown uses to extract the language
         of a codeblock.
@@ -19,8 +27,16 @@ const ExtendedCodeBlockLowlight = CodeBlockLowlight.extend({
           };
         },
       },
+      class: {
+        default: 'code highlight js-syntax-highlight',
+      },
     };
   },
+  renderHTML({ HTMLAttributes }) {
+    return ['pre', HTMLAttributes, ['code', {}, 0]];
+  },
+}).configure({
+  lowlight,
 });
 
 export const tiptapExtension = ExtendedCodeBlockLowlight;