写味主题代码块美化

本贴最后更新于 273 天前,其中的信息可能已经时异事殊

美化样式

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;
}
  • 思源笔记

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

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

    23843 引用 • 96946 回帖 • 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;
    }
    
请输入回帖内容 ...

推荐标签 标签

  • 创造

    你创造的作品可能会帮助到很多人,如果是开源项目的话就更赞了!

    179 引用 • 997 回帖 • 1 关注
  • JWT

    JWT(JSON Web Token)是一种用于双方之间传递信息的简洁的、安全的表述性声明规范。JWT 作为一个开放的标准(RFC 7519),定义了一种简洁的,自包含的方法用于通信双方之间以 JSON 的形式安全的传递信息。

    20 引用 • 15 回帖 • 9 关注
  • Sphinx

    Sphinx 是一个基于 SQL 的全文检索引擎,可以结合 MySQL、PostgreSQL 做全文搜索,它可以提供比数据库本身更专业的搜索功能,使得应用程序更容易实现专业化的全文检索。

    1 引用 • 211 关注
  • 微软

    微软是一家美国跨国科技公司,也是世界 PC 软件开发的先导,由比尔·盖茨与保罗·艾伦创办于 1975 年,公司总部设立在华盛顿州的雷德蒙德(Redmond,邻近西雅图)。以研发、制造、授权和提供广泛的电脑软件服务业务为主。

    8 引用 • 44 回帖 • 2 关注
  • Openfire

    Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高,单台服务器可支持上万并发用户。

    6 引用 • 7 回帖 • 102 关注
  • AngularJS

    AngularJS 诞生于 2009 年,由 Misko Hevery 等人创建,后为 Google 所收购。是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。

    12 引用 • 50 回帖 • 482 关注
  • Quicker

    Quicker 您的指尖工具箱!操作更少,收获更多!

    36 引用 • 155 回帖
  • 钉钉

    钉钉,专为中国企业打造的免费沟通协同多端平台, 阿里巴巴出品。

    15 引用 • 67 回帖 • 317 关注
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug(漏洞)。

    76 引用 • 1741 回帖 • 1 关注
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据(或者事件)流的 API。它组合了观察者模式,迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 165 关注
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    315 引用 • 547 回帖 • 1 关注
  • Maven

    Maven 是基于项目对象模型(POM)、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    186 引用 • 318 回帖 • 267 关注
  • 大数据

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

    93 引用 • 113 回帖
  • Unity

    Unity 是由 Unity Technologies 开发的一个让开发者可以轻松创建诸如 2D、3D 多平台的综合型游戏开发工具,是一个全面整合的专业游戏引擎。

    25 引用 • 7 回帖 • 153 关注
  • 链滴

    链滴是一个记录生活的地方。

    记录生活,连接点滴

    161 引用 • 3814 回帖
  • C

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

    85 引用 • 165 回帖
  • Markdown

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

    169 引用 • 1525 回帖
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似,也就是用各类命令预先放入到一个文件中,方便一次性执行的一个程序文件,主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大,比用其他编程程序编辑的程序效率更高,因为它使用了 Linux/Unix 下的命令。

    124 引用 • 74 回帖 • 2 关注
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞 I/O 模型而得以轻量和高效。

    139 引用 • 269 回帖 • 6 关注
  • abitmean

    有点意思就行了

    31 关注
  • SVN

    SVN 是 Subversion 的简称,是一个开放源代码的版本控制系统,相较于 RCS、CVS,它采用了分支管理系统,它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 692 关注
  • Chrome

    Chrome 又称 Google 浏览器,是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写,包括 WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。

    62 引用 • 289 回帖
  • OpenCV
    15 引用 • 36 回帖 • 2 关注
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件,最早由德国 Innotek 公司开发,由 Sun Microsystems 公司出品的软件,使用 Qt 编写,在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 11 关注
  • BookxNote

    BookxNote 是一款全新的电子书学习工具,助力您的学习与思考,让您的大脑更高效的记忆。

    笔记整理交给我,一心只读圣贤书。

    1 引用 • 1 回帖
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统(DBMS),它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的,并于 1988 年推出了第一个 OS/2 版本。

    21 引用 • 31 回帖
  • 京东

    京东是中国最大的自营式电商企业,2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月,京东在美国纳斯达克证券交易所正式挂牌上市(股票代码:JD),是中国第一个成功赴美上市的大型综合型电商平台,与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 333 关注