diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/source_viewer')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue | 11 | ||||
-rw-r--r-- | app/assets/javascripts/vue_shared/components/source_viewer/source_viewer.vue | 3 |
2 files changed, 10 insertions, 4 deletions
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue b/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue index 1b8e4bcfec6..c30ca5369ee 100644 --- a/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue +++ b/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue @@ -36,6 +36,9 @@ export default { return content; }, + firstLineClass() { + return { 'gl-mt-3!': this.number === 1 }; + }, }, methods: { wrapBidiChar(bidiChar) { @@ -56,10 +59,11 @@ export default { </script> <template> <div class="gl-display-flex"> - <div class="line-numbers gl-pt-0! gl-pb-0! gl-absolute gl-z-index-3"> + <div class="gl-p-0! gl-absolute gl-z-index-3 gl-border-r diff-line-num line-numbers"> <gl-link :id="`L${number}`" - class="file-line-num diff-line-num gl-user-select-none" + class="gl-user-select-none gl-ml-5 gl-pr-3 gl-shadow-none! file-line-num diff-line-num" + :class="firstLineClass" :to="`#L${number}`" :data-line-number="number" > @@ -68,7 +72,8 @@ export default { </div> <pre - class="code highlight gl-p-0! gl-w-full gl-overflow-visible! gl-ml-11!" + class="gl-p-0! gl-w-full gl-overflow-visible! gl-ml-11! gl-border-none! code highlight" + :class="firstLineClass" ><code><span :id="`LC${number}`" v-safe-html="formattedContent" :lang="language" class="line" data-testid="content"></span></code></pre> </div> </template> diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer.vue b/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer.vue index edf2229a9a1..ed87a202b15 100644 --- a/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer.vue +++ b/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer.vue @@ -2,6 +2,7 @@ import { GlSafeHtmlDirective, GlLoadingIcon } from '@gitlab/ui'; import LineHighlighter from '~/blob/line_highlighter'; import eventHub from '~/notes/event_hub'; +import languageLoader from '~/content_editor/services/highlight_js_language_loader'; import { ROUGE_TO_HLJS_LANGUAGE_MAP, LINES_PER_CHUNK } from './constants'; import Chunk from './components/chunk.vue'; @@ -129,7 +130,7 @@ export default { let languageDefinition; try { - languageDefinition = await import(`highlight.js/lib/languages/${this.language}`); + languageDefinition = await languageLoader[this.language](); this.hljs.registerLanguage(this.language, languageDefinition.default); } catch (message) { this.$emit('error', message); |