如何让代码块独树一帜：轻松设置个性化CSS样式

在撰写技术文档、博客或者任何需要展示代码的环境中，代码块是不可或缺的元素。为了让代码块更加吸引人，提高阅读体验，我们可以通过CSS样式来个性化定制代码块。以下是一些实用的方法，帮助你轻松设置个性化的代码块样式。
1. 基础样式
首先，我们需要为代码块设置一些基本样式，包括字体、颜色、边框等。
/* 基础代码块样式 */
pre {
background-color: #f5f5f5;
border: 1px solid #ddd;
padding: 10px;
overflow: auto;
}

code {
font-family: monospace;
color: #333;
background-color: transparent;
}
这段CSS代码定义了代码块和代码元素的背景色、边框、内边距以及字体样式。你可以根据自己的喜好调整颜色和字体。
2. 高亮显示
为了提高代码的可读性，我们可以使用语法高亮。许多CSS预处理器和编辑器都支持语法高亮功能，但如果你需要手动实现，可以使用以下方法。
/* 语法高亮样式 */
pre {
background-color: #f5f5f5;
border: 1px solid #ddd;
padding: 10px;
overflow: auto;
}

.token.comment {
color: #8e908c;
}

.token.property {
color: #c08;
}

.token.keyword {
color: #a0a05f;
}

.token.string {
color: #e36209;
}

.token.number {
color: #2f9de5;
}

.token.function {
color: #066;
}
在这个例子中，我们为不同的代码元素设置了不同的颜色，以便于区分。
3. 代码折叠
有时候，一个代码块可能非常长，我们可以通过折叠来提高阅读体验。
/* 代码折叠样式 */
.collapse-btn {
cursor: pointer;
padding: 5px;
background-color: #f5f5f5;
border: none;
outline: none;
}

.collapse-content {
display: none;
}
这段CSS代码定义了折叠按钮和折叠内容的样式。你可以根据需要调整样式。
4. 代码示例
以下是一个完整的代码示例，包括基础样式、语法高亮和代码折叠。

        折叠
        

            
                // 示例代码
                function helloWorld() {
                    console.log("Hello, World!");
                }
            
        
    

在这个示例中，我们创建了一个带有折叠功能的代码块，你可以根据自己的需求进行调整。