1 files changed, 38 insertions, 0 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
new file mode 100644
index 00000000000..1d050ed208b
--- /dev/null
+++ b/app/assets/javascripts/content_editor/extensions/code_block_highlight.js
@@ -0,0 +1,38 @@
+import { CodeBlockHighlight as BaseCodeBlockHighlight } from 'tiptap-extensions';
+
+export default class GlCodeBlockHighlight extends BaseCodeBlockHighlight {
+  get schema() {
+    const baseSchema = super.schema;
+
+    return {
+      ...baseSchema,
+      attrs: {
+        params: {
+          default: null,
+        },
+      },
+      parseDOM: [
+        {
+          tag: 'pre',
+          preserveWhitespace: 'full',
+          getAttrs: (node) => {
+            const code = node.querySelector('code');
+
+            if (!code) {
+              return null;
+            }
+
+            return {
+              /* `params` is the name of the attribute that
+                prosemirror-markdown uses to extract the language
+                of a codeblock.
+                https://github.com/ProseMirror/prosemirror-markdown/blob/master/src/to_markdown.js#L62
+              */
+              params: code.getAttribute('lang'),
+            };
+          },
+        },
+      ],
+    };
+  }
+}