zenn/sori.studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

공개 Markdown 인라인 렌더러 fragment 주석 반복을 줄이도록 정리

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
zenn
2026-07-01 11:50:52 +09:00
parent 1a7b82d9fd
commit d3f08e743d
7 changed files with 46 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
components/content/ContentMarkdownInlineSegments.vue
View File

@@ -37,29 +37,45 @@ const getInlineColorClass = (color) => `content-markdown-inline-segments__color-
</script>
<template>
<template v-for="(lineSegments, lineIndex) in segmentLines" :key="`inline-line-${lineIndex}`">
<br v-if="lineIndex > 0">
<template v-for="(segment, segmentIndex) in lineSegments" :key="`inline-segment-${lineIndex}-${segmentIndex}`">
<strong v-if="segment.type === 'strong'">{{ segment.text }}</strong>
<em v-else-if="segment.type === 'em'">{{ segment.text }}</em>
<sub v-else-if="segment.type === 'subscript'">{{ segment.text }}</sub>
<sup v-else-if="segment.type === 'superscript'">{{ segment.text }}</sup>
<code v-else-if="segment.type === 'code'" class="content-markdown-inline-segments__inline-code rounded bg-[#252525] px-1.5 py-0.5 text-[0.9em] text-white">{{ segment.text }}</code>
<a v-else-if="segment.type === 'link'" :class="linkClass" :href="segment.href" target="_blank" rel="noreferrer">{{ segment.text }}</a>
<span class="content-markdown-inline-segments">
<span
v-for="(lineSegments, lineIndex) in segmentLines"
:key="`inline-line-${lineIndex}`"
class="content-markdown-inline-segments__line"
>
<br v-if="lineIndex > 0">
<span
v-else-if="segment.type === 'color'"
class="content-markdown-inline-segments__color"
:class="getInlineColorClass(segment.color)"
:data-inline-color="segment.color"
v-for="(segment, segmentIndex) in lineSegments"
:key="`inline-segment-${lineIndex}-${segmentIndex}`"
class="content-markdown-inline-segments__segment"
>
<ContentMarkdownInlineSegments :text="segment.text" :link-class="linkClass" />
<strong v-if="segment.type === 'strong'">{{ segment.text }}</strong>
<em v-else-if="segment.type === 'em'">{{ segment.text }}</em>
<sub v-else-if="segment.type === 'subscript'">{{ segment.text }}</sub>
<sup v-else-if="segment.type === 'superscript'">{{ segment.text }}</sup>
<code v-else-if="segment.type === 'code'" class="content-markdown-inline-segments__inline-code rounded bg-[#252525] px-1.5 py-0.5 text-[0.9em] text-white">{{ segment.text }}</code>
<a v-else-if="segment.type === 'link'" :class="linkClass" :href="segment.href" target="_blank" rel="noreferrer">{{ segment.text }}</a>
<span
v-else-if="segment.type === 'color'"
class="content-markdown-inline-segments__color"
:class="getInlineColorClass(segment.color)"
:data-inline-color="segment.color"
>
<ContentMarkdownInlineSegments :text="segment.text" :link-class="linkClass" />
</span>
<span v-else>{{ segment.text }}</span>
</span>
<template v-else>{{ segment.text }}</template>
</template>
</template>
</span>
</span>
</template>
<style scoped>
.content-markdown-inline-segments,
.content-markdown-inline-segments__line,
.content-markdown-inline-segments__segment {
display: contents;
}
.content-markdown-inline-segments__color--gray {
color: var(--site-muted);
}