/* prism-highlight.css */

/* ==== 1. 对应“星号(*)”的高亮：黄色背景 + 左侧橙黄色色条 ==== */
.hl-star {
  /* 让宽度至少铺满可视区域，但如果内容更长就跟随内容宽度滚动 */
  display: inline-block;
  white-space: pre;          /* 保留所有空格、缩进 */
  min-width: 100%;           /* 至少铺满父容器可视宽度 */
  box-sizing: border-box;    /* padding/border 算进宽度 */

  background-color: rgba(255, 249, 196, 0.5); /* 浅黄色半透明背景 */
  border-left: 3px solid #FBC02D; /* 橙黄色色条 */
  padding-left: 8px;          /* 让代码内容和色条之间留出空隙 */
  margin-left: -11px;         /* 抹平这 8px 的左移 */
}

/* ==== 2. 对应“美元符号($)”的高亮：紫色背景 + 左侧深紫色色条 ==== */
.hl-dollar {
  display: inline-block;
  white-space: pre;
  min-width: 100%;
  box-sizing: border-box;

  background-color: rgba(225, 190, 231, 0.5); /* 淡紫色半透明 */
  border-left: 3px solid #8E24AA; /* 深紫色色条 */
  padding-left: 8px;
  margin-left: -11px;
}

/* ==== 3. 对应“脱字符(^)”的高亮：浅蓝色背景 + 左侧蓝色色条 ==== */
.hl-caret {
  display: inline-block;
  white-space: pre;
  min-width: 100%;
  box-sizing: border-box;

  background-color: rgba(187, 222, 251, 0.5); /* 浅蓝色半透明 */
  border-left: 3px solid #1976D2; /* 深蓝色色条 */
  padding-left: 8px;
  margin-left: -11px;
}