slidev-theme-gtlabo 2.1.7 → 2.1.9

package/components/AlertBox.vue

@@ -0,0 +1,58 @@
+<!-- AlertBox.vue -->
+<template>
+  <div :class="[
+    'border-l-8 p-3 shadow-md rounded-r-lg gap-4 flex items-center',
+    variants[variant].bg,
+    variants[variant].border,
+  ]">
+    <div :class="['w-10 h-10 flex-shrink-0 ml-2', variants[variant].iconColor]">
+      <slot name="icon">
+        <lucide-frown v-if="variant === 'warning'" class="w-10 h-10" />
+        <lucide-lightbulb v-else-if="variant === 'info'" class="w-10 h-10" />
+        <lucide-circle-check v-else-if="variant === 'success'" class="w-10 h-10" />
+        <lucide-search-check v-else-if="variant === 'result'" class="w-10 h-10" />
+        <lucide-circle-x v-else class="w-10 h-10" />
+      </slot>
+    </div>
+    <div class="text-2xl font-bold text-slate-800 leading-relaxed">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  variant: {
+    type: String,
+    default: 'warning',
+  },
+})
+
+const variants = {
+  warning: {
+    bg: 'bg-slate-50',
+    border: 'border-slate-600',
+    iconColor: 'text-red-500',
+  },
+  info: {
+    bg: 'bg-gradient-to-r from-slate-50 to-white',
+    border: 'border-indigo-600',
+    iconColor: 'text-yellow-500',
+  },
+  success: {
+    bg: 'bg-green-50',
+    border: 'border-green-600',
+    iconColor: 'text-green-500',
+  },
+  error: {
+    bg: 'bg-red-50',
+    border: 'border-red-600',
+    iconColor: 'text-red-500',
+  },
+  result: {
+    bg: 'bg-gradient-to-r from-slate-50 to-white',
+    border: 'border-indigo-600',
+    iconColor: 'text-green-500',
+  },
+}
+</script>

package/components/Citation.vue

@@ -1,9 +1,15 @@
 <template>
   <span>
-    <!-- インライン引用番号 -->
-    <sup class="text-blue-600 font-semibold cursor-help" :title="formattedCitation">
-      [{{ citationNumber }}]
+    <sup v-if="citationStyle === 'numbered'"
+         class="text-blue-600 font-semibold cursor-help"
+         :title="formattedCitation">
+      {{ displayText }}
     </sup>
+    <span v-else
+          class="text-blue-600 font-semibold cursor-help"
+          :title="formattedCitation">
+      {{ displayText }}
+    </span>
   </span>
 </template>
 
@@ -13,141 +19,91 @@ import { useSlideContext } from '@slidev/client'
 
 const { $slidev, $page } = useSlideContext()
 
-// $page を数値として取得するヘルパー
 const getPageNumber = () => {
-  if (isRef($page)) {
-    return $page.value
-  }
+  if (isRef($page)) return $page.value
   return $page
 }
 
-// 方法1: frontmatterから取得（従来通り）
 const frontmatterCitations = $slidev.configs.citations || {}
-
-// 方法2: injectから取得（外部ファイル対応）
 const injectedCitations = inject('citations', {})
-
-// 両方をマージ（frontmatter優先）
 const citations = computed(() => ({
   ...injectedCitations,
   ...frontmatterCitations
 }))
 
+// slides.md の frontmatter から citationStyle を取得
+const citationStyle = $slidev.configs.citationStyle || 'numbered'
+
 const props = defineProps({
-  id: {
-    type: String,
-    required: true
-  }
+  id: { type: String, required: true }
 })
 
-// ページごとの引用管理（slide-bottom.vue用）
 if (!window.pageCitations) {
   window.pageCitations = {
-    data: new Map(),  // pageNumber -> Set of citation ids
+    data: new Map(),
     listeners: new Set()
   }
 }
 
 const notifyListeners = () => {
   window.pageCitations.listeners.forEach(listener => {
-    try { listener() } catch (e) { /* ignore */ }
+    try { listener() } catch (e) {}
   })
 }
 
-// 引用データを取得
-const citationData = computed(() => {
-  return citations.value[props.id] || null
-})
+const citationData = computed(() => citations.value[props.id] || null)
 
-// 引用番号を取得（シンプル版：毎回計算）
+// 番号形式: [1]
 const citationNumber = computed(() => {
   const citationsData = citations.value
-  if (!citationsData || !citationData.value) {
-    return '?'
-  }
-  
+  if (!citationsData || !citationData.value) return '?'
   const keys = Object.keys(citationsData)
   const index = keys.indexOf(props.id)
-  
-  if (index >= 0) {
-    return index + 1
-  }
-  
-  return '?'
+  return index >= 0 ? index + 1 : '?'
+})
+
+// APA インライン形式: (first_author, year)
+const apaInline = computed(() => {
+  if (!citationData.value) return '(?)'
+  const firstAuthor = citationData.value.first_author || '?'
+  const year = citationData.value.year || '?'
+  return `(${firstAuthor} ${year})`
+})
+
+// スタイルに応じて表示テキストを切り替え
+const displayText = computed(() => {
+  if (citationStyle === 'apa') return apaInline.value
+  return `[${citationNumber.value}]`
 })
 
-// フォーマットされた引用テキスト
 const formattedCitation = computed(() => {
-  if (!citationData.value) {
-    return '引用情報が見つかりません'
-  }
+  if (!citationData.value) return '引用情報が見つかりません'
   return formatCitation(citationData.value)
 })
 
-// 引用をフォーマット
 const formatCitation = (data) => {
-  if (!data) {
-    return '引用情報が見つかりません'
-  }
-  
+  if (!data) return '引用情報が見つかりません'
   let citation = ''
-  
-  if (data.author) {
-    citation += data.author
-  }
-  
-  if (data.title) {
-    citation += citation ? `, "${data.title}"` : `"${data.title}"`
-  }
-  
-  if (data.journal) {
-    citation += citation ? `, ${data.journal}` : data.journal
-  }
-  
-  if (data.volume && data.number) {
-    citation += `, Vol. ${data.volume}, No. ${data.number}`
-  } else if (data.volume) {
-    citation += `, Vol. ${data.volume}`
-  } else if (data.number) {
-    citation += `, No. ${data.number}`
-  }
-  
-  if (data.pages) {
-    citation += `, pp. ${data.pages}`
-  }
-  
-  if (data.year) {
-    citation += citation ? ` (${data.year})` : data.year
-  }
-  
-  if (data.publisher) {
-    citation += citation ? `, ${data.publisher}` : data.publisher
-  }
-  
-  if (data.url) {
-    citation += citation ? `, ${data.url}` : data.url
-  }
-  
-  if (data.issn) {
-    citation += `, ISSN: ${data.issn}`
-  }
-  
+  if (data.author) citation += data.author
+  if (data.title) citation += citation ? `, "${data.title}"` : `"${data.title}"`
+  if (data.journal) citation += citation ? `, ${data.journal}` : data.journal
+  if (data.volume && data.number) citation += `, Vol. ${data.volume}, No. ${data.number}`
+  else if (data.volume) citation += `, Vol. ${data.volume}`
+  else if (data.number) citation += `, No. ${data.number}`
+  if (data.pages) citation += `, pp. ${data.pages}`
+  if (data.year) citation += citation ? ` (${data.year})` : data.year
+  if (data.publisher) citation += citation ? `, ${data.publisher}` : data.publisher
+  if (data.url) citation += citation ? `, ${data.url}` : data.url
+  if (data.issn) citation += `, ISSN: ${data.issn}`
   return citation || '引用情報が不完全です'
 }
 
-// 現在のページに引用を登録（slide-bottom.vue用）
 const registerCitation = () => {
   const page = getPageNumber()
-  
-  if (!page) {
-    console.warn('Citation: page is null or undefined')
-    return
-  }
-  
+  if (!page) return
   if (!window.pageCitations.data.has(page)) {
     window.pageCitations.data.set(page, new Set())
   }
-  
   const pageSet = window.pageCitations.data.get(page)
   if (!pageSet.has(props.id)) {
     pageSet.add(props.id)
@@ -155,28 +111,19 @@ const registerCitation = () => {
   }
 }
 
-// 現在のページから引用を解除
 const unregisterCitation = () => {
   const page = getPageNumber()
   if (!page) return
-  
   const pageSet = window.pageCitations.data.get(page)
   if (pageSet) {
     pageSet.delete(props.id)
-    if (pageSet.size === 0) {
-      window.pageCitations.data.delete(page)
-    }
+    if (pageSet.size === 0) window.pageCitations.data.delete(page)
     notifyListeners()
   }
 }
 
-onMounted(() => {
-  registerCitation()
-})
-
-onUnmounted(() => {
-  unregisterCitation()
-})
+onMounted(() => registerCitation())
+onUnmounted(() => unregisterCitation())
 </script>
 
 <style scoped>

package/components/EqRef.vue

@@ -0,0 +1,33 @@
+<template>
+  <span class="eq-ref cursor-help" :title="tooltipText">({{ displayNumber }})</span>
+</template>
+
+<script setup>
+import { computed, inject } from 'vue'
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true
+  }
+})
+
+const equationRegistry = inject('equationRegistry', null)
+
+const displayNumber = computed(() => {
+  if (!equationRegistry) return '?'
+  const num = equationRegistry.getNumber(props.id)
+  return num ?? '?'
+})
+
+const tooltipText = computed(() => {
+  return `式 (${displayNumber.value})`
+})
+</script>
+
+<style scoped>
+.eq-ref {
+  color: #2563eb;
+  font-weight: 500;
+}
+</style>

package/components/HighlightText.vue

@@ -0,0 +1,40 @@
+<!-- HighlightText.vue として保存 -->
+<template>
+  <span :class="[
+    'mx-1',
+    'font-bold',
+    variants[variant].text,
+    variants[variant].decoration,
+  ]">
+    <slot />
+  </span>
+</template>
+
+<script setup>
+const props = defineProps({
+  variant: {
+    type: String,
+    default: 'orange',
+    validator: (v) => ['orange', 'indigo', 'red', 'green'].includes(v),
+  },
+})
+
+const variants = {
+  orange: {
+    text: 'text-orange-700',
+    decoration: 'border-b-4 border-orange-300',
+  },
+  indigo: {
+    text: 'text-indigo-700',
+    decoration: 'underline decoration-indigo-300 decoration-4 underline-offset-8',
+  },
+  red: {
+    text: 'text-red-700',
+    decoration: 'border-b-4 border-red-300',
+  },
+  green: {
+    text: 'text-green-700',
+    decoration: 'border-b-4 border-green-300',
+  },
+}
+</script>

package/components/MathText.vue

@@ -2,6 +2,7 @@
   <component 
     :is="containerTag"
     :class="['math-text-container', containerClass]"
+    :style="eq ? 'position: relative; display: block;' : ''"
   >
     <!-- スロットが使われている場合 -->
     <template v-if="hasSlotContent">
@@ -72,11 +73,16 @@
         </div>
       </template>
     </template>
+
+    <!-- 数式番号 -->
+    <span v-if="eq && eqNumber !== null" class="eq-number">
+      ({{ eqNumber }})
+    </span>
   </component>
 </template>
 
 <script setup>
-import { computed, ref, onMounted, nextTick, watch, useSlots } from 'vue'
+import { computed, ref, onMounted, onUnmounted, nextTick, watch, useSlots, inject } from 'vue'
 
 const props = defineProps({
   text: {
@@ -103,36 +109,42 @@ const props = defineProps({
     type: String,
     default: ''
   },
-  // シンプルモード（SimpleMathText相当）
   simple: {
     type: Boolean,
     default: false
   },
-  // Markdownを無効にする
   disableMarkdown: {
     type: Boolean,
     default: false
   },
-  // カスタム区切り文字パターン
   customDelimiters: {
     type: Array,
     default: null
+  },
+  eq: {
+    type: String,
+    default: null
   }
 })
 
+// 数式レジストリ
+const equationRegistry = inject('equationRegistry', null)
+
+const eqNumber = computed(() => {
+  if (!props.eq || !equationRegistry) return null
+  return equationRegistry.getNumber(props.eq)
+})
+
 const slots = useSlots()
 const mathElements = ref({})
 
-// スロットにコンテンツがあるかチェック
 const hasSlotContent = computed(() => {
   return slots.default && slots.default().length > 0
 })
 
-// テキストコンテンツを処理（Markdown + 改行 + HTMLエスケープ）
 const processTextContent = (content) => {
   if (!content) return ''
   
-  // まずHTMLエスケープ（数式とMarkdownは後で処理）
   let processed = content
     .replace(/&/g, '&amp;')
     .replace(/</g, '&lt;')
@@ -140,56 +152,28 @@ const processTextContent = (content) => {
     .replace(/"/g, '&quot;')
     .replace(/'/g, '&#x27;')
   
-  // Markdownが有効な場合の処理
   if (!props.disableMarkdown) {
-    // リストアイテム（- で始まる行）
     processed = processed.replace(/^- (.+)$/gm, '<li>$1</li>')
-    
-    // 連続するliタグをulで囲む
     processed = processed.replace(/(<li>.*<\/li>(?:\n<li>.*<\/li>)*)/g, '<ul>$1</ul>')
-    
-    // 番号付きリスト（1. で始まる行）
     processed = processed.replace(/^\d+\. (.+)$/gm, '<li>$1</li>')
-    
-    // 連続する番号付きliタグをolで囲む（ulの後に処理）
     processed = processed.replace(/(<li>.*<\/li>(?:\n<li>.*<\/li>)*)/g, (match) => {
-      // 既にulで囲まれていない場合のみolで囲む
-      if (!match.includes('<ul>')) {
-        return '<ol>' + match + '</ol>'
-      }
+      if (!match.includes('<ul>')) return '<ol>' + match + '</ol>'
       return match
     })
-    
-    // 太字 **text** または __text__
     processed = processed.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
     processed = processed.replace(/__(.*?)__/g, '<strong>$1</strong>')
-    
-    // イタリック *text* または _text_（ただし数式の*は除外）
     processed = processed.replace(/(?<!\$[^$]*)\*([^*\n]+?)\*(?![^$]*\$)/g, '<em>$1</em>')
     processed = processed.replace(/(?<!\$[^$]*)_([^_\n]+?)_(?![^$]*\$)/g, '<em>$1</em>')
-    
-    // コードスパン `code`
     processed = processed.replace(/`([^`]+)`/g, '<code>$1</code>')
-    
-    // リンク [text](url)
     processed = processed.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>')
-    
-    // 見出し ### text
     processed = processed.replace(/^### (.+)$/gm, '<h3>$1</h3>')
     processed = processed.replace(/^## (.+)$/gm, '<h2>$1</h2>')
     processed = processed.replace(/^# (.+)$/gm, '<h1>$1</h1>')
-    
-    // 水平線 ---
     processed = processed.replace(/^---$/gm, '<hr>')
-    
-    // 引用 > text
     processed = processed.replace(/^> (.+)$/gm, '<blockquote>$1</blockquote>')
   }
   
-  // 改行を<br>タグに変換（ただし、HTMLタグの直後は除く）
   processed = processed.replace(/\n(?!<)/g, '<br>')
-  
-  // HTMLタグ間の不要な<br>を除去
   processed = processed.replace(/<\/([^>]+)><br><([^>\/][^>]*)>/g, '</$1><$2>')
   processed = processed.replace(/<\/li><br>/g, '</li>')
   processed = processed.replace(/<br><li>/g, '<li>')
@@ -201,7 +185,6 @@ const processTextContent = (content) => {
   return processed
 }
 
-// スロットの内容をテキストに変換（改良版）
 const slotTextContent = computed(() => {
   if (!hasSlotContent.value) return ''
   
@@ -209,42 +192,23 @@ const slotTextContent = computed(() => {
     if (typeof vnode === 'string') return vnode
     if (typeof vnode === 'number') return String(vnode)
     if (!vnode) return ''
-    
-    if (Array.isArray(vnode)) {
-      return vnode.map(extractTextFromVNode).join('')
-    }
-    
-    // テキストノードの処理
+    if (Array.isArray(vnode)) return vnode.map(extractTextFromVNode).join('')
     if (vnode.type === 'text' || vnode.type === Text || typeof vnode.children === 'string') {
       return vnode.children || vnode.text || ''
     }
-    
-    // 改行要素の処理
-    if (vnode.type === 'br') {
-      return '\n'
-    }
-    
-    // 子要素がある場合の再帰処理
-    if (Array.isArray(vnode.children)) {
-      return vnode.children.map(extractTextFromVNode).join('')
-    }
-    
-    // コンポーネントの場合はプレースホルダーを返す
+    if (vnode.type === 'br') return '\n'
+    if (Array.isArray(vnode.children)) return vnode.children.map(extractTextFromVNode).join('')
     if (typeof vnode.type === 'object' || typeof vnode.type === 'function') {
       return `<COMPONENT:${vnode.type.name || 'Unknown'}>`
     }
-    
     return vnode.children || ''
   }
   
-  const result = slots.default().map(extractTextFromVNode).join('')
-  return result
+  return slots.default().map(extractTextFromVNode).join('')
 })
 
-// デフォルトの区切り文字パターン
 const getDelimiters = () => {
   if (props.simple) {
-    // シンプルモード：$...$のみ
     return [
       { 
         pattern: /\$([^$\n]+)\$/g, 
@@ -255,35 +219,30 @@ const getDelimiters = () => {
   }
   
   return props.customDelimiters || [
-    // LaTeX環境（最優先）
     { 
       pattern: /\\begin\{(align\*?|equation\*?|gather\*?|multline\*?|split|eqnarray\*?|alignat\*?|flalign\*?)\}([\s\S]*?)\\end\{\1\}/g, 
       type: 'block-math',
       process: (match) => match[0],
       priority: 0
     },
-    // $$...$$（ブロック数式）
     { 
       pattern: /\$\$([^$]*(?:\$(?!\$)[^$]*)*)\$\$/g, 
       type: 'block-math',
       process: (match) => match[1].trim(),
       priority: 1
     },
-    // $...$（インライン数式）
     { 
       pattern: /\$([^$\n]+)\$/g, 
       type: 'inline-math',
       process: (match) => match[1].trim(),
       priority: 2
     },
-    // \(...\)（インライン数式）
     { 
       pattern: /\\\(([^)]+)\\\)/g, 
       type: 'inline-math',
       process: (match) => match[1].trim(),
       priority: 3
     },
-    // \[...\]（ブロック数式）
     { 
       pattern: /\\\[([^\]]+)\\\]/g, 
       type: 'block-math',
@@ -293,7 +252,6 @@ const getDelimiters = () => {
   ]
 }
 
-// テキストを解析してセグメントに分割
 const parseTextToSegments = (inputText) => {
   if (!inputText) return []
   
@@ -302,7 +260,6 @@ const parseTextToSegments = (inputText) => {
   let currentText = inputText
   const mathBlocks = []
   
-  // 全ての数式パターンを検出
   delimiters.forEach((delimiter, delimiterIndex) => {
     let match
     const regex = new RegExp(delimiter.pattern.source, delimiter.pattern.flags)
@@ -319,13 +276,11 @@ const parseTextToSegments = (inputText) => {
     }
   })
   
-  // 開始位置でソート、重複する場合は優先度で決定
   mathBlocks.sort((a, b) => {
     if (a.start !== b.start) return a.start - b.start
     return a.priority - b.priority
   })
   
-  // 重複する範囲を除去
   const filteredBlocks = []
   for (let i = 0; i < mathBlocks.length; i++) {
     const current = mathBlocks[i]
@@ -333,7 +288,6 @@ const parseTextToSegments = (inputText) => {
     
     for (let j = filteredBlocks.length - 1; j >= 0; j--) {
       const existing = filteredBlocks[j]
-      
       if (!(current.end <= existing.start || current.start >= existing.end)) {
         if (current.priority < existing.priority || 
            (current.priority === existing.priority && (current.end - current.start) > (existing.end - existing.start))) {
@@ -345,67 +299,43 @@ const parseTextToSegments = (inputText) => {
       }
     }
     
-    if (shouldAdd) {
-      filteredBlocks.push(current)
-    }
+    if (shouldAdd) filteredBlocks.push(current)
   }
   
   filteredBlocks.sort((a, b) => a.start - b.start)
   
-  // セグメントを構築
   let lastIndex = 0
   
   filteredBlocks.forEach(block => {
-    // 数式の前のテキスト部分
     if (block.start > lastIndex) {
       const textContent = currentText.slice(lastIndex, block.start)
       if (textContent) {
-        // 改行で分割してセグメントを作成
         const lines = textContent.split('\n')
         lines.forEach((line, lineIndex) => {
-          if (line || lineIndex === 0) { // 空行も最初の行なら保持
-            segments.push({
-              type: 'text',
-              content: line
-            })
+          if (line || lineIndex === 0) {
+            segments.push({ type: 'text', content: line })
           }
-          // 改行を追加（最後の行以外）
           if (lineIndex < lines.length - 1) {
-            segments.push({
-              type: 'text',
-              content: '\n'
-            })
+            segments.push({ type: 'text', content: '\n' })
           }
         })
       }
     }
     
-    // 数式部分
-    segments.push({
-      type: block.type,
-      content: block.content
-    })
-    
+    segments.push({ type: block.type, content: block.content })
     lastIndex = block.end
   })
   
-  // 残りのテキスト
   if (lastIndex < currentText.length) {
     const textContent = currentText.slice(lastIndex)
     if (textContent) {
       const lines = textContent.split('\n')
       lines.forEach((line, lineIndex) => {
         if (line || lineIndex === 0) {
-          segments.push({
-            type: 'text',
-            content: line
-          })
+          segments.push({ type: 'text', content: line })
         }
         if (lineIndex < lines.length - 1) {
-          segments.push({
-            type: 'text',
-            content: '\n'
-          })
+          segments.push({ type: 'text', content: '\n' })
         }
       })
     }
@@ -414,26 +344,20 @@ const parseTextToSegments = (inputText) => {
   return segments
 }
 
-// textプロパティから処理されたセグメント
 const processedTextSegments = computed(() => {
   if (!props.text) return []
   return parseTextToSegments(props.text)
 })
 
-// スロットから処理されたセグメント
 const processedSlotSegments = computed(() => {
   if (!hasSlotContent.value) return []
   return parseTextToSegments(slotTextContent.value)
 })
 
-// 数式要素の参照を設定
 const setMathElement = (key, el) => {
-  if (el) {
-    mathElements.value[key] = el
-  }
+  if (el) mathElements.value[key] = el
 }
 
-// 数式レンダリング
 const renderMathElements = async () => {
   await nextTick()
   
@@ -454,7 +378,6 @@ const renderMathElements = async () => {
               katex = katexModule.default || katexModule
               window.katex = katex
             } catch (e) {
-              // KaTeXが利用できない場合のフォールバック
               if (props.simple) {
                 element.innerHTML = `<span style="font-style: italic; color: #0066cc; background: #f0f8ff; padding: 1px 3px; border-radius: 3px;">${formula}</span>`
               } else {
@@ -490,20 +413,25 @@ const renderMathElements = async () => {
 }
 
 onMounted(() => {
+  if (props.eq && equationRegistry) {
+    equationRegistry.register(props.eq)
+  }
   renderMathElements()
 })
 
+onUnmounted(() => {
+  if (props.eq && equationRegistry) {
+    equationRegistry.unregister(props.eq)
+  }
+})
+
 watch([() => props.text, hasSlotContent], () => {
   mathElements.value = {}
-  nextTick(() => {
-    renderMathElements()
-  })
+  nextTick(() => renderMathElements())
 }, { flush: 'post' })
 
 watch([processedTextSegments, processedSlotSegments], () => {
-  nextTick(() => {
-    renderMathElements()
-  })
+  nextTick(() => renderMathElements())
 }, { flush: 'post' })
 </script>
 
@@ -531,7 +459,6 @@ watch([processedTextSegments, processedSlotSegments], () => {
   text-align: center;
 }
 
-/* KaTeX用の基本スタイリング */
 .inline-math-formula :deep(.katex),
 .block-math-formula :deep(.katex) {
   font-size: inherit !important;
@@ -546,7 +473,6 @@ watch([processedTextSegments, processedSlotSegments], () => {
   text-align: center;
 }
 
-/* シンプルモード用のフォールバックスタイル */
 .math-text-container.simple-mode .inline-math-formula {
   font-style: italic;
   color: #0066cc;
@@ -554,4 +480,13 @@ watch([processedTextSegments, processedSlotSegments], () => {
   padding: 1px 3px;
   border-radius: 3px;
 }
+
+.eq-number {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #374151;
+  font-size: 0.9em;
+}
 </style>

package/components/SubSectionTitle.vue

@@ -12,7 +12,9 @@
       :class="textColorClass"
       :style="customTextStyle"
     >
-      {{ title }}
+      <!-- スロットがある場合はスロットを使用、ない場合はtitleプロパティを使用 -->
+      <slot v-if="$slots.default" />
+      <span v-else>{{ title }}</span>
     </h2>
   </div>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slidev-theme-gtlabo",
-  "version": "2.1.7",
+  "version": "2.1.9",
   "description": "A Slidev theme for laboratory presentations with customizable components",
   "author": "mksmkss",
   "license": "MIT",