登录 注册

希望显化大纲标题级别

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

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

image.png

  • 思源笔记

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

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

    24847 引用 • 102201 回帖
  • Q&A

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

    9429 引用 • 42938 回帖 • 109 关注
1 引用
[css] [js] 思源代码片段插件分享（CongSec 版） • CongSec
香港 位置
100 悬赏
3 收藏
1 引用
7 回帖
3
2
382 188 114 2 78

相关帖子

被采纳的回答
  • 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
新手可以看我发的求助帖以及汇总帖子，很有帮助的!_! 香港
回帖
278
 帖子
66
 积分
1693

近期热议

推荐标签 标签

  • 宕机

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

    13 引用 • 82 回帖 • 84 关注
  • CSS

    CSS（Cascading Style Sheet）“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    199 引用 • 541 回帖
  • RIP

    愿逝者安息！

    8 引用 • 92 回帖 • 393 关注
  • Tomcat

    Tomcat 最早是由 Sun Microsystems 开发的一个 Servlet 容器，在 1999 年被捐献给 ASF（Apache Software Foundation），隶属于 Jakarta 项目，现在已经独立为一个顶级项目。Tomcat 主要实现了 JavaEE 中的 Servlet、JSP 规范，同时也提供 HTTP 服务，是市场上非常流行的 Java Web 容器。

    162 引用 • 529 回帖 • 2 关注
  • CongSec

    本标签主要用于分享网络空间安全专业的学习笔记

    1 引用 • 1 回帖 • 23 关注
  • 创造

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

    183 引用 • 1011 回帖
  • Office

    Office 现已更名为 Microsoft 365. Microsoft 365 将高级 Office 应用（如 Word、Excel 和 PowerPoint）与 1 TB 的 OneDrive 云存储空间、高级安全性等结合在一起，可帮助你在任何设备上完成操作。

    5 引用 • 34 回帖
  • CodeMirror
    1 引用 • 2 回帖 • 156 关注
  • 服务器

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

    125 引用 • 585 回帖 • 2 关注
  • Sphinx

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

    1 引用 • 214 关注
  • 工具

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

    295 引用 • 750 回帖 • 2 关注
  • HTML

    HTML5 是 HTML 下一个的主要修订版本，现在仍处于发展阶段。广义论及 HTML5 时，实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    108 引用 • 295 回帖 • 2 关注
  • 单点登录

    单点登录（Single Sign On）是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。

    9 引用 • 25 回帖 • 4 关注
  • Outlook
    1 引用 • 5 回帖 • 1 关注
  • 锤子科技

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

    4 引用 • 31 回帖
  • Openfire

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

    6 引用 • 7 回帖 • 100 关注
  • 数据库

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

    345 引用 • 742 回帖 • 1 关注
  • 学习

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

    172 引用 • 516 回帖
  • Linux

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

    951 引用 • 943 回帖
  • GraphQL

    GraphQL 是一个用于 API 的查询语言，是一个使用基于类型系统来执行查询的服务端运行时（类型系统由你的数据定义）。GraphQL 并没有和任何特定数据库或者存储引擎绑定，而是依靠你现有的代码和数据支撑。

    4 引用 • 3 回帖 • 3 关注
  • 阿里巴巴

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

    43 引用 • 221 回帖 • 75 关注
  • RabbitMQ

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

    49 引用 • 60 回帖 • 347 关注
  • 深度学习

    深度学习（Deep Learning）是机器学习的分支，是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    53 引用 • 40 回帖
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统，在 BSD 开源许可证下发布。

    22 引用 • 22 回帖
  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量，事件及实时分析。

    2 引用 • 87 关注
  • Kubernetes

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

    116 引用 • 54 回帖 • 3 关注
  • 知乎

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

    10 引用 • 66 回帖

最新标签