1 files changed, 10 insertions, 15 deletions
diff --git a/app/assets/javascripts/notebook/cells/code/index.vue b/app/assets/javascripts/notebook/cells/code/index.vue
index e1ef9aa6d79..64e801a7516 100644
--- a/app/assets/javascripts/notebook/cells/code/index.vue
+++ b/app/assets/javascripts/notebook/cells/code/index.vue
@@ -1,10 +1,11 @@
 <script>
-import Prism from '../../lib/highlight';
+import CodeBlockHighlighted from '~/vue_shared/components/code_block_highlighted.vue';
 import Prompt from '../prompt.vue';
 
 export default {
   name: 'CodeOutput',
   components: {
+    CodeBlockHighlighted,
     Prompt,
   },
   props: {
@@ -13,11 +14,6 @@ export default {
       required: false,
       default: 0,
     },
-    codeCssClass: {
-      type: String,
-      required: false,
-      default: '',
-    },
     type: {
       type: String,
       required: true,
@@ -41,22 +37,21 @@ export default {
 
       return type.charAt(0).toUpperCase() + type.slice(1);
     },
-    cellCssClass() {
-      return {
-        [this.codeCssClass]: true,
-        'jupyter-notebook-scrolled': this.metadata.scrolled,
-      };
+    maxHeight() {
+      return this.metadata.scrolled ? '20rem' : 'initial';
     },
   },
-  mounted() {
-    Prism.highlightElement(this.$refs.code);
-  },
 };
 </script>
 
 <template>
   <div :class="type">
     <prompt :type="promptType" :count="count" />
-    <pre ref="code" :class="cellCssClass" class="language-python" v-text="code"></pre>
+    <code-block-highlighted
+      language="python"
+      :code="code"
+      :max-height="maxHeight"
+      class="gl-border"
+    />
   </div>
 </template>