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-01 11:38:38 +09:00
parent ce20ce1d6d
commit 1a7b82d9fd
9 changed files with 40 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
components/content/ContentMarkdownInlineSegments.vue
View File

@@ -21,7 +21,10 @@ const props = defineProps({
const segmentLines = computed(() => {
const source = String(props.text || '')
const lines = props.multiline ? source.split('\n') : [source]
const normalizedSource = props.multiline
? source.replace(/<br\s*\/?>/gi, '\n')
: source
const lines = props.multiline ? normalizedSource.split('\n') : [normalizedSource]
return lines.map(parseInlineSegments)
})

10
components/content/ContentMarkdownRenderer.vue
View File

@@ -3050,7 +3050,7 @@ onBeforeUnmount(() => {
<li
v-for="(item, itemIndex) in block.text"
:key="`list-line-${block.meta.startLine + itemIndex}`"
class="content-markdown-renderer__list-item flex items-center gap-2"
class="content-markdown-renderer__list-item flex items-start gap-2"
:class="rawEditingSourceLines.has(block.meta.startLine + itemIndex) ? 'content-markdown-renderer__list-item--raw' : ''"
>
<span
@@ -3082,7 +3082,7 @@ onBeforeUnmount(() => {
<li
v-for="(item, itemIndex) in block.text"
:key="`${block.id}-${itemIndex}`"
class="content-markdown-renderer__list-item flex items-center gap-2"
class="content-markdown-renderer__list-item flex items-start gap-2"
>
<span
v-if="block.ordered"
@@ -3367,7 +3367,7 @@ onBeforeUnmount(() => {
class="border border-line bg-[color-mix(in_srgb,var(--site-text)_6%,transparent)] px-3 py-2 font-semibold"
:class="getTableCellAlignClass(block.meta.alignments?.[headerIndex])"
>
<ContentMarkdownInlineSegments :text="header" />
<ContentMarkdownInlineSegments :text="header" multiline />
</th>
</tr>
</thead>
@@ -3379,7 +3379,7 @@ onBeforeUnmount(() => {
class="border border-line px-3 py-2 align-top"
:class="getTableCellAlignClass(block.meta.alignments?.[cellIndex])"
>
<ContentMarkdownInlineSegments :text="row[cellIndex] || ''" />
<ContentMarkdownInlineSegments :text="row[cellIndex] || ''" multiline />
</td>
</tr>
</tbody>
@@ -3511,6 +3511,7 @@ onBeforeUnmount(() => {
.content-markdown-renderer__list-marker {
width: 21px;
height: 2rem;
flex-shrink: 0;
}
@@ -3518,6 +3519,7 @@ onBeforeUnmount(() => {
text-align: right;
font-weight: 500;
font-variant-numeric: tabular-nums;
line-height: 2rem;
color: v-bind(CONTENT_LIST_MARKER_COLOR);
}