1 files changed, 72 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/code_block_highlighted.vue b/app/assets/javascripts/vue_shared/components/code_block_highlighted.vue
new file mode 100644
index 00000000000..65b08b608e8
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/code_block_highlighted.vue
@@ -0,0 +1,72 @@
+<script>
+import { GlSafeHtmlDirective } from '@gitlab/ui';
+
+import languageLoader from '~/content_editor/services/highlight_js_language_loader';
+import CodeBlock from './code_block.vue';
+
+export default {
+  name: 'CodeBlockHighlighted',
+  directives: {
+    SafeHtml: GlSafeHtmlDirective,
+  },
+  components: {
+    CodeBlock,
+  },
+  props: {
+    code: {
+      type: String,
+      required: true,
+    },
+    language: {
+      type: String,
+      required: true,
+    },
+    maxHeight: {
+      type: String,
+      required: false,
+      default: 'initial',
+    },
+  },
+  data() {
+    return {
+      hljs: null,
+      languageLoaded: false,
+    };
+  },
+  computed: {
+    highlighted() {
+      if (this.hljs && this.languageLoaded) {
+        return this.hljs.highlight(this.code, { language: this.language }).value;
+      }
+
+      return this.code;
+    },
+  },
+  async mounted() {
+    this.hljs = await this.loadHighlightJS();
+    if (this.language) {
+      await this.loadLanguage();
+    }
+  },
+  methods: {
+    async loadLanguage() {
+      try {
+        const { default: languageDefinition } = await languageLoader[this.language]();
+
+        this.hljs.registerLanguage(this.language, languageDefinition);
+        this.languageLoaded = true;
+      } catch (e) {
+        this.$emit('error', e);
+      }
+    },
+    loadHighlightJS() {
+      return import('highlight.js/lib/core');
+    },
+  },
+};
+</script>
+<template>
+  <code-block :max-height="maxHeight" class="highlight">
+    <span v-safe-html="highlighted"></span>
+  </code-block>
+</template>