mirror of
https://git.joinsharkey.org/Sharkey/Sharkey.git
synced 2024-11-23 06:03:09 +02:00
refactor: MkCodeをブロックとインラインで別コンポーネント化する (#13026)
* Create MkCodeInline.vue * Update MkCode.vue * Update MkMisskeyFlavoredMarkdown.ts * Update flash.vue * Update MkCodeInline.vue
This commit is contained in:
parent
1e237a7df5
commit
fc7cd636a3
4 changed files with 30 additions and 16 deletions
|
@ -4,8 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
-->
|
||||
|
||||
<template>
|
||||
<code v-if="inline" :class="$style.codeInlineRoot">{{ code }}</code>
|
||||
<div v-else :class="$style.codeBlockRoot">
|
||||
<div :class="$style.codeBlockRoot">
|
||||
<button :class="$style.codeBlockCopyButton" class="_button" @click="copy">
|
||||
<i class="ti ti-copy"></i>
|
||||
</button>
|
||||
|
@ -36,7 +35,6 @@ import copyToClipboard from '@/scripts/copy-to-clipboard.js';
|
|||
const props = defineProps<{
|
||||
code: string;
|
||||
lang?: string;
|
||||
inline?: boolean;
|
||||
}>();
|
||||
|
||||
const show = ref(!defaultStore.state.dataSaver.code);
|
||||
|
@ -66,16 +64,6 @@ function copy() {
|
|||
}
|
||||
}
|
||||
|
||||
.codeInlineRoot {
|
||||
display: inline-block;
|
||||
font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
|
||||
overflow-wrap: anywhere;
|
||||
color: #D4D4D4;
|
||||
background: #1E1E1E;
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
}
|
||||
|
||||
.codeBlockFallbackRoot {
|
||||
display: block;
|
||||
overflow-wrap: anywhere;
|
||||
|
|
26
packages/frontend/src/components/MkCodeInline.vue
Normal file
26
packages/frontend/src/components/MkCodeInline.vue
Normal file
|
@ -0,0 +1,26 @@
|
|||
<!--
|
||||
SPDX-FileCopyrightText: syuilo and other misskey contributors
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<code :class="$style.root">{{ code }}</code>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const props = defineProps<{
|
||||
code: string;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<style module lang="scss">
|
||||
.root {
|
||||
display: inline-block;
|
||||
font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
|
||||
overflow-wrap: anywhere;
|
||||
color: #D4D4D4;
|
||||
background: #1E1E1E;
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
}
|
||||
</style>
|
|
@ -13,6 +13,7 @@ import MkMention from '@/components/MkMention.vue';
|
|||
import MkEmoji from '@/components/global/MkEmoji.vue';
|
||||
import MkCustomEmoji from '@/components/global/MkCustomEmoji.vue';
|
||||
import MkCode from '@/components/MkCode.vue';
|
||||
import MkCodeInline from '@/components/MkCodeInline.vue';
|
||||
import MkGoogle from '@/components/MkGoogle.vue';
|
||||
import MkSparkle from '@/components/MkSparkle.vue';
|
||||
import MkA from '@/components/global/MkA.vue';
|
||||
|
@ -373,10 +374,9 @@ export default function(props: MfmProps, context: SetupContext<MfmEvents>) {
|
|||
}
|
||||
|
||||
case 'inlineCode': {
|
||||
return [h(MkCode, {
|
||||
return [h(MkCodeInline, {
|
||||
key: Math.random(),
|
||||
code: token.props.code,
|
||||
inline: true,
|
||||
})];
|
||||
}
|
||||
|
||||
|
|
|
@ -37,7 +37,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<template #icon><i class="ti ti-code"></i></template>
|
||||
<template #label>{{ i18n.ts._play.viewSource }}</template>
|
||||
|
||||
<MkCode :code="flash.script" lang="is" :inline="false" class="_monospace"/>
|
||||
<MkCode :code="flash.script" lang="is" class="_monospace"/>
|
||||
</MkFolder>
|
||||
<div :class="$style.footer">
|
||||
<Mfm :text="`By @${flash.user.username}`"/>
|
||||
|
|
Loading…
Reference in a new issue