为代码块添加 Mac OS X 窗口样式

为代码块添加 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" <!-- 矩形的描边宽度 -->
/>