/**
 * 代码块样式 - 菜鸟教程风格
 */

/* 代码块容器 */
pre {
    position: relative;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 15px;
    margin: 20px 0;
    overflow-x: auto;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    font-size: 14px;
    line-height: 1.5;
}

/* 代码块标题栏 */
.code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f1f1f1;
    border: 1px solid #e9ecef;
    border-bottom: none;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    padding: 8px 15px;
    margin-top: 20px;
    font-size: 14px;
}

/* 代码块标题 */
.code-title {
    font-weight: bold;
    color: #555;
}

/* 复制按钮 */
.copy-button {
    background-color: #96b97d;
    color: white;
    border: none;
    border-radius: 3px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.copy-button:hover {
    background-color: #7a9c62;
}

.copy-button.success {
    background-color: #28a745;
}

/* 调整代码块与标题栏的间距 */
.code-header + pre {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* 代码高亮 */
pre code {
    color: #333;
    background: transparent;
    padding: 0;
    border-radius: 0;
    font-family: inherit;
}

/* 行号 */
pre .line-numbers {
    counter-reset: line;
    padding-left: 3em;
    position: relative;
}

pre .line-numbers > span {
    counter-increment: line;
    position: relative;
}

pre .line-numbers > span::before {
    content: counter(line);
    position: absolute;
    left: -3em;
    width: 2.5em;
    text-align: right;
    color: #999;
    border-right: 1px solid #ddd;
    padding-right: 0.5em;
    margin-right: 0.5em;
}

/* 语言标签 */
pre[class*="language-"]::before {
    content: attr(data-language);
    position: absolute;
    top: -24px;
    right: 15px;
    font-size: 12px;
    color: #555;
    background-color: #f1f1f1;
    padding: 2px 8px;
    border-radius: 3px;
    border: 1px solid #e9ecef;
}

/* 特定语言的颜色 */
.language-html::before {
    color: #e34c26 !important;
}

.language-css::before {
    color: #264de4 !important;
}

.language-javascript::before, .language-js::before {
    color: #f7df1e !important;
}

.language-php::before {
    color: #777bb3 !important;
}

.language-python::before {
    color: #3572A5 !important;
}

/* 代码高亮颜色 */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color: #708090;
}

.token.punctuation {
    color: #999;
}

.token.namespace {
    opacity: 0.7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol {
    color: #905;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin {
    color: #690;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
    color: #9a6e3a;
}

.token.atrule,
.token.attr-value,
.token.keyword {
    color: #07a;
}

.token.function,
.token.class-name {
    color: #dd4a68;
}

.token.regex,
.token.important,
.token.variable {
    color: #e90;
}

.token.important,
.token.bold {
    font-weight: bold;
}

.token.italic {
    font-style: italic;
}

.token.entity {
    cursor: help;
}