为代码块添加 Mac OS X 窗口样式
为代码块添加 Mac OS X 窗口样式,在代码块 pre 之前添加图片,在代码块 pre 之后添加文本。
pre {
padding: 30px 2px 2px 2px;
line-height: 1;
overflow: auto;
word-wrap: normal;
border-radius: 5px;
}
pre>code {
margin: 0;
padding: 1em 1.5em;
line-height: 1.5;
color: #333;
font-size: 0.8rem;
max-width: inherit;
overflow: inherit;
white-space: inherit;
border-radius: 0 0 4px 4px;
}
pre:before {
content: " ";
display: block;
width: 50px;
height: 10px;
background-image: url("/src/themes/rog.svg");
background-position: left top;
background-repeat: no-repeat;
position: absolute;
top: 10px;
left: 10px;
}
pre:after {
content: attr(data-lang); //data-lang 属性的值。
//Rendererjs 会自动为 pre 添加 data-lang 属性。
height: 10px;
line-height: 1;
text-align: right;
color: #cecece;
font-size: 10px;
font-weight: 500;
position: absolute;
right: 10px;
top: 10px;
}
红橙绿小圆点 rog.svg 图片。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="0" y="0" width="10" height="10" fill="red" rx="5" ry="5" />
<rect x="20" y="0" width="10" height="10" fill="orange" rx="5" ry="5" />
<rect x="40" y="0" width="10" height="10" fill="green" rx="5" ry="5" />
</svg>
<rect
x="x-coordinate" <!-- 矩形左上角的 x 坐标 -->
y="y-coordinate" <!-- 矩形左上角的 y 坐标 -->
width="width-value" <!-- 矩形的宽度 -->
height="height-value" <!-- 矩形的高度 -->
rx="rx-value" <!-- 矩形的圆角半径(水平方向) -->
ry="ry-value" <!-- 矩形的圆角半径(垂直方向) -->
fill="fill-color" <!-- 矩形的填充颜色 -->
stroke="stroke-color" <!-- 矩形的描边颜色 -->
stroke-width="width-value" <!-- 矩形的描边宽度 -->
/>
标签:pre,样式,value,height,width,Mac,添加,10px,OS
From: https://www.cnblogs.com/asdy/p/18393345