css美化pre
文章描述：
css美化pre代码显示
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class="container">
<pre style="position: relative;" class=" language-php" tabindex="0">
<code class="language-php hljs">
</code>
</pre>
</div>
</body>
</html>css
设置pre背景色
@charset "utf-8";
/* CSS Document */
*{ margin: 0; padding: 0; }
body,html{ margin: 0; padding: 0; font-size: 14px; font-weight: 400; line-height: 1.8; color: rgba(0,0,0,.65); background-color: #f9f9f9; font-family: -apple-system,BlinkMacSystemFont,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif; font-feature-settings: "tnum"; font-variant: tabular-nums; }
*:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
pre[class*='language-'] {
position: relative;
margin: 0 0 18px;
padding: 30px 0 0;
font-size: 14px;
border-radius: 4px;
overflow: hidden;
}
pre[class*='language-']::before {
content: '';
position: absolute;
top: 9px;
left: 15px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #fc625d;
box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
z-index: 1;
}
pre[class*='language-'] code[class*='language-'] {
display: block;
overflow: auto;
padding: 0 15px 12px;
}
.container{ max-width:1200px; margin:0 auto; }
:not(pre) > code[class*="language-"], pre[class*="language-"] {
background: #e9e3e0;
}
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted {
color: #690;
}
发布时间：2022/10/31
发表评论