OpenSource/misskey
OpenSource/misskey
1
0
Fork 0
mirror of https://github.com/misskey-dev/misskey.git synced 2024-12-27 21:10:20 +01:00
Code Issues Projects Releases Packages Wiki Activity

refactor: MkCodeをブロックとインラインで別コンポーネント化する (#13026)

Browse source 
* Create MkCodeInline.vue

* Update MkCode.vue

* Update MkMisskeyFlavoredMarkdown.ts

* Update flash.vue

* Update MkCodeInline.vue
This commit is contained in:
FineArchs 2024-01-18 12:16:12 +09:00 committed by GitHub
parent 1e237a7df5
commit fc7cd636a3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 30 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
packages/frontend/src/components/MkCode.vue
View file

@ -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
View 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>

4
packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts
View file

@ -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,
})];
}

2
packages/frontend/src/pages/flash/flash.vue
View file

@ -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}`"/>