登录 注册

希望显化大纲标题级别

本贴最后更新于 187 天前，其中的信息可能已经东海扬尘

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

image.png

  • 思源笔记

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

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

    24670 引用 • 101246 回帖
  • Q&A

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

    9338 引用 • 42517 回帖 • 112 关注
1 引用
[css] [js] 思源代码片段插件分享（CongSec 版） • CongSec
香港 位置
100 悬赏
3 收藏
1 引用
7 回帖
3
2
373 187 109 1 76

相关帖子

被采纳的回答
  • 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 回帖
希望显化大纲标题级别

欢迎来到这里！

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

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

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

  • 其他回帖
  • CongSec •
    付费者 捐赠者 作者

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

  • 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 回复
  • 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

    1 回复
    2 操作
    Muu 在 2024-09-16 11:52:53 更新了该回帖
    Muu 在 2024-09-16 11:51:55 更新了该回帖
  • 查看全部回帖
CongSec
新手可以看我发的求助帖以及汇总帖子，很有帮助的!_! 香港
回帖
272
 帖子
64
 积分
1896

近期热议

推荐标签 标签

  • 域名

    域名（Domain Name），简称域名、网域，是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置）。

    43 引用 • 208 回帖 • 1 关注
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    345 引用 • 724 回帖
  • H2

    H2 是一个开源的嵌入式数据库引擎，采用 Java 语言编写，不受平台的限制，同时 H2 提供了一个十分方便的 web 控制台用于操作和管理数据库内容。H2 还提供兼容模式，可以兼容一些主流的数据库，因此采用 H2 作为开发期的数据库非常方便。

    11 引用 • 54 回帖 • 663 关注
  • Excel
    31 引用 • 28 回帖
  • 开源中国

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

    7 引用 • 86 回帖
  • AWS
    11 引用 • 28 回帖 • 10 关注
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统，主要使用于便携设备。2005 年由 Google 收购注资，并拉拢多家制造商组成开放手机联盟开发改良，逐渐扩展到到平板电脑及其他领域上。

    335 引用 • 324 回帖
  • 游戏

    沉迷游戏伤身，强撸灰飞烟灭。

    180 引用 • 821 回帖
  • Solo

    Solo 是一款小而美的开源博客系统，专为程序员设计。Solo 有着非常活跃的社区，可将文章作为帖子推送到社区，来自社区的回帖将作为博客评论进行联动（具体细节请浏览 B3log 构思 - 分布式社区网络）。

    这是一种全新的网络社区体验，让热爱记录和分享的你不再感到孤单！

    1439 引用 • 10067 回帖 • 491 关注
  • frp

    frp 是一个可用于内网穿透的高性能的反向代理应用，支持 TCP、UDP、 HTTP 和 HTTPS 协议。

    20 引用 • 7 回帖 • 2 关注
  • IBM

    IBM（国际商业机器公司）或万国商业机器公司，简称 IBM（International Business Machines Corporation），总公司在纽约州阿蒙克市。1911 年托马斯·沃森创立于美国，是全球最大的信息技术和业务解决方案公司，拥有全球雇员 30 多万人，业务遍及 160 多个国家和地区。

    17 引用 • 53 回帖 • 147 关注
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用，而且功能强大。你无需专门学习，只需看上几眼，就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 616 关注
  • B3log

    B3log 是一个开源组织，名字来源于“Bulletin Board Blog”缩写，目标是将独立博客与论坛结合，形成一种新的网络社区体验，详细请看 B3log 构思。目前 B3log 已经开源了多款产品：Sym、Solo、Vditor 和 思源笔记。

    1063 引用 • 3455 回帖 • 166 关注
  • 链书

    链书（Chainbook）是 B3log 开源社区提供的区块链纸质书交易平台，通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书，我们共同构建这个全新的交易平台，让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线，也许以后还有计划重制上线。

    14 引用 • 257 回帖 • 2 关注
  • OpenCV
    15 引用 • 36 回帖
  • CAP

    CAP 指的是在一个分布式系统中， Consistency（一致性）、 Availability（可用性）、Partition tolerance（分区容错性），三者不可兼得。

    12 引用 • 5 回帖 • 633 关注
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具，主要功能包括：位置相关的内容递送；用户认证和授权；集中式网络监控。

    1 引用 • 7 回帖 • 604 关注
  • WebClipper

    Web Clipper 是一款浏览器剪藏扩展，它可以帮助你把网页内容剪藏到本地。

    3 引用 • 9 回帖 • 5 关注
  • MongoDB

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

    90 引用 • 59 回帖 • 7 关注
  • LaTeX

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

    12 引用 • 54 回帖 • 19 关注
  • 叶归
    5 引用 • 16 回帖 • 9 关注
  • 笔记

    好记性不如烂笔头。

    311 引用 • 796 回帖
  • Telegram

    Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端，也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。

    5 引用 • 35 回帖
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架，它对 JDBC 进行了非常轻量级的对象封装，使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 719 关注
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息（如用户名与密码），即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权，因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 28 关注
  • Shell

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

    124 引用 • 74 回帖
  • OneDrive
    2 引用 • 2 关注

最新标签