为Jekyll博客实现Greentext样式的CSS方案问询

针对你需要的Greentext效果——绿色文本、每行视觉带>前缀、换行自然，同时解决原有方案拆段落繁琐、屏幕阅读器误读>的问题，这里提供两种实用的CSS方案：

方案一：纯CSS背景符号（无需外部资源） #

这个方案用内联SVG生成>符号作为背景，纯视觉呈现，完全不影响内容语义和无障碍体验：

.greentext {
  color: #008000; /* 自定义绿色，可根据需求调整 */
  white-space: pre-wrap; /* 保留换行，过长内容自动换行 */
  padding-inline-start: 1.5ch; /* 给左侧符号留出空间 */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1ch' height='1.2em'%3E%3Ctext x='0' y='1em' font-size='1em' fill='%23008000'%3E%3E%3C/text%3E%3C/svg%3E") repeat-y left top;
  background-size: 1ch 1.2em; /* 匹配符号尺寸 */
  line-height: 1.2em; /* 统一行高，保证符号和文本对齐 */
}

方案优势 #

• 不用把每行拆成单独段落，直接用带<br>的<p>或Markdown换行的内容就能生效
• 背景符号不会被屏幕阅读器识别，只会读取实际文本，避免“大于号”的误读
• 完全依赖CSS，不需要额外图片或插件

方案二：border-image实现（自定义样式更灵活） #

如果你想尝试border-image，先制作一个包含>符号的小图像（比如10px宽、20px高的PNG，符号垂直居中），然后用以下代码：

.greentext {
  color: #008000;
  white-space: pre-wrap;
  border-inline-start: 1ch solid transparent; /* 左侧边框宽度匹配符号宽度 */
  border-image: url('greentext-prefix.png') 0 0 0 100% stretch; /* 仅左侧边框使用图像 */
  padding-inline-start: 0.5ch; /* 文本和符号的间距 */
  line-height: 1.2em;
}

方案说明 #

• border-image参数0 0 0 100%指定仅左侧边框加载图像，其他边不显示
• stretch让图像垂直拉伸适配文本行高，保证每行都有前缀
• 同样属于纯视觉样式，不影响无障碍阅读

Jekyll中的写法适配 #

如果你的Jekyll支持自定义Markdown语法（比如示例中的(:.greentext}），确保它能转换为<p class="greentext">包裹的内容即可。如果没有自定义插件，直接用以下两种写法：

• Markdown写法：

<span class="greentext">
implying implications
shiggidy diggidy
t. frogposter
unbased and cringepilled
</span>

• HTML写法：

<p class="greentext">implying implications<br>
shiggidy diggidy<br>
t. frogposter<br>
unbased and cringepilled</p>

内容的提问来源于stack exchange，提问作者user990666