diff options
Diffstat (limited to 'packages/frontend/src/components')
| -rw-r--r-- | packages/frontend/src/components/MkCode.vue | 18 |
1 files changed, 17 insertions, 1 deletions
diff --git a/packages/frontend/src/components/MkCode.vue b/packages/frontend/src/components/MkCode.vue index cb0eef0549..2c016e4d7c 100644 --- a/packages/frontend/src/components/MkCode.vue +++ b/packages/frontend/src/components/MkCode.vue @@ -9,7 +9,8 @@ SPDX-License-Identifier: AGPL-3.0-only <MkLoading v-if="!inline ?? true"/> </template> <code v-if="inline" :class="$style.codeInlineRoot">{{ code }}</code> - <XCode v-else-if="show" :code="code" :lang="lang"/> + <XCode v-else-if="show && lang" :code="code" :lang="lang"/> + <pre v-else-if="show" :class="$style.codeBlockFallbackRoot"><code :class="$style.codeBlockFallbackCode">{{ code }}</code></pre> <button v-else :class="$style.codePlaceholderRoot" @click="show = true"> <div :class="$style.codePlaceholderContainer"> <div><i class="ti ti-code"></i> {{ i18n.ts.code }}</div> @@ -47,6 +48,21 @@ const XCode = defineAsyncComponent(() => import('@/components/MkCode.core.vue')) border-radius: .3em; } +.codeBlockFallbackRoot { + display: block; + overflow-wrap: anywhere; + color: #D4D4D4; + background: #1E1E1E; + padding: 1em; + margin: .5em 0; + overflow: auto; + border-radius: 8px; +} + +.codeBlockFallbackCode { + font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace; +} + .codePlaceholderRoot { display: block; width: 100%; |