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

콜아웃 인라인 링크 렌더링 개선

Browse Source
This commit is contained in:
zenn
2026-07-02 15:24:09 +09:00
parent 3dd30d7f76
commit 00cb4a293d
12 changed files with 182 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
components/content/ContentMarkdownInlineSegments.vue
View File

@@ -43,10 +43,18 @@ const getInlineColorClass = (color) => `content-markdown-inline-segments__color-
:key="`inline-segment-0-${segmentIndex}`"
class="content-markdown-inline-segments__segment"
>
<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>
<strong v-if="segment.type === 'strong'">
<ContentMarkdownInlineSegments :text="segment.text" :link-class="linkClass" :multiline="multiline" />
</strong>
<em v-else-if="segment.type === 'em'">
<ContentMarkdownInlineSegments :text="segment.text" :link-class="linkClass" :multiline="multiline" />
</em>
<sub v-else-if="segment.type === 'subscript'">
<ContentMarkdownInlineSegments :text="segment.text" :link-class="linkClass" :multiline="multiline" />
</sub>
<sup v-else-if="segment.type === 'superscript'">
<ContentMarkdownInlineSegments :text="segment.text" :link-class="linkClass" :multiline="multiline" />
</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">
<ContentMarkdownInlineSegments :text="segment.text" :link-class="linkClass" :multiline="multiline" />
@@ -72,10 +80,18 @@ const getInlineColorClass = (color) => `content-markdown-inline-segments__color-
:key="`inline-segment-${offsetIndex + 1}-${segmentIndex}`"
class="content-markdown-inline-segments__segment"
>
<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>
<strong v-if="segment.type === 'strong'">
<ContentMarkdownInlineSegments :text="segment.text" :link-class="linkClass" :multiline="multiline" />
</strong>
<em v-else-if="segment.type === 'em'">
<ContentMarkdownInlineSegments :text="segment.text" :link-class="linkClass" :multiline="multiline" />
</em>
<sub v-else-if="segment.type === 'subscript'">
<ContentMarkdownInlineSegments :text="segment.text" :link-class="linkClass" :multiline="multiline" />
</sub>
<sup v-else-if="segment.type === 'superscript'">
<ContentMarkdownInlineSegments :text="segment.text" :link-class="linkClass" :multiline="multiline" />
</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">
<ContentMarkdownInlineSegments :text="segment.text" :link-class="linkClass" :multiline="multiline" />