首页 > 其他分享 >为代码块添加 Mac OS X 窗口样式

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

时间:2024-09-02 19:37:33浏览次数:9  
标签:pre 样式 value height width Mac 添加 10px OS

为代码块添加 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

相关文章

  • wpf 外部样式实现方式
    最近开发一个产品,打算把每个功能模块单独写一个DLL,来实现复用。那么问题来了,每个DLL样式都是类似的,每个DLL里面都搞样式,不利于后期的调整。所以呢把样式单独的放到一个DLL中。实现大致如下:1、新建自定义控件库 StyleLibrary放样式Styles.xaml<ResourceDictionaryxmlns="ht......
  • DOS相关知识
    DOS知识相对路径与绝对路径相对路径:从当前目录开始定位,形成的路径绝对路径:从顶级目录d开始定位,形成的路径DOS命令行(注:本贴为笔者学习记录所用)DOS是磁盘操作系统,将我们在控制器输入的指令接收解析并执行相对路径与绝对路径​因为\反斜杠有转义功能,windows文件路......
  • [全网独家原创]FVIM-XGBoost多输出回归 基于四向量优化算法优化XGBoost多输出回归多输
    [全网独家原创]FVIM-XGBoost多输出回归基于四向量优化算法优化XGBoost多输出回归Matlab代码(多输入多输出)每个输出都有以下线性拟合图等四张图!!!具体看图,独家图像!!!程序已经调试好,替换数据集根据输出个数修改outdim值即可运行!!!数据格式为excel!(如下)需要其他算法的都可以定制......
  • 高维前缀和 (SOSDP)
    算法介绍——高维前缀和引入我们都知道二维前缀和有这么一个容斥的写法:for(inti=1;i<=n;i++){for(intj=1;j<=m;j++){s[i][j]=s[i-1][j]+s[i][j-1]-s[i-1][j-1]+a[i][j];}}那换成三维前缀和,就有如下容斥代码:\[s[i][j][k]=a[i][j][k]+s[i-1][j][k]+s[......
  • ros openvslam
     CMakeLists.txtcmake_minimum_required(VERSION3.1)project(openvslamLANGUAGESCXXC)set(CMAKE_CXX_STANDARD11)set(CMAKE_CXX_STANDARD_REQUIREDON)if(POLICYCMP0042)cmake_policy(SETCMP0042NEW)endif()if(POLICYCMP0074)cmake_policy(SET......
  • Spring扩展点系列-InstantiationAwareBeanPostProcessor
    文章目录简介测试一1、配置文件Bean注册2、单元测试方法3、测试类4、输出结果结论测试二1、测试类2、输出结果结论源码解析postProcessPropertiesCommonAnnotationBeanPostProcessorAnnotationInjectedBeanPostProcessor总结简介spring容器中Bean的生命周期内所......
  • Centos7 离线安装字体库
    一、获取依赖包1、准备另一台能联网的Linux机器(要配置yum,建议配阿里的,网上很多教程,很简单!)2、安装获取依赖包的命令,然后新建一个文件来存放依赖包#安装获取依赖包的命令yum-yinstallyum-utils#新建一个文件来存放依赖包mkdir-p/root/font_rpm#执行获取相关依赖命令yumdo......
  • WPF communicate across different modules via event
    //Runtimeproject,cclasslibraryusingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Linq.Expressions;usingSystem.Text;usingSystem.Threading.Tasks;usingSystem.Windows.Input;namespaceRuntime{publicclassDelCmd:......
  • CentOS 8 安装 jenkins、gitlab-ce、SonarQube教程
    一、在CentOS8上安装jenkins在一台CentOS8(IP:10.0.0.81RAM:2GB)上安装jenkins-2.452.41、配置Java环境从Jenkins-2.357版本开始JDK最低要求java11,而jenkins-2.346.1是最后一个支持java1.8的版本。点击查看代码1.先查看系统是否自带了jdk,若有输出信息,批量卸载......
  • 《黑神话:悟空》硬件兼容性问题全攻略:从BIOS更新到驱动安装的详细修复指南
    《黑神话:悟空》作为一款备受期待的国产3A大作,自发布以来,确实遇到了一些玩家的电脑硬件兼容性问题。今天小编搜罗了网上反馈一些经常出现的BUG,来教大家如何进行修复操作!更新主板BIOS:对于13/14代酷睿处理器用户,首先尝试更新主板BIOS至最新版本,确保微代码版本为0x129。如果更新......