V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
mrsatangel
V2EX  ›  问与答

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

  •  
  •   mrsatangel · 2018-09-24 10:26:53 +08:00 · 4367 次点击
    这是一个创建于 2236 天前的主题,其中的信息可能已经有所发展或是发生改变。



    像 GraalVM 官网这种。我一开始以为是图片,结果代码可以复制。审查元素也没看出什么引入了什么特别的 js/css
    16 条回复    2022-02-25 15:26:29 +08:00
    suzic
        1
    suzic  
       2018-09-24 10:42:50 +08:00 via Android
    不是 CSS 控制的样式么?
    Dvel
        2
    Dvel  
       2018-09-24 10:52:38 +08:00
    不会前端,不过我知道一个能生成这种图片的网站: http://codezen.rishimohan.me/
    ferrum
        3
    ferrum  
       2018-09-24 10:53:55 +08:00
    luob
        4
    luob  
       2018-09-24 10:57:21 +08:00
    三个按钮和背景的图写在 pre::before 和 pre::after 里面
    jjplay
        5
    jjplay  
       2018-09-24 11:01:48 +08:00
    https://www.graalvm.org/resources/lib/highlight/highlight.pack.js

    兄弟你自己仔细看<pre><code>里的标签,走点心好吗
    mrsatangel
        6
    mrsatangel  
    OP
       2018-09-24 11:14:22 +08:00
    @jjplay #5 老哥,highlightjs 我知道,我说的是 code block 的 macOS 风格的标题栏按钮和圆角的样式啊
    donething
        7
    donething  
       2018-09-24 11:43:31 +08:00
    @mrsatangel 就画 3 个圈,填充颜色。这没学过 css 也没难度啊。
    klesh
        8
    klesh  
       2018-09-24 11:48:10 +08:00
    圆角用 border-radius。你看下 pre 和 pre::after 这两个元素, 各定义了两个角。
    三个按钮是图像, 在 pre::before 定义
    灰色渐变背景是在 pre::after 定义

    不过, 为何你的代码显示的是非等宽?在浏览器强制指定了?不难看?
    vincentxue
        9
    vincentxue  
       2018-09-24 11:51:11 +08:00   ❤️ 2
    我猜你是要找 https://carbon.now.sh
    vincentxue
        10
    vincentxue  
       2018-09-24 11:52:40 +08:00
    NickCarter
        11
    NickCarter  
       2018-09-24 11:53:04 +08:00 via iPhone
    楼上正解
    mrsatangel
        12
    mrsatangel  
    OP
       2018-09-24 11:56:28 +08:00
    @klesh #8 好的谢谢,这些我自己撸样式也能撸个差不多的,我想问问有没有现成的 highlightjs 或者 prismjs 的主题能够实现的?字体
    mrsatangel
        13
    mrsatangel  
    OP
       2018-09-24 11:57:57 +08:00
    @klesh #8 sorry 上面没发完。字体是因为 user agent stylesheet 里面的 monospace 字体我没装
    iPhone8
        14
    iPhone8  
       2018-09-24 23:15:34 +08:00
    FakeLeung
        15
    FakeLeung  
       2018-09-24 23:40:46 +08:00
    就是 carbon 了,没跑了。
    ali12333
        16
    ali12333  
       2022-02-25 15:26:29 +08:00
    @vincentxue 感谢, 正想找这个!
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2505 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 15:44 · PVG 23:44 · LAX 07:44 · JFK 10:44
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.