登录 注册

希望显化大纲标题级别

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

image.png

  • 思源笔记

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

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

    21356 引用 • 84259 回帖 • 2 关注
  • Q&A

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

    7629 引用 • 34721 回帖 • 198 关注
香港 位置
100 悬赏
2 收藏
7 回帖
3
2
176 167 9

相关帖子

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

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • wilsons • • 2
    付费者 捐赠者

    不知这种可是你想要的效果，我这里是默认主题，具体细节可根据自己的主题进行调整

    image.png

    /* 大纲颜色，亮色主题 */
html[data-theme-mode="light"] {
    .file-tree.sy__outline div.b3-list-item[title] .b3-list-item__text,
    .file-tree.sy__outline li.b3-list-item[data-type="NodeHeading"] .b3-list-item__text{
        color: black; /* 颜色请根据自己的需要修改 */
    }
}
/* 大纲颜色，暗色主题 */
html[data-theme-mode="dark"] {
    .file-tree.sy__outline div.b3-list-item[title] .b3-list-item__text,
    .file-tree.sy__outline li.b3-list-item[data-type="NodeHeading"] .b3-list-item__text{
        color: white; /* 颜色请根据自己的需要修改 */
    }
}
/* 大纲标题 */
.file-tree.sy__outline div.b3-list-item[title] .b3-list-item__text{
    font-size: 2em;
    font-weight: bold;
}
/* 大纲H1 */
.file-tree.sy__outline li.b3-list-item[data-type="NodeHeading"][data-subtype="h1"] {
    font-size: 1.75em;
    font-weight: 600;
    padding: .3em 4px;
}

/* 大纲H2 */
.file-tree.sy__outline li.b3-list-item[data-type="NodeHeading"][data-subtype="h2"] {
    font-size: 1.55em;
    font-weight: 600;
    padding: .3em 4px;
}

/* 大纲H3 */
.file-tree.sy__outline li.b3-list-item[data-type="NodeHeading"][data-subtype="h3"] {
    font-size: 1.38em;
    font-weight: 600;
    padding: 4px;
}

/* 大纲H4 */
.file-tree.sy__outline li.b3-list-item[data-type="NodeHeading"][data-subtype="h4"] {
    font-size: 1.25em;
    font-weight: 600;
    padding: 4px;
}

/* 大纲H5 */
.file-tree.sy__outline li.b3-list-item[data-type="NodeHeading"][data-subtype="h5"] {
    font-size: 1.13em;
    font-weight: 600;
    padding: 4px;
}

/* 大纲H6 */
.file-tree.sy__outline li.b3-list-item[data-type="NodeHeading"][data-subtype="h6"] {
    font-size: 1em;
    font-weight: 600;
    padding: 4px;
}
    1 操作
    wilsons 在 2024-09-16 04:43:49 更新了该回帖
  • 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 •
    付费者 捐赠者 作者

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

    image.png

    1 回复
  • 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 •
    付费者 捐赠者 作者

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

  • ZiYunMaster •

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

  • CongSec •
    付费者 捐赠者 作者

    根据代码改了一下，当鼠标悬浮在大纲时数字才会显示，代码如下：

    
/* 屏蔽原始的图标显示 */
.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: hidden;
        position: relative;
        left: 4px;
        color: black;
        font-weight: 100px;
        border-radius: 3px;
        opacity: 0;
        font-size: 18px;
        pointer-events: none;
        font-family: "Segoe UI";
    }

    /* 鼠标悬停时显示内容 */
    [data-subtype*="h"]:hover > span:first-child::after {
        visibility: visible;
        opacity: 1;
    }

    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: "𝟭";
    }
    [data-subtype="h2"] > span:first-child::after {
        content: "𝟮";
    }
    [data-subtype="h3"] > span:first-child::after {
        content: "𝟯";
    }
    [data-subtype="h4"] > span:first-child::after {
        content: "𝟰";
    }
    [data-subtype="h5"] > span:first-child::after {
        content: "𝟱";
    }
    [data-subtype="h6"] > span:first-child::after {
        content: "𝟲";
    }

    /* 鼠标悬停时改变图标背景色 */
    [data-subtype="h1"] + svg.b3-list-item__graphic:hover {
        background-color: var(--h1-list-graphic);
    }
    [data-subtype="h2"] + svg.b3-list-item__graphic:hover {
        background-color: var(--h2-list-graphic);
    }
    [data-subtype="h3"] + svg.b3-list-item__graphic:hover {
        background-color: var(--h3-list-graphic);
    }
    [data-subtype="h4"] + svg.b3-list-item__graphic:hover {
        background-color: var(--h4-list-graphic);
    }
    [data-subtype="h5"] + svg.b3-list-item__graphic:hover {
        background-color: var(--h5-list-graphic);
    }
    [data-subtype="h6"] + svg.b3-list-item__graphic:hover {
        background-color: var(--h6-list-graphic);
    }
}
请输入回帖内容 ...
CongSec
没事别关注我, 因为发帖需要更多积分 香港
回帖
96
 帖子
26
 积分
428

近期热议

推荐标签 标签

  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务，可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务，所以该项目也已经停止维护了！

    34 引用 • 467 回帖 • 733 关注
  • 人工智能

    人工智能（Artificial Intelligence）是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门技术科学。

    129 引用 • 171 回帖
  • HBase

    HBase 是一个分布式的、面向列的开源数据库，该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable：一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样，HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 68 关注
  • Python

    Python 是一种面向对象、直译式电脑编程语言，具有近二十年的发展历史，成熟且稳定。它包含了一组完善而且容易理解的标准库，能够轻松完成很多常见的任务。它的语法简捷和清晰，尽量使用无异义的英语单词，与其它大多数程序设计语言使用大括号不一样，它使用缩进来定义语句块。

    540 引用 • 672 回帖
  • Flume

    Flume 是一套分布式的、可靠的，可用于有效地收集、聚合和搬运大量日志数据的服务架构。

    9 引用 • 6 回帖 • 623 关注
  • NGINX

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

    311 引用 • 546 回帖 • 1 关注
  • OpenShift

    红帽提供的 PaaS 云，支持多种编程语言，为开发人员提供了更为灵活的框架、存储选择。

    14 引用 • 20 回帖 • 618 关注
  • Webswing

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

    1 引用 • 15 回帖 • 622 关注
  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机，如：iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    165 引用 • 594 回帖 • 1 关注
  • Sym

    Sym 是一款用 Java 实现的现代化社区（论坛/BBS/社交网络/博客）系统平台。

    下一代的社区系统，为未来而构建

    524 引用 • 4599 回帖 • 702 关注
  • TGIF

    Thank God It's Friday! 感谢老天，总算到星期五啦！

    287 引用 • 4484 回帖 • 667 关注
  • GitBook

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识，提高团队的工作效率，让用户满意。

    3 引用 • 8 回帖
  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流，分享无限上传的图片，发布链接和视频，更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 464 关注
  • gRpc
    11 引用 • 9 回帖 • 54 关注
  • IBM

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

    17 引用 • 53 回帖 • 135 关注
  • 思源笔记

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

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

    21356 引用 • 84259 回帖 • 3 关注
  • 数据库

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

    336 引用 • 669 回帖 • 1 关注
  • C++

    C++ 是在 C 语言的基础上开发的一种通用编程语言，应用广泛。C++ 支持多种编程范式，面向对象编程、泛型编程和过程化编程。

    107 引用 • 152 回帖
  • 阿里巴巴

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

    43 引用 • 221 回帖 • 149 关注
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台，用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统（CMS）来使用。WordPress 是一个免费的开源项目，在 GNU 通用公共许可证（GPLv2）下授权发布。

    66 引用 • 114 回帖 • 252 关注
  • 酷鸟浏览器

    安全 · 稳定 · 快速
    为跨境从业人员提供专业的跨境浏览器

    3 引用 • 59 回帖 • 35 关注
  • 锤子科技

    锤子科技（Smartisan）成立于 2012 年 5 月，是一家制造移动互联网终端设备的公司，公司的使命是用完美主义的工匠精神，打造用户体验一流的数码消费类产品（智能手机为主），改善人们的生活质量。

    4 引用 • 31 回帖 • 2 关注
  • 运维

    互联网运维工作，以服务为中心，以稳定、安全、高效为三个基本点，确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    148 引用 • 257 回帖 • 1 关注
  • 机器学习

    机器学习（Machine Learning）是一门多领域交叉学科，涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为，以获取新的知识或技能，重新组织已有的知识结构使之不断改善自身的性能。

    83 引用 • 37 回帖
  • MySQL

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

    676 引用 • 535 回帖
  • FFmpeg

    FFmpeg 是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。

    23 引用 • 32 回帖
  • Vim

    Vim 是类 UNIX 系统文本编辑器 Vi 的加强版本，加入了更多特性来帮助编辑源代码。Vim 的部分增强功能包括文件比较（vimdiff）、语法高亮、全面的帮助系统、本地脚本（Vimscript）和便于选择的可视化模式。

    29 引用 • 66 回帖 • 2 关注

最新标签