@docs-site/site-docsify/docs/.docsify/styles/docsify-code-line-numbers.css

docsify site

/**
 * @file docsify-code-line-numbers.css
 * @brief 代码行号样式文件
 * @details 定义代码块行号显示样式和高亮效果
 */

/**
 * @brief 根变量定义
 * @details 定义代码块相关的CSS变量
 */
:root {
    --code-block-padding: 0.5em 1em 0.5em 1em !important; /* 代码块内边距 */
    --code-line-number-color: rgb(89, 22, 99);           /* 行号文字颜色 */
    --code-boundary-color: #8d0b4c;                      /* 行号边界线颜色 */
    --code-highlight-muted-color: #0b87da;               /* 高亮指示条颜色 */
    --code-highlight-background: #dae5eb;                /* 高亮行背景色 */
}

/**
 * @brief 表格行样式覆盖
 */
.markdown-section tr {
    border-top: none !important;  /* 移除表格行顶部边框 */
}

/**
 * @brief 代码单元格基础样式
 */
.td-code {
    padding-top: 0 !important;    /* 无顶部内边距 */
    padding-bottom: 0 !important; /* 无底部内边距 */
    border-style: none !important; /* 无边框 */
    background-color: var(--code-theme-background); /* 使用主题背景色 */
}

/**
 * @brief 行号单元格样式
 */
.td-code-line-number {
    position: relative;           /* 相对定位 */
    user-select: none;            /* 禁止文本选择 */
    padding-right: 0.5em !important; /* 右侧内边距 */
    padding-left: 1em !important; /* 左侧内边距 */
    border-right: 1px solid var(--code-boundary-color) !important; /* 右侧边界线 */
    color: var(--code-line-number-color); /* 行号颜色 */
    width: 1%;                   /* 最小宽度 */
    text-align: right;           /* 文本右对齐 */
}

/**
 * @brief 代码内容单元格样式
 */
.td-code-line-content {
    padding-right: 1em !important; /* 右侧内边距 */
    padding-left: 1em !important;  /* 左侧内边距 */
    width: 100%;                  /* 占满剩余宽度 */
}

/**
 * @brief 行号基础样式
 */
.code-line-number {
    background-color: var(--code-theme-background); /* 使用主题背景色 */
}

/**
 * @brief 高亮行样式
 */
.code-line-highlight {
    background-color: var(--code-highlight-background); /* 高亮背景色 */
    box-shadow: inset 0.3em 0 0 var(--code-highlight-muted-color); /* 左侧高亮指示条 */
}

/**
 * @brief 代码表格样式
 */
.code-table {
    display: table !important;    /* 表格布局 */
    margin: 0 !important;         /* 无外边距 */
    border-collapse: collapse !important; /* 边框合并 */
    border-spacing: 0;            /* 单元格间距为0 */
    width: 100%;                  /* 100%宽度 */
}

/**
 * @brief 代码块容器样式
 */
.pre-code-block{
    padding: 0 !important;        /* 无内边距 */
    border-radius: 6px;           /* 6px圆角 */
}

/**
 * @brief 代码块样式
 */
.code-block{
    padding: 0 !important;        /* 无内边距 */
}

/**
 * @brief 滚动条样式
 * @details 定义代码块的滚动条外观
 */
.code-block::-webkit-scrollbar {
    width: 5px !important;        /* 垂直滚动条宽度 */
    height: 8px !important;       /* 水平滚动条高度 */
}

/**
 * @brief 滚动条滑块样式
 */
.code-block::-webkit-scrollbar-thumb {
    border-radius: 3px !important; /* 3px圆角 */
}

/**
 * @brief 滚动条滑块悬停状态
 */
.code-block::-webkit-scrollbar-thumb:hover {
    background: #8f8f8fbe !important; /* 半透明背景色 */
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important; /* 内阴影效果 */
}