通过html实现mac代码块

title: 通过html实现mac代码块
author: astar
tags:
- mac
- 代码块
categories:
- 技术分享
description: 用html实现mac代码块
comments: true
swiper_index: 2
date: 2024-02-21 11:18:00

<html>
<style>
    .mac {
        width:10px;
        height:10px;
        border-radius:5px;
        float:left;
        margin:10px 0 0 5px;
    }
    .b1 {
        background:#E0443E;
        margin-left: 10px;
    }
    .b2 { background:#DEA123; }
    .b3 { background:#1AAB29; }
    .warpper{
        background:#121212;
        border-radius:5px;
        width:400px;
    }
</style>
<div class="warpper">
    <div class="mac b1"></div>
    <div class="mac b2"></div>
    <div class="mac b3"></div>
<div>
<br>
</html>

```shell
#include<iostream>
using namespace std;
int main(){
    return 0;
}
/```
主最后一行"/```"前面的“/”要删掉，我加入/是因为我用的markdown编辑器

另一种方式，用基础的代码为 css 样式，添加到 markdown 标头位置。

<style>
  .i1 {
    background: #121212;
    border-radius: 5px;
    width: 700px;
  }
  .mac {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    float: left;
    margin: 10px 0 0 5px;
  }
  .b1 {
    background: #e0443e;
    margin-left: 10px;
  }
  .b2 {
    background: #dea123;
  }
  .b3 {
    background: #1aab29;
  }
</style>

效果如下↓


#include<iostream>
using namespace std;
int main(){
    return 0;
}