请问 macOS 风格的代码块是怎么实现的？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 2256 天前的主题，其中的信息可能已经有所发展或是发生改变。

像 GraalVM 官网这种。我一开始以为是图片，结果代码可以复制。审查元素也没看出什么引入了什么特别的 js/css

代码

graalvm

macOS

CSS

16 条回复 • 2022-02-25 15:26:29 +08:00

suzic

2018-09-24 10:42:50 +08:00 via Android

不是 CSS 控制的样式么？

Dvel

2018-09-24 10:52:38 +08:00

不会前端，不过我知道一个能生成这种图片的网站： http://codezen.rishimohan.me/

ferrum

2018-09-24 10:53:55 +08:00

https://highlightjs.org/

luob

2018-09-24 10:57:21 +08:00

三个按钮和背景的图写在 pre::before 和 pre::after 里面

jjplay

2018-09-24 11:01:48 +08:00

https://www.graalvm.org/resources/lib/highlight/highlight.pack.js

兄弟你自己仔细看<pre><code>里的标签，走点心好吗

mrsatangel

2018-09-24 11:14:22 +08:00

@jjplay #5 老哥，highlightjs 我知道，我说的是 code block 的 macOS 风格的标题栏按钮和圆角的样式啊

donething

2018-09-24 11:43:31 +08:00

@mrsatangel 就画 3 个圈，填充颜色。这没学过 css 也没难度啊。

klesh

2018-09-24 11:48:10 +08:00

圆角用 border-radius。你看下 pre 和 pre::after 这两个元素，各定义了两个角。
三个按钮是图像, 在 pre::before 定义
灰色渐变背景是在 pre::after 定义

不过，为何你的代码显示的是非等宽？在浏览器强制指定了？不难看？

vincentxue

2018-09-24 11:51:11 +08:00

我猜你是要找 https://carbon.now.sh

vincentxue

2018-09-24 11:52:40 +08:00

NickCarter

2018-09-24 11:53:04 +08:00 via iPhone

楼上正解

mrsatangel

2018-09-24 11:56:28 +08:00

@klesh #8 好的谢谢，这些我自己撸样式也能撸个差不多的，我想问问有没有现成的 highlightjs 或者 prismjs 的主题能够实现的？字体

mrsatangel

2018-09-24 11:57:57 +08:00

@klesh #8 sorry 上面没发完。字体是因为 user agent stylesheet 里面的 monospace 字体我没装

iPhone8

2018-09-24 23:15:34 +08:00

FakeLeung

2018-09-24 23:40:46 +08:00

就是 carbon 了，没跑了。

ali12333

2022-02-25 15:26:29 +08:00

@vincentxue 感谢, 正想找这个!