写味主题代码块美化

美化样式

image.png

代码片段

/*代码块颜色*/
pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}
/*!Theme: a11y-dark
  Author: @ericwbailey
  Maintainer: @ericwbailey
  Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css*/
.hljs{background:#2b2b2b;color:#f8f8f2}.hljs-comment,.hljs-quote{color:#d4d0ab}.hljs-deletion,.hljs-name,.hljs-regexp,.hljs-selector-class,.hljs-selector-id,.hljs-tag,.hljs-template-variable,.hljs-variable{color:#ffa07a}.hljs-built_in,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-type{color:#f5ab35}.hljs-attribute{color:gold}.hljs-addition,.hljs-bullet,.hljs-string,.hljs-symbol{color:#abe338}.hljs-section,.hljs-title{color:#00e0e0}.hljs-keyword,.hljs-selector-tag{color:#dcc6e0}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}@media screen and (-ms-high-contrast:active){.hljs-addition,.hljs-attribute,.hljs-built_in,.hljs-bullet,.hljs-comment,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-quote,.hljs-string,.hljs-symbol,.hljs-type{color:highlight}.hljs-keyword,.hljs-selector-tag{font-weight:700}}

/*代码块背景设置*/
.b3-typography div.hljs, .protyle-wysiwyg div.hljs {
    background: #2e2d2d;
    padding: 30px 10px 22px 10px;
}

/*行号背景设置*/
.protyle-linenumber__rows {
    background-color: #302d2d !important;
}

/*行数颜色设置*/
.protyle-linenumber__rows span::before {
    color: #ffffffad;
}

/*复制按钮代码颜色*/
.code-block .protyle-action .protyle-action__copy, .code-block .protyle-action .protyle-action__menu {
    margin-top: -3px;
    color: wheat;
    background-color: var(--S-list-background);
}

/*语言提醒*/
.b3-typography .code-block .protyle-action .protyle-action__language, .protyle-wysiwyg .code-block .protyle-action .protyle-action__language {
    font-size: 85%;
    color: white;
    margin-top: -4px;
    padding-left: 2.5em;
}
/* 设置顶部三个mac按钮样式 */
.code-block::after {
    content: ' ';
    position: absolute;
    background: #fa625c;
    box-shadow: 23px 0 #fdbc40, 45px 0 #35cd4b;
    border-radius: 7px;
    top: 10px;
    left: 15px;
    height: 12px;
    width: 12px;
    z-index: 1;
}

.hljs-attr {
    color: white;
}
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    22026 引用 • 87850 回帖 • 4 关注
1 操作
NorthCJ 在 2024-05-10 12:44:27 更新了该帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • yalidabuda

    已使用,感谢大佬trollface

  • 该回帖仅作者和楼主可见
    1 回复
  • NorthCJ 1

    抱歉 ,这个好久不怎么使用了 ,现在这个是临时调的 ,基于 Savor 主题 Salt 配色 ,希望能帮助到你

    image.png

    pre code.hljs {
        display: block;
        overflow-x: auto;
        padding: 1em
    }
    
    code.hljs {
        padding: 3px 5px
    }
    
    .hljs-comment,
    .hljs-quote {
        color: #969896
    }
    
    .hljs-deletion,
    .hljs-name,
    .hljs-regexp,
    .hljs-selector-class,
    .hljs-selector-id,
    .hljs-tag,
    .hljs-template-variable,
    .hljs-variable {
        color: #d54e53
    }
    
    .hljs-built_in,
    .hljs-link,
    .hljs-literal,
    .hljs-meta,
    .hljs-number,
    .hljs-params,
    .hljs-type {
        color: #e78c45
    }
    
    .hljs-attribute {
        color: #e7c547
    }
    
    .hljs-addition,
    .hljs-bullet,
    .hljs-string,
    .hljs-symbol {
        color: #b9ca4a
    }
    
    .hljs-section,
    .hljs-title {
        color: #7aa6da
    }
    
    .hljs-keyword,
    .hljs-selector-tag {
        color: #c397d8
    }
    
    .hljs {
        background: #000;
        color: #eaeaea
    }
    
    .hljs-emphasis {
        font-style: italic
    }
    
    .hljs-strong {
        font-weight: 700
    }
    
    /* 代码块背景设置 */
    .b3-typography .code-block:not(pre), .protyle-wysiwyg .code-block:not(pre) {
        padding: 2em 1em 1.6em;
        margin: 1em 0;
        box-sizing: border-box;
        background-color: #282828;
    }
    
    .code-block::after {
        content: ' ';
        position: absolute;
        background: #fa625c;
        box-shadow: 23px 0 #fdbc40, 45px 0 #35cd4b;
        border-radius: var(--b3-border-radius-round);
        top: 10px;
        left: 15px;
        height: 12px;
        width: 12px;
        z-index: 1;
        border-radius: 6px;
    }
    
    
    .b3-typography .code-block:not(pre) .protyle-action .protyle-action__language, .protyle-wysiwyg .code-block:not(pre) .protyle-action .protyle-action__language {
        font-size: 85%;
        color: #fff8ed;
        margin-top: -4px;
        align-self: center;
        margin-left: 75px;
    }
    
    .code-block .protyle-action .protyle-action__copy, .code-block .protyle-action .protyle-action__menu {
        margin-top: -3px;
        color: #fff;
        background-color: var(--S-list-background);
    }
    
    2 回复
  • 该回帖仅作者和楼主可见
  • Aaron6fl

    image.png

    这是啥情况?

    1 回复
  • NorthCJ

    你好 ,帖子的这个代码块好像是不能用了 ,我在评论区里面发了一个 ,你可以看下 ,我这边显示的是正常的 ,代码块是基于写味主题的

    image.png

    1 回复
  • Aaron6fl

    我就是把评论区那段代码添加到 Savor/theme.css 文件的末尾了,代码块都能呈现 mac 风格,但当点击某些代码块(光标移动到某些代码块中)时就会出现这种情况

    1 回复
  • NorthCJ

    这个就不清楚了 ,因为很久不使用这个代码块了 ,如果你只是想拥有 mac 风格的代码块的话 ,可以改成这个试一下

    /*语言提醒*/
    .b3-typography .code-block .protyle-action .protyle-action__language, .protyle-wysiwyg .code-block .protyle-action .protyle-action__language {
        font-size: 85%;
        color: white;
        margin-top: -4px;
        padding-left: 2.5em;
    }
    /* 设置顶部三个mac按钮样式 */
    .code-block::after {
        content: ' ';
        position: absolute;
        background: #fa625c;
        box-shadow: 23px 0 #fdbc40, 45px 0 #35cd4b;
        border-radius: 7px;
        top: 10px;
        left: 15px;
        height: 12px;
        width: 12px;
        z-index: 1;
    }
    
请输入回帖内容 ...

推荐标签 标签

  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案,后端采用 Go 编写,采用 MIT 许可证。

    4 引用 • 16 回帖 • 1 关注
  • RIP

    愿逝者安息!

    8 引用 • 92 回帖 • 348 关注
  • Markdown

    Markdown 是一种轻量级标记语言,用户可使用纯文本编辑器来排版文档,最终通过 Markdown 引擎将文档转换为所需格式(比如 HTML、PDF 等)。

    167 引用 • 1509 回帖
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器,详细介绍请看 将 Java Swing 应用变成 Web 应用

    1 引用 • 15 回帖 • 619 关注
  • 学习

    “梦想从学习开始,事业从实践起步” —— 习近平

    168 引用 • 504 回帖
  • MongoDB

    MongoDB(来自于英文单词“Humongous”,中文含义为“庞大”)是一个基于分布式文件存储的数据库,由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。它支持的数据结构非常松散,是类似 JSON 的 BSON 格式,因此可以存储比较复杂的数据类型。

    90 引用 • 59 回帖 • 5 关注
  • Linux

    Linux 是一套免费使用和自由传播的类 Unix 操作系统,是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议,并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想,是一个性能稳定的多用户网络操作系统。

    939 引用 • 940 回帖
  • danl
    129 关注
  • JSON

    JSON (JavaScript Object Notation)是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    52 引用 • 190 回帖
  • 新人

    让我们欢迎这对新人。哦,不好意思说错了,让我们欢迎这位新人!
    新手上路,请谨慎驾驶!

    52 引用 • 228 回帖 • 1 关注
  • TextBundle

    TextBundle 文件格式旨在应用程序之间交换 Markdown 或 Fountain 之类的纯文本文件时,提供更无缝的用户体验。

    1 引用 • 2 回帖 • 45 关注
  • SendCloud

    SendCloud 由搜狐武汉研发中心孵化的项目,是致力于为开发者提供高质量的触发邮件服务的云端邮件发送平台,为开发者提供便利的 API 接口来调用服务,让邮件准确迅速到达用户收件箱并获得强大的追踪数据。

    2 引用 • 8 回帖 • 478 关注
  • C

    C 语言是一门通用计算机编程语言,应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    85 引用 • 165 回帖
  • Angular

    AngularAngularJS 的新版本。

    26 引用 • 66 回帖 • 533 关注
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成,还支持通过插件进行扩展。

    10 引用 • 5 回帖 • 1 关注
  • PHP

    PHP(Hypertext Preprocessor)是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点,主要适用于 Web 开发领域,据说是世界上最好的编程语言。

    179 引用 • 407 回帖 • 489 关注
  • Typecho

    Typecho 是一款博客程序,它在 GPLv2 许可证下发行,基于 PHP 构建,可以运行在各种平台上,支持多种数据库(MySQL、PostgreSQL、SQLite)。

    12 引用 • 65 回帖 • 452 关注
  • 阿里巴巴

    阿里巴巴网络技术有限公司(简称:阿里巴巴集团)是以曾担任英语教师的马云为首的 18 人,于 1999 年在中国杭州创立,他们相信互联网能够创造公平的竞争环境,让小企业通过创新与科技扩展业务,并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 126 关注
  • 架构

    我们平时所说的“架构”主要是指软件架构,这是有关软件整体结构与组件的抽象描述,用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    142 引用 • 442 回帖
  • 招聘

    哪里都缺人,哪里都不缺人。

    190 引用 • 1057 回帖 • 1 关注
  • 大数据

    大数据(big data)是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    93 引用 • 113 回帖 • 1 关注
  • 开源中国

    开源中国是目前中国最大的开源技术社区。传播开源的理念,推广开源项目,为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。目前开源中国社区已收录超过两万款开源软件。

    7 引用 • 86 回帖
  • BAE

    百度应用引擎(Baidu App Engine)提供了 PHP、Java、Python 的执行环境,以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用,并且提供动态扩容和负载均衡的运行环境,让开发者不用考虑高成本的运维工作,只需专注于业务逻辑,大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 632 关注
  • Dubbo

    Dubbo 是一个分布式服务框架,致力于提供高性能和透明化的 RPC 远程服务调用方案,是 [阿里巴巴] SOA 服务化治理方案的核心框架,每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 597 关注
  • Swagger

    Swagger 是一款非常流行的 API 开发工具,它遵循 OpenAPI Specification(这是一种通用的、和编程语言无关的 API 描述规范)。Swagger 贯穿整个 API 生命周期,如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖 • 3 关注
  • MySQL

    MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    677 引用 • 535 回帖
  • NetBeans

    NetBeans 是一个始于 1997 年的 Xelfi 计划,本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE,直到 1999 年 Sun 买下此公司。Sun 于次年(2000 年)六月将 NetBeans IDE 开源,直到现在 NetBeans 的社群依然持续增长。

    78 引用 • 102 回帖 • 672 关注