diff options
| author | かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com> | 2023-12-16 12:34:35 +0900 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-12-16 12:34:35 +0900 |
| commit | b1a7dcb05b9fe2c4eed2c6ea68aff5ef4282b332 (patch) | |
| tree | 91b9389b0a32af0f1a7b5ca07089ea7ab95933f0 /packages/frontend/src/components/MkCode.vue | |
| parent | enhance(frontend): tweak user home page (diff) | |
| download | sharkey-b1a7dcb05b9fe2c4eed2c6ea68aff5ef4282b332.tar.gz sharkey-b1a7dcb05b9fe2c4eed2c6ea68aff5ef4282b332.tar.bz2 sharkey-b1a7dcb05b9fe2c4eed2c6ea68aff5ef4282b332.zip | |
enhance(frontend): コードブロックのハイライト機能を利用するには言語を明示的に指定させるように (#12681)
* (enhance) コードブロックのハイライトを使用するには言語指定を求める
* Update changelog
* fix
* typo
Diffstat (limited to 'packages/frontend/src/components/MkCode.vue')
| -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%; |