From 6d965ccd4029cf9df077abdadfb1543fb3a9d5de Mon Sep 17 00:00:00 2001
From: estel <690930@qq.com>
Date: Sun, 10 Aug 2025 22:18:56 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9H1-H6=E5=92=8C=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC,strong=E5=AD=97=E4=BD=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/content/ProseH1.vue          |  25 ++-
 app/components/content/ProseH2.vue          |  35 +++-
 app/components/content/ProseH3.vue          |  71 ++++++-
 app/components/content/ProseH4.vue          |  10 +-
 app/components/content/ProseH5.vue          |  10 +-
 app/components/content/ProseH6.vue          |  16 +-
 app/components/content/ProseStrong.vue      |   5 +
 app/components/content/ProseTable.vue       |  15 ++
 app/components/content/ProseTh.vue          |   5 +
 app/components/content/ProseThead.vue       |   5 +
 content/docs/1.简单文档/1.index.md          |   2 +-
 content/docs/1.简单文档/3.writing/5.test.md | 218 ++++++++++++++++++++
 12 files changed, 407 insertions(+), 10 deletions(-)
 create mode 100644 app/components/content/ProseStrong.vue
 create mode 100644 app/components/content/ProseTable.vue
 create mode 100644 app/components/content/ProseTh.vue
 create mode 100644 app/components/content/ProseThead.vue
 create mode 100644 content/docs/1.简单文档/3.writing/5.test.md

diff --git a/app/components/content/ProseH1.vue b/app/components/content/ProseH1.vue
index 2be2362..96bd826 100644
--- a/app/components/content/ProseH1.vue
+++ b/app/components/content/ProseH1.vue
@@ -1,7 +1,8 @@
 <template>
   <h1
     :id
-    class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl"
+    :class="['scroll-m-20 font-extrabold tracking-tight', themeSizeClass]"
+    :style="themeTextShadowStyle"
   >
     <NuxtLink
       v-if="generate"
@@ -18,4 +19,26 @@ const { id } = defineProps<{ id?: string }>()
 
 const { headings } = useRuntimeConfig().public.mdc
 const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h1)))
+
+// 读取主题，按主题做轻量风格差异：
+// - classic: 无阴影，正常字号
+// - elegant: 有文字阴影，正常字号
+// - minimal: 无阴影，较小字号
+const { selectedTheme } = useTheme()
+
+// 这个计算属性 themeSizeClass 用于根据当前主题（selectedTheme）动态设置 h1 标题的字号样式：
+// - 如果主题是 minimal，则使用较小字号 'text-2xl lg:text-3xl'
+// - 否则（classic 或 elegant），使用较大字号 'text-3xl lg:text-4xl'
+const themeSizeClass = computed(() => {
+  return selectedTheme.value === 'classic'
+    ? 'text-2xl lg:text-3xl border-b border-gray-200 dark:border-gray-700'
+    : 'text-3xl lg:text-4xl'
+})
+
+const themeTextShadowStyle = computed(() => {
+  if (selectedTheme.value === 'elegant') {
+    return { textShadow: '0 2px 8px rgba(0,0,0,0.15)' }
+  }
+  return { textShadow: 'none' }
+})
 </script>
diff --git a/app/components/content/ProseH2.vue b/app/components/content/ProseH2.vue
index 21b4347..2f07606 100644
--- a/app/components/content/ProseH2.vue
+++ b/app/components/content/ProseH2.vue
@@ -1,11 +1,13 @@
 <template>
   <h2
     :id
-    class="scroll-m-20 border-b border-gray-200 dark:border-gray-700 pb-2 text-3xl font-semibold tracking-tight transition-colors [&:not(:first-child)]:mt-10 mb-2"
+    :class="['scroll-m-20 inline-block text-white font-semibold tracking-tight transition-colors [&:not(:first-child)]:mt-10 mb-2', themeSizeClass, themePaddingClass]"
+    :style="h2Style"
   >
     <NuxtLink
       v-if="id && generate"
       :to="`#${id}`"
+      class="no-underline"
     >
       <slot />
     </NuxtLink>
@@ -16,6 +18,37 @@
 <script setup lang="ts">
 const { id } = defineProps<{ id?: string }>()
 
+// 读取主题，用主题主色 + 圆角变量渲染带底色的 H2
+const { selectedTheme, selectedThemeColor, customColor, themeColors } = useTheme()
+
+// 这个计算属性 themeSizeClass 用于根据当前主题（selectedTheme）动态设置 h1 标题的字号样式：
+// - 如果主题是 minimal，则使用较小字号 'text-2xl lg:text-3xl'
+// - 否则（classic 或 elegant），使用较大字号 'text-3xl lg:text-4xl'
+const themeSizeClass = computed(() => {
+  return selectedTheme.value === 'classic'
+    ? 'text-xl lg:text-1xl '
+    : 'text-1xl lg:text-2xl'
+})
+
+// 经典：更贴合文字（小内边距）；优雅/简洁：略大（更舒展）
+const themePaddingClass = computed(() => {
+  return selectedTheme.value === 'classic'
+    ? 'px-1 py-0.5'
+    : 'px-5 py-2'
+})
+
 const { headings } = useRuntimeConfig().public.mdc
 const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h2)))
+
+// 背景颜色取主题主色；若为自定义颜色，则取 customColor
+const primaryHex = computed(() => {
+  if (selectedThemeColor.value === 'custom') return customColor.value
+  const found = themeColors.find(c => c.value === selectedThemeColor.value)
+  return found?.color || '#3B82F6' // fallback 经典蓝
+})
+
+const h2Style = computed(() => ({
+  backgroundColor: primaryHex.value,
+  borderRadius: 'var(--ui-card-radius)',
+}))
 </script>
diff --git a/app/components/content/ProseH3.vue b/app/components/content/ProseH3.vue
index 8f76080..d9604d0 100644
--- a/app/components/content/ProseH3.vue
+++ b/app/components/content/ProseH3.vue
@@ -1,8 +1,16 @@
 <template>
   <h3
     :id
-    class="scroll-m-20 text-2xl font-semibold tracking-tight [&:not(:first-child)]:mt-8 mb-3"
+    :class="['scroll-m-20 font-semibold tracking-tight [&:not(:first-child)]:mt-8 mb-3 flex items-center gap-2', themeSizeClass, themeDecorClass]"
+    :style="h3Style"
   >
+    <span
+      v-if="showLeadingLine"
+      aria-hidden="true"
+      class="inline-block"
+      :class="themeLineClass"
+      :style="lineStyle"
+    />
     <NuxtLink
       v-if="id && generate"
       :to="`#${id}`"
@@ -18,4 +26,65 @@ const { id } = defineProps<{ id?: string }>()
 
 const { headings } = useRuntimeConfig().public.mdc
 const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h3)))
+
+// 主题风格：
+// - classic：左侧竖线（主色），无额外背景
+// - elegant：底部虚线
+// - minimal：卡片式浅色主色背景 + 左侧竖线
+const { selectedTheme, selectedThemeColor, customColor, themeColors } = useTheme()
+
+const themeSizeClass = computed(() => {
+  return selectedTheme.value === 'classic'
+    ? 'text-xl lg:text-1xl'
+    : 'text-1xl lg:text-2xl'
+})
+
+const isClassic = computed(() => selectedTheme.value === 'classic')
+const isElegant = computed(() => selectedTheme.value === 'elegant')
+const isMinimal = computed(() => selectedTheme.value === 'minimal')
+
+const showLeadingLine = computed(() => isClassic.value || isMinimal.value || isElegant.value)
+
+const primaryHex = computed(() => {
+  if (selectedThemeColor.value === 'custom') return customColor.value
+  const found = themeColors.find(c => c.value === selectedThemeColor.value)
+  return found?.color || '#3B82F6'
+})
+
+const themeDecorClass = computed(() => {
+  if (isElegant.value) return 'border-b border-dashed pb-1 border-primary dark:border-primary'
+  if (isMinimal.value) return 'px-3 py-2'
+  return ''
+})
+
+const themeLineClass = computed(() => {
+  return isClassic.value ? 'w-1 h-[0.9em]' : 'w-1 h-[1em]'
+})
+
+const lineStyle = computed(() => ({
+  backgroundColor: primaryHex.value,
+  borderRadius: '4px'
+}))
+
+function hexToRgba(hex: string, alpha: number): string {
+  const normalized = String(hex).replace('#', '')
+  const bigint = parseInt(normalized.length === 3
+    ? normalized.split('').map(ch => ch + ch).join('')
+    : normalized, 16)
+  const r = (bigint >> 16) & 255
+  const g = (bigint >> 8) & 255
+  const b = bigint & 255
+  return `rgba(${r}, ${g}, ${b}, ${Math.min(Math.max(alpha, 0), 1)})`
+}
+
+const h3Style = computed(() => {
+  if (isMinimal.value) {
+    return {
+      backgroundColor: hexToRgba(primaryHex.value, 0.08),
+      border: `1px solid ${hexToRgba(primaryHex.value, 0.2)}`,
+      borderRadius: 'var(--ui-card-radius)'
+    }
+  }
+  return {}
+})
 </script>
diff --git a/app/components/content/ProseH4.vue b/app/components/content/ProseH4.vue
index dc02bd9..17761ba 100644
--- a/app/components/content/ProseH4.vue
+++ b/app/components/content/ProseH4.vue
@@ -1,7 +1,7 @@
 <template>
   <h4
     :id
-    class="scroll-m-20 text-xl font-semibold tracking-tight [&:not(:first-child)]:mt-6 mb-2"
+    :class="['scroll-m-20 font-semibold text-primary tracking-tight [&:not(:first-child)]:mt-6 mb-2', themeSizeClass]"
   >
     <NuxtLink
       v-if="id && generate"
@@ -18,4 +18,12 @@ const { id } = defineProps<{ id?: string }>()
 
 const { headings } = useRuntimeConfig().public.mdc
 const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h4)))
+
+const { selectedTheme } = useTheme()
+const themeSizeClass = computed(() => {
+  return selectedTheme.value === 'classic'
+    ? 'text-xl lg:text-1xl'
+    : 'text-1xl lg:text-2xl'
+})
+
 </script>
diff --git a/app/components/content/ProseH5.vue b/app/components/content/ProseH5.vue
index cbea9d2..4d0eb84 100644
--- a/app/components/content/ProseH5.vue
+++ b/app/components/content/ProseH5.vue
@@ -1,7 +1,7 @@
 <template>
   <h5
     :id
-    class="scroll-m-20 text-lg font-semibold tracking-tight [&:not(:first-child)]:mt-6"
+    :class="['scroll-m-20 font-bold text-primary tracking-tight [&:not(:first-child)]:mt-6',themeSizeClass]"
   >
     <NuxtLink
       v-if="id && generate"
@@ -18,4 +18,12 @@ const { id } = defineProps<{ id?: string }>()
 
 const { headings } = useRuntimeConfig().public.mdc
 const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h5)))
+
+const { selectedTheme } = useTheme()
+const themeSizeClass = computed(() => {
+  return selectedTheme.value === 'classic'
+    ? 'text-lg lg:text-xl'
+    : 'text-xl lg:text-1xl'
+})
+
 </script>
diff --git a/app/components/content/ProseH6.vue b/app/components/content/ProseH6.vue
index 63f6999..9f45b17 100644
--- a/app/components/content/ProseH6.vue
+++ b/app/components/content/ProseH6.vue
@@ -1,7 +1,7 @@
 <template>
-  <h6
+  <h5
     :id
-    class="scroll-m-20 text-lg font-semibold tracking-tight [&:not(:first-child)]:mt-6"
+    :class="['scroll-m-20 font-normal text-primary tracking-tight [&:not(:first-child)]:mt-6',themeSizeClass]"
   >
     <NuxtLink
       v-if="id && generate"
@@ -10,12 +10,20 @@
       <slot />
     </NuxtLink>
     <slot v-else />
-  </h6>
+  </h5>
 </template>
 
 <script setup lang="ts">
 const { id } = defineProps<{ id?: string }>()
 
 const { headings } = useRuntimeConfig().public.mdc
-const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h6)))
+const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h5)))
+
+const { selectedTheme } = useTheme()
+const themeSizeClass = computed(() => {
+  return selectedTheme.value === 'classic'
+    ? 'text-lg lg:text-xl'
+    : 'text-xl lg:text-1xl'
+})
+
 </script>
diff --git a/app/components/content/ProseStrong.vue b/app/components/content/ProseStrong.vue
new file mode 100644
index 0000000..fb204be
--- /dev/null
+++ b/app/components/content/ProseStrong.vue
@@ -0,0 +1,5 @@
+<template>
+    <strong class="text-primary">
+        <slot />
+    </strong>
+</template>
\ No newline at end of file
diff --git a/app/components/content/ProseTable.vue b/app/components/content/ProseTable.vue
new file mode 100644
index 0000000..d726a69
--- /dev/null
+++ b/app/components/content/ProseTable.vue
@@ -0,0 +1,15 @@
+<template>
+    <table>
+      <slot />
+    </table>
+  </template>
+
+<!-- <style scoped>
+/* 强化表头背景，仅此组件内生效 */
+table :deep(thead th) {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+.dark table :deep(thead th) {
+  background-color: rgba(255, 255, 255, 0.08);
+}
+</style> -->
\ No newline at end of file
diff --git a/app/components/content/ProseTh.vue b/app/components/content/ProseTh.vue
new file mode 100644
index 0000000..8a73388
--- /dev/null
+++ b/app/components/content/ProseTh.vue
@@ -0,0 +1,5 @@
+<template>
+    <th class=" bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 py-2">
+        <slot />
+    </th>
+</template>
\ No newline at end of file
diff --git a/app/components/content/ProseThead.vue b/app/components/content/ProseThead.vue
new file mode 100644
index 0000000..50136ee
--- /dev/null
+++ b/app/components/content/ProseThead.vue
@@ -0,0 +1,5 @@
+<template>
+    <thead>
+      <slot />
+    </thead>
+  </template>
\ No newline at end of file
diff --git a/content/docs/1.简单文档/1.index.md b/content/docs/1.简单文档/1.index.md
index d3e5cfd..270366b 100644
--- a/content/docs/1.简单文档/1.index.md
+++ b/content/docs/1.简单文档/1.index.md
@@ -5,7 +5,7 @@ navigation:
   icon: lucide-house
 ---
 
-## 缘起
+# 缘起
 
 使用过市面上的很多文档系统，但是或多或少都有一些自己不满意的功能.  
 于是自己动手，丰衣足食.  
diff --git a/content/docs/1.简单文档/3.writing/5.test.md b/content/docs/1.简单文档/3.writing/5.test.md
new file mode 100644
index 0000000..e86e34d
--- /dev/null
+++ b/content/docs/1.简单文档/3.writing/5.test.md
@@ -0,0 +1,218 @@
+---
+title: markdown 常用语法
+description: 展示 markdown 常用语法
+navigation:
+  icon: simple-icons:markdown
+---
+
+
+# 
+
+欢迎来到 Markdown 的奇妙世界！无论你是写作爱好者、开发者、博主，还是想要简单记录点什么的人，Markdown 都能成为你新的好伙伴。它不仅让写作变得简单明了，还能轻松地将内容转化为漂亮的网页格式。今天，我们将全面探讨 Markdown 的基础和进阶语法，让你在这个过程中充分享受写作的乐趣！
+
+Markdown 是一种轻量级标记语言，用于格式化纯文本。它以简单、直观的语法而著称，可以快速地生成 HTML。Markdown 是写作与代码的完美结合，既简单又强大。
+
+## Markdown 基础语法
+
+### 1. 标题：让你的内容层次分明
+
+用 `#` 号来创建标题。标题从 `#` 开始，`#` 的数量表示标题的级别。
+
+
+# 一级标题
+
+## 二级标题
+
+### 三级标题
+
+#### 四级标题
+
+##### 五级标题
+
+###### 六级标题
+
+####### 七级标题
+
+以上代码将渲染出一组层次分明的标题，使你的内容井井有条。
+
+### 2. 段落与换行：自然流畅
+
+Markdown 中的段落就是一行接一行的文本。要创建新段落，只需在两行文本之间空一行。
+
+### 3. 字体样式：强调你的文字
+
+- **粗体**：用两个星号或下划线包裹文字，如 `**粗体**` 或 `__粗体__`。
+- _斜体_：用一个星号或下划线包裹文字，如 `*斜体*` 或 `_斜体_`。
+- ~~删除线~~：用两个波浪线包裹文字，如 `~~删除线~~`。
+
+这些简单的标记可以让你的内容更有层次感和重点突出。
+
+### 4. 列表：整洁有序
+
+- **无序列表**：用 `-`、`*` 或 `+` 加空格开始一行。
+- **有序列表**：使用数字加点号（`1.`、`2.`）开始一行。
+
+在列表中嵌套其他内容？只需缩进即可实现嵌套效果。
+
+- 无序列表项 1
+  1. 嵌套有序列表项 1
+  2. 嵌套有序列表项 2
+- 无序列表项 2
+
+1. 有序列表项 1
+2. 有序列表项 2
+
+### 5. 链接与图片：丰富内容
+
+- **链接**：用方括号和圆括号创建链接 `[显示文本](链接地址)`。
+- **图片**：和链接类似，只需在前面加上 `!`，如 `![描述文本](图片链接)`。
+
+[访问 Doocs](https://github.com/doocs)
+
+![doocs](https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/gh/doocs/md/images/logo-2.png)
+
+轻松实现富媒体内容展示！
+
+> 因微信公众号平台不支持除公众号内容以外的链接，故其他平台的链接，会呈现链接样式但无法点击跳转。
+
+> 对于这些链接请注意明文书写，或点击左上角「格式->微信外链接转底部引用」开启引用，这样就可以在底部观察到链接指向。
+
+另外，使用 `<![alt](url),![alt](url)>` 语法可以创建横屏滑动幻灯片，支持微信公众号平台。建议使用相似尺寸的图片以获得最佳显示效果。
+
+### 6. 引用：引用名言或引人深思的句子
+
+使用 `>` 来创建引用，只需在文本前面加上它。多层引用？在前一层 `>` 后再加一个就行。
+
+> 这是一个引用
+>
+> > 这是一个嵌套引用
+
+这让你的引用更加富有层次感。
+
+### 7. 代码块：展示你的代码
+
+- **行内代码**：用反引号包裹，如 `code`。
+- **代码块**：用三个反引号包裹，并指定语言，如：
+
+```js
+console.log("Hello, Doocs!");
+```
+
+语法高亮让你的代码更易读。
+
+### 8. 分割线：分割内容
+
+用三个或更多的 `-`、`*` 或 `_` 来创建分割线。
+
+---
+
+为你的内容添加视觉分隔。
+
+### 9. 表格：清晰展示数据
+
+Markdown 支持简单的表格，用 `|` 和 `-` 分隔单元格和表头。
+
+| 项目人员                                    | 邮箱                   | 微信号       |
+| ------------------------------------------- | ---------------------- | ------------ |
+| [yanglbme](https://github.com/yanglbme)     | contact@yanglibin.info | YLB0109      |
+| [YangFong](https://github.com/YangFong)     | yangfong2022@gmail.com | yq2419731931 |
+| [thinkasany](https://github.com/thinkasany) | thinkasany@gmail.com   | thinkasany   |
+
+这样的表格让数据展示更为清爽！
+
+> 手动编写标记太麻烦？我们提供了便捷方式。左上方点击「编辑->插入表格」，即可快速实现表格渲染。
+
+## Markdown 进阶技巧
+
+### 1. LaTeX 公式：完美展示数学表达式
+
+Markdown 允许嵌入 LaTeX 语法展示数学公式：
+
+- **行内公式**：用 `$` 包裹公式，如 $E = mc^2$。
+- **块级公式**：用 `$$` 包裹公式，如：
+
+$$
+\begin{aligned}
+d_{i, j} &\leftarrow d_{i, j} + 1 \\
+d_{i, y + 1} &\leftarrow d_{i, y + 1} - 1 \\
+d_{x + 1, j} &\leftarrow d_{x + 1, j} - 1 \\
+d_{x + 1, y + 1} &\leftarrow d_{x + 1, y + 1} + 1
+\end{aligned}
+$$
+
+1. 列表内块公式 1
+
+  $$
+  \chi^2 = \sum \frac{(O - E)^2}{E}
+  $$
+    
+2. 列表内块公式 2
+
+  $$
+  \chi^2 = \sum \frac{(|O - E| - 0.5)^2}{E}
+  $$
+
+
+
+这是展示复杂数学表达的利器！
+
+### 2. Mermaid 流程图：可视化流程
+
+Mermaid 是强大的可视化工具，可以在 Markdown 中创建流程图、时序图等。
+
+```mermaid
+graph TD
+  A[Local Coolify 实例] --> B[生产服务器]
+  A --> D[编译服务器]
+  B --> B1[生产环境]
+  D --> B
+```
+
+```mermaid
+graph TD;
+  A-->B;
+  A-->C;
+  B-->D;
+  C-->D;
+```
+
+```mermaid
+pie
+  title Key elements in Product X
+  "Calcium" : 42.96
+  "Potassium" : 50.05
+  "Magnesium" : 10.01
+  "Iron" : 5
+```
+
+```mermaid
+pie
+  title 为什么总是宅在家里？
+  "喜欢宅" : 45
+  "天气太热" : 70
+  "穷" : 500
+  "没人约" : 95
+```
+
+这种方式不仅能直观展示流程，还能提升文档的专业性。
+
+> 更多用法，参见：[Mermaid User Guide](https://mermaid.js.org/intro/getting-started.html)。
+
+## 结语
+
+Markdown 是一种简单、强大且易于掌握的标记语言，通过学习基础和进阶语法，你可以快速创作内容并有效传达信息。无论是技术文档、个人博客还是项目说明，Markdown 都是你的得力助手。希望这篇内容能够带你全面了解 Markdown 的潜力，让你的写作更加丰富多彩！
+
+现在，拿起 Markdown 编辑器，开始创作吧！探索 Markdown 的世界，你会发现它远比想象中更精彩！
+
+#### 推荐阅读
+
+- [阿里又一个 20k+ stars 开源项目诞生，恭喜 fastjson！](https://mp.weixin.qq.com/s/RNKDCK2KoyeuMeEs6GUrow)
+- [刷掉 90% 候选人的互联网大厂海量数据面试题（附题解 + 方法总结）](https://mp.weixin.qq.com/s/rjGqxUvrEqJNlo09GrT1Dw)
+- [好用！期待已久的文本块功能究竟如何在 Java 13 中发挥作用？](https://mp.weixin.qq.com/s/kalGv5T8AZGxTnLHr2wDsA)
+- [2019 GitHub 开源贡献排行榜新鲜出炉！微软谷歌领头，阿里跻身前 12！](https://mp.weixin.qq.com/s/_q812aGD1b9QvZ2WFI0Qgw)
+
+---
+
+<center>
+    <img src="https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/gh/doocs/md/images/1648303220922-7e14aefa-816e-44c1-8604-ade709ca1c69.png" style="width: 100px;">
+</center>