.code-block {
  position: relative;
  overflow-x: auto;
  border-radius: 0.375rem;
  margin: 1rem 0;
  background-color: #f8f9fa;
}

.dark .code-block {
  background-color: #1e1e1e;
}

/* 為代碼區塊添加語言標籤 */
pre[data-language]::before {
  content: attr(data-language);
  position: absolute;
  top: 0;
  right: 0;
  background: #4a5568;
  color: white;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  border-radius: 0 0.375rem 0 0.375rem;
  text-transform: uppercase;
}

/* HTML 程式碼區塊特殊樣式 */
pre[data-code-type="html"] code,
pre[data-code-type="xml"] code {
  color: #333;
}

.dark pre[data-code-type="html"] code,
.dark pre[data-code-type="xml"] code {
  color: #d4d4d4;
}

/* HTML 標籤樣式 */
pre[data-code-type="html"] code .hljs-tag,
pre[data-code-type="xml"] code .hljs-tag {
  color: #2563eb !important;
}

.dark pre[data-code-type="html"] code .hljs-tag,
.dark pre[data-code-type="xml"] code .hljs-tag {
  color: #93c5fd !important;
}

/* HTML 標籤名稱樣式 */
pre[data-code-type="html"] code .hljs-name,
pre[data-code-type="xml"] code .hljs-name {
  color: #2563eb !important;
  font-weight: bold;
}

.dark pre[data-code-type="html"] code .hljs-name,
.dark pre[data-code-type="xml"] code .hljs-name {
  color: #93c5fd !important;
  font-weight: bold;
}

/* HTML 屬性樣式 */
pre[data-code-type="html"] code .hljs-attr,
pre[data-code-type="xml"] code .hljs-attr {
  color: #c2410c !important;
}

.dark pre[data-code-type="html"] code .hljs-attr,
.dark pre[data-code-type="xml"] code .hljs-attr {
  color: #fb923c !important;
}

/* HTML 屬性值樣式 */
pre[data-code-type="html"] code .hljs-string,
pre[data-code-type="xml"] code .hljs-string {
  color: #15803d !important;
}

.dark pre[data-code-type="html"] code .hljs-string,
.dark pre[data-code-type="xml"] code .hljs-string {
  color: #4ade80 !important;
}