Summary

Sample content generated by AI

Content

1. Heading Level Test

Test Heading 2

Test Heading 3

Test Heading 4

Test Heading 5
Test Heading 6 (not recommended for body text)

Recommendation: h6 should not be smaller than the body text size; mainly used for semantics rather than visuals.

Tip: You can adjust font sizes and spacing with CSS for a more attractive Markdown display on web pages.

2. Text Style Test

markdown 
1

**你好，世界！**啊哈

**你好，世界！**啊哈

markdown 
1

**你好，世界！** 啊哈

你好，世界！ 啊哈

Bold Text Example
Italic Text Example
Bold + Italic Text Example

Strikethrough Text Example

Inline Code Example

"Double Quotes in English"
'Single Quotes in English'
“Double Quotes in Chinese”
‘Single Quotes in Chinese’

3. List Test

Unordered List

  • Test Unordered 1
  • Test Unordered 2
  • Test Unordered 3

Nested Unordered List

  • Unordered 1
    • Unordered 1.1
      • Unordered 1.1.1
    • Unordered 1.2
  • Unordered 2

Ordered List

  1. Test Ordered 1
  2. Test Ordered 2
  3. Test Ordered 3

Nested Ordered List

  1. Ordered 1
    1. Ordered 1.1
      1. Ordered 1.1.1
    2. Ordered 1.2
  2. Ordered 2

Mixed List Test

  • Unordered 1
    1. Ordered 1.1
      • Unordered 1.1.1
    2. Ordered 1.2
  • Unordered 2

Tip: Lists can be combined with Markdown emojis or HTML tags for better presentation.

4. Links and Images

Test Link

Images can set size: <img src="index/image.png" alt="Example" width="300"/>

5. Code Block Test

CSS Example

css 
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142

/* 用于存储运行时变量 */

/* 浅色主题变量 */
:root {
  --color-shimmer: 0, 0, 0;
  --color-shimmer-alpha: .1;
  --color-input: #757575;
  --color-code-block-header: #f2e9dc;

  /* starry 透明度 */
  --starry-opacity: 0;

  /* 按钮颜色 */
  --color-btn-bg: #f5f5f5;

  /* 进度条 */
  --progress-bg: #e0e0e0;                            /* 进度条底色 */
  --progress-bar-color: #2563eb;                     /* 进度条颜色 */
  --progress-stripe-color: rgba(255, 255, 255, 0.8); /* 冲击条颜色 */


  /* 基础背景与文本颜色 */
  --color-bg: #ffffff;                     /* 主背景色，用于页面整体背景 */
  --color-text: #1a1a1a;                   /* 主文本色，用于正文内容 */
  --color-text-secondary: #4a5568;         /* 次要文本色，用于辅助说明文字 */

  /* 边框与分割线 */
  --color-border: #e9e9e9;                 /* 通用边框色，用于分隔线、卡片边框等 */
  --color-hr: #cbd5e0;                     /* 水平分割线颜色 */
  --color-img-border: #e5e7eb;             /* 图片边框颜色 */
  --color-table-border: #cbd5e0;           /* 表格边框颜色 */

  /* 主要交互颜色 */
  --color-primary: #2563eb;                /* 主要颜色，用于链接、按钮等交互元素 */
  --color-primary-hover: #1d4ed8;          /* 主要悬停色，鼠标悬停时使用 */
  --color-link-underline: #93c5fd;         /* 链接下划线颜色 */
  --color-shadow: rgba(0, 0, 0, 0.1);      /* 阴影色 */

  /* 辅助/状态颜色 */
  --color-secondary: #64748b;              /* 次要颜色，用于非主要元素 */
  --color-success: #d4edda;                /* 成功状态色，用于成功提示、完成状态 */
  --color-warning: #fff3cd;                /* 警告状态色，用于警告提示 */
  --color-danger: #f8d7da;                 /* 危险/错误色，用于错误提示、删除操作 */

  /* 代码相关 */
  --color-code-bg: #faf4ed;                /* 代码块背景色 */
  --color-code-text: #808080;              /* 代码块文本色 */

  /* 引用块 */
  --color-blockquote-border: #4299e1;      /* 引用块左侧边框色 */
  --color-blockquote-bg: #ebf8ff;          /* 引用块背景色 */

  /* 表格 */
  --color-table-header-bg: #e2e8f0;        /* 表格表头背景色 */

  /* 标记/高亮 */
  --color-mark-bg: #fef3c7;                /* 标记/高亮背景色 */
  --color-mark-text: #92400e;              /* 标记/高亮文本色 */

  /* 标题层级颜色梯度 */
  --color-heading-1: #1e293b;              /* h1标题颜色 - 最重 */
  --color-heading-2: #334155;              /* h2标题颜色 */
  --color-heading-3: #475569;              /* h3标题颜色 */
  --color-heading-4: #64748b;              /* h4标题颜色 */
  --color-heading-5: #94a3b8;              /* h5标题颜色 */
  --color-heading-6: #cbd5e1;              /* h6标题颜色 - 最轻 */

  /* 滚动条颜色 */
  --color-scrollbar-track: #f1f5f9;        /* 滚动条轨道背景色 */
  --color-scrollbar-thumb: #cbd5e0;        /* 滚动条滑块颜色 */
  --color-scrollbar-thumb-hover: #94a3b8;  /* 滚动条滑块悬停颜色 */
}

/* 深色主题变量 */
:root[starry-theme-mode="dark"] {
  --color-shimmer: 255, 255, 255;
  --color-shimmer-alpha: .1;
  --color-input: #757575;
  --color-code-block-header: #1f1d30;

  /* starry 透明度 */
  --starry-opacity: 1;

  /* 按钮颜色 */
  --color-btn-bg: #1e2139;

  /* 进度条 */
  --progress-bg: rgba(255, 255, 255, 0.15);          /* 进度条底色 */
  --progress-bar-color: #60a5fa;                     /* 进度条颜色  */
  --progress-stripe-color: rgba(255, 255, 255, 1);   /* 冲击条颜色  */

  /* 基础背景与文本颜色 */
  --color-bg: #13172f;                     /* 深色主背景色，避免纯黑减轻视觉疲劳 */
  --color-text: #e2e8f0;                   /* 深色主题主文本色，避免纯白减轻眩光 */
  --color-text-secondary: #a0aec0;         /* 深色次要文本色，用于辅助内容 */

  /* 边框与分割线 */
  --color-border: #232636;                 /* 深色边框色，与背景形成适当对比 */
  --color-hr: #4a5568;                     /* 深色水平分割线，比边框色稍亮 */
  --color-img-border: #4a5568;             /* 深色图片边框颜色 */
  --color-table-border: #4a5568;           /* 深色表格边框颜色 */

  /* 主要交互颜色 */
  --color-primary: #60a5fa;                /* 深色主题主色，比浅色主题更亮以确保可见性 */
  --color-primary-hover: #93c5fd;          /* 深色主题悬停色，比主色更亮 */
  --color-link-underline: #3b82f6;         /* 深色链接下划线颜色 */
  --color-shadow: rgba(0, 0, 0, 0.3);      /* 阴影色 */

  /* 辅助/状态颜色 */
  --color-secondary: #a0aec0;              /* 深色次要颜色 */
  --color-success: #2e5d32;                /* 深色成功状态色，使用更亮的绿色 */
  --color-warning: #8a6d3b;                /* 深色警告状态色，使用更亮的黄色 */
  --color-danger: #78242e;                 /* 深色危险/错误色，使用更亮的红色 */

  /* 代码相关 */
  --color-code-bg: #232136;                /* 深色代码块背景色，接近但不等于背景色 */
  --color-code-text: #c6c6c6;              /* 深色代码块文本色 */

  /* 引用块 */
  --color-blockquote-border: #63b3ed;      /* 深色引用块左侧边框色 */
  --color-blockquote-bg: #2d3748;          /* 深色引用块背景色 */

  /* 表格 */
  --color-table-header-bg: #2d3748;        /* 深色表格表头背景色 */

  /* 标记/高亮 */
  --color-mark-bg: #92400e;                /* 深色标记背景色，与浅色主题反色 */
  --color-mark-text: #fef3c7;              /* 深色标记文本色，与浅色主题反色 */

  /* 标题层级颜色梯度（反向梯度） */
  --color-heading-1: #f7fafc;              /* h1标题颜色 - 最亮 */
  --color-heading-2: #e2e8f0;              /* h2标题颜色 */
  --color-heading-3: #cbd5e0;              /* h3标题颜色 */
  --color-heading-4: #a0aec0;              /* h4标题颜色 */
  --color-heading-5: #718096;              /* h5标题颜色 */
  --color-heading-6: #4a5568;              /* h6标题颜色 - 最暗 */

  /* 滚动条颜色 */
  --color-scrollbar-track: #1a202c;        /* 深色滚动条轨道背景色 */
  --color-scrollbar-thumb: #4a5568;        /* 深色滚动条滑块颜色 */
  --color-scrollbar-thumb-hover: #718096;  /* 深色滚动条滑块悬停颜色 */
}

Java Example

java 
1
2
3
4
5
6

// Person example class
public class Person {
    private String name;
    public String getName() { return name; }
    public void setName(String name) { this.name = name; }
}

Shell Example

bash 
1
2

curl -v https://google.com
curl -v https://meethigher.top

Plain Text Example

text 
1
2

curl -v https://google.com
curl -v https://meethigher.top

Long Code Block Example

text 
1

curl -v https://meethigher.to/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

Tip: For long lines of code, use horizontal scrolling or wrap with <pre> to prevent Markdown auto-wrap from breaking formatting.

6. Table Test

Regular Table

Test TableTest TableTest Table
Test TableTest TableTest Table
Test TableTest TableTest Table
Test TableTest TableTest Table

Long Table

Test TableTest TableTest Table
Test TableTest TableTest Table
Test TableTest TableTest Table
Test TableTest TableTest Table aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

Tip: For long tables on web, add overflow-x: auto; to allow horizontal scrolling.

7. Dynamic Content (not recommended directly in Markdown)

99 years 99 days 99 hours 99 minutes 99 seconds

Recommendation:

  • Put dynamic content in shortcode / JS file
  • Avoid placing directly in Markdown body

8. Additional Examples

Emoji and Symbols

  • 🚀 Start Project
  • 🔥 Trending Topic
  • ✅ Completed

External Resource Embed

YouTube Video Example

Footnote Example

This is the main text1.

9. Test

10. Test

11. Test

12. Test

13. Test

14. Test

15. Test

16. Test

17. Test

18. Test

19. Test

20. Test

21. Test

22. Test

23. Test

  1. This is the footnote explanation. ↩︎