登录 注册

希望显化大纲标题级别

本人喜欢使用大纲来记笔记，通过观看字体的大小很难判断几级标题，于是只能通过大纲来进行观看标题级别，但是本人具有弱色盲，大纲的标题级别看的不是很清楚，希望各位大佬能不能出手将这个数字调为黑色，加粗，在不影响没感的情况下尽量大一点

image.png

  • 思源笔记

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

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

    22340 引用 • 89388 回帖 • 1 关注
  • Q&A

    提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。

    8112 引用 • 37003 回帖 • 160 关注
1 引用
[css] [js] 思源代码片段插件分享（CongSec 版） • CongSec
香港 位置
100 悬赏
2 收藏
1 引用
7 回帖
3
2
218 176 42

相关帖子

被采纳的回答
  • Muu • • 1
    付费者 
    /* 显示标题 */
.sy__outline .b3-list-item[title] {
    display: inherit;
}
/* 字体 大小 清晰度 */
.sy__outline .b3-list-item[data-type=NodeHeading][data-subtype=h1] .b3-list-item__text::before,
.sy__outline .b3-list-item[data-type=NodeHeading][data-subtype=h2] .b3-list-item__text::before,
.sy__outline .b3-list-item[data-type=NodeHeading][data-subtype=h3] .b3-list-item__text::before,
.sy__outline .b3-list-item[data-type=NodeHeading][data-subtype=h4] .b3-list-item__text::before,
.sy__outline .b3-list-item[data-type=NodeHeading][data-subtype=h5] .b3-list-item__text::before,
.sy__outline .b3-list-item[data-type=NodeHeading][data-subtype=h6] .b3-list-item__text::before {
    font-size: 15px !important; /* 更改显示字体大小 */
    opacity: 1;
    font-family:  'yahei consolas hybrid', 'ibm plex mono'; /* 更改显示字体 */
    margin-right: 6px;   /* 距离标题文字的距离 */
}

/* 屏蔽原始的图标显示 */ 
.sy__outline .b3-list-item .b3-list-item__graphic.popover__block {
    display: none;
}

/* 更改 content 可以显示不同的前缀 */
.sy__outline .b3-list-item[data-type=NodeHeading][data-subtype=h1] .b3-list-item__text::before { content: "⓵"; color: red; }
.sy__outline .b3-list-item[data-type=NodeHeading][data-subtype=h2] .b3-list-item__text::before { content: "𝟮"; color: #0087ff; }
.sy__outline .b3-list-item[data-type=NodeHeading][data-subtype=h3] .b3-list-item__text::before { content: "𝟯"; color: #8694ff; }
.sy__outline .b3-list-item[data-type=NodeHeading][data-subtype=h4] .b3-list-item__text::before { content: "𝟒"; color: #ffa54b; }
.sy__outline .b3-list-item[data-type=NodeHeading][data-subtype=h5] .b3-list-item__text::before { content: "𝟓"; color: #9cfd57; }
.sy__outline .b3-list-item[data-type=NodeHeading][data-subtype=h6] .b3-list-item__text::before { content: "⒍"; color: #e7fd1a; }

    效果图

    默认主题

    image.png

7 回帖
希望显化大纲标题级别

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • Muu • • 1
    付费者

    这个结构是我根据写味主题的源码改的, 看你的图 是都改成了黑色的, 所以这里的颜色我也都是用了黑色的

    另外 这个代码跟我上一个评论里的代码实现方式不同, 所以需要 禁用/删除 掉我上个评论里面的代码片段

    /* 屏蔽原始的图标显示 */ 
.sy__outline .b3-list-item .b3-list-item__graphic.popover__block {
    display: none;
}
.sy__outline ul.b3-list.b3-list--background{
	& [data-subtype*="h"]{
	>span:first-child::after{
			visibility: visible!important;
			position:relative;
			left:4px;
			font-color: black;
			font-weight: 100px;
			border-radius:3px;
			opacity:1;
			font-size:18px;
			pointer-events:none;
			font-family:"Segoe UI";
		}
	}
	& svg.b3-list-item__graphic{
		margin-left:-19px;
		margin-right:4px;
		color:black;
		width:17px!important;
		border-radius:3px;
		opacity:0.2;
	}
	& [data-subtype="h1"]>span:first-child{
		&::after{
		content:"𝟭";
		color:black;
		}
		&+svg.b3-list-item__graphic:hover{
			background-color:var(--h1-list-graphic);
		}
	}
	& [data-subtype="h2"]>span:first-child{
		&::after{
		content:"𝟮";
		color:black;
		}
		&+svg.b3-list-item__graphic:hover{
			background-color:var(--h2-list-graphic);
		}
	}
	& [data-subtype="h3"]>span:first-child{
		&::after{
		content:"𝟯";
		color:black;
		}
		&+svg.b3-list-item__graphic:hover{
			background-color:var(--h3-list-graphic);
		}
	}
	& [data-subtype="h4"]>span:first-child{
		&::after{
		content:"𝟰";
		color:black;
		}
		&+svg.b3-list-item__graphic:hover{
			background-color:var(--h4-list-graphic);
		}
	}
	& [data-subtype="h5"]>span:first-child{
		&::after{
		content:"𝟱";
		color:black;
		}
		&+svg.b3-list-item__graphic:hover{
			background-color:var(--h5-list-graphic);
		}
	}
	& [data-subtype="h6"]>span:first-child{
		&::after{
		content:"𝟲";
		color:black;
		}
		&+svg.b3-list-item__graphic:hover{
			background-color:var(--h6-list-graphic);
		}
	}
}
    1 回复
  • 其他回帖
  • CongSec •
    付费者 捐赠者 作者

    十分感谢，这正是我要的效果

  • CongSec •
    付费者 捐赠者 作者

    大佬，我用的写味主题，但是屏蔽原始图标显示好像并没有生效，能不能再出手一下

    image.png

    1 回复
  • ZiYunMaster •

    这个效果好使（膜拜大佬的同时，留下了没有技术的泪水）

  • 查看全部回帖
CongSec
没事别关注我, 因为发帖需要更多积分 香港
回帖
163
 帖子
37
 积分
835

近期热议

推荐标签 标签

  • jsoup

    jsoup 是一款 Java 的 HTML 解析器，可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API，可通过 DOM，CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 477 关注
  • Electron

    Electron 基于 Chromium 和 Node.js，让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目，兼容 Mac、Windows 和 Linux，它构建的应用可在这三个操作系统上面运行。

    15 引用 • 136 回帖 • 1 关注
  • 分享

    有什么新发现就分享给大家吧！

    248 引用 • 1792 回帖
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎，它支持自动化部署、大规模可伸缩、应用容器化管理。

    110 引用 • 54 回帖
  • 安装

    你若安好，便是晴天。

    132 引用 • 1184 回帖
  • Linux

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

    943 引用 • 943 回帖
  • 知乎

    知乎是网络问答社区，连接各行各业的用户。用户分享着彼此的知识、经验和见解，为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现，服务器端用 Erlang 语言编写，支持多种语言客户端，如：Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息，在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 362 关注
  • LaTeX

    LaTeX（音译“拉泰赫”）是一种基于 ΤΕΧ 的排版系统，由美国计算机学家莱斯利·兰伯特（Leslie Lamport）在 20 世纪 80 年代初期开发，利用这种格式，即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能，能在几天，甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式，这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。

    12 引用 • 54 回帖 • 65 关注
  • 工具

    子曰：“工欲善其事，必先利其器。”

    286 引用 • 729 回帖
  • 阿里云

    阿里云是阿里巴巴集团旗下公司，是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务，以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    89 引用 • 345 回帖
  • 倾城之链
    23 引用 • 66 回帖 • 136 关注
  • 宕机

    宕机，多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态，也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态，也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 51 关注
  • Caddy

    Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。

    12 引用 • 54 回帖 • 165 关注
  • Vue.js

    Vue.js（读音 /vju ː/，类似于 view）是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    266 引用 • 665 回帖
  • SOHO

    为成为自由职业者在家办公而努力吧！

    7 引用 • 55 回帖 • 19 关注
  • 服务器

    服务器，也称伺服器，是提供计算服务的设备。由于服务器需要响应服务请求，并进行处理，因此一般来说服务器应具备承担服务并且保障服务的能力。

    125 引用 • 588 回帖
  • Angular

    Angular 是 AngularJS 的新版本。

    26 引用 • 66 回帖 • 537 关注
  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发，并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例： https://wide.b3log.org

    30 引用 • 218 回帖 • 628 关注
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统，它完整实现了 JMS 规范，是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 671 关注
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储，专门用于在分布式系统中保存关键数据。

    5 引用 • 26 回帖 • 528 关注
  • DevOps

    DevOps（Development 和 Operations 的组合词）是一组过程、方法与系统的统称，用于促进开发（应用程序/软件工程）、技术运营和质量保障（QA）部门之间的沟通、协作与整合。

    47 引用 • 25 回帖
  • Sillot

    Insights（注意当前设置 master 为默认分支）

    汐洛彖夲肜矩阵（Sillot T☳Converbenk Matrix），致力于服务智慧新彖乄，具有彖乄驱动、极致优雅、开发者友好的特点。其中汐洛绞架（Sillot-Gibbet）基于自思源笔记（siyuan-note），前身是思源笔记汐洛版（更早是思源笔记汐洛分支），是智慧新录乄终端（多端融合，移动端优先）。

    主仓库地址：Hi-Windom/Sillot

    文档地址：sillot.db.sc.cn

    注意事项：

    1. ⚠️ 汐洛仍在早期开发阶段，尚不稳定
    2. ⚠️ 汐洛并非面向普通用户设计，使用前请了解风险
    3. ⚠️ 汐洛绞架基于思源笔记，开发者尽最大努力与思源笔记保持兼容，但无法实现 100% 兼容
    29 引用 • 25 回帖 • 85 关注
  • iOS

    iOS 是由苹果公司开发的移动操作系统，最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统，最初是设计给 iPhone 使用的，后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样，属于类 Unix 的商业操作系统。

    85 引用 • 139 回帖 • 1 关注
  • Eclipse

    Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台。就其本身而言，它只是一个框架和一组服务，用于通过插件组件构建开发环境。

    75 引用 • 258 回帖 • 617 关注
  • 新人

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

    52 引用 • 228 回帖
  • Hadoop

    Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下，开发分布式程序。充分利用集群的威力进行高速运算和存储。

    86 引用 • 122 回帖 • 625 关注

最新标签