登录 注册

【代码片段】突出标题

本贴最后更新于 396 天前，其中的信息可能已经物是人非

通过代码片段把 标题 往前挪一点

效果：

a0ba67c4bb8d95b68de19bf2fb875b8.png

a13a2d664ac898395be124bfb9df176.png

代码片段：

/* 左右移动标题位置 CSS片段 */
.b3-typography>.h1,
.protyle-wysiwyg>.h1 {
    margin-left: -35px; /* 负值可以根据需要进行调整 */
}

.b3-typography>.h2,
.b3-typography>.h3,
.b3-typography>.h4,
.b3-typography>.h5,
.b3-typography>.h6,
.protyle-wysiwyg>.h2,
.protyle-wysiwyg>.h3,
.protyle-wysiwyg>.h4,
.protyle-wysiwyg>.h5,
.protyle-wysiwyg>.h6 {
    margin-left: -20px; /* 负值可以根据需要进行调整 */
}

按照我的理解改的，两个月使用下来没有发现 BUG

  • 思源笔记

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

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

    23014 引用 • 92567 回帖
  • 代码
    467 引用 • 586 回帖 • 9 关注
  • Q&A

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

    8447 引用 • 38478 回帖 • 155 关注
1 引用
[css] [js] 思源笔记用到现在积累的所有代码片段 • JeffreyChen
4 操作
JeffreyChen 在 2023-11-22 12:30:05 更新了该帖
JeffreyChen 在 2023-09-15 21:58:10 更新了该帖
JeffreyChen 在 2023-09-15 14:54:54 更新了该帖
JeffreyChen 在 2023-09-15 12:32:54 更新了该帖
50 悬赏
1 赞同
1 引用
4 操作
6 回帖
3
3
782 210 17 449 15 9 79

相关帖子

被采纳的回答
  • zxhd86 • • 1
    订阅者 先知

    回来测试了一下，列表块没影响，嵌入、超级、引述会有影响：

    图片.png

    改成这样就行了：

    /* 移动标题位置 CSS片段 */
.b3-typography>.h1,
.b3-typography>h1,
.b3-typography>.h2,
.b3-typography>h2,
.b3-typography>.h3,
.b3-typography>h3,
.b3-typography>.h4,
.b3-typography>h4,
.b3-typography>.h5,
.b3-typography>h5,
.b3-typography>.h6,
.b3-typography>h6,
.protyle-wysiwyg>.h1,
.protyle-wysiwyg>h1,
.protyle-wysiwyg>.h2,
.protyle-wysiwyg>h2,
.protyle-wysiwyg>.h3,
.protyle-wysiwyg>h3,
.protyle-wysiwyg>.h4,
.protyle-wysiwyg>h4,
.protyle-wysiwyg>.h5,
.protyle-wysiwyg>h5,
.protyle-wysiwyg>.h6,
.protyle-wysiwyg>h6 {
    margin-left: -20px; /* 负值可以根据需要进行调整 */
}
6 回帖
【代码片段】突出标题

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • zxhd86 • • 1 • 1 评论
    订阅者 先知

    回来测试了一下，列表块没影响，嵌入、超级、引述会有影响：

    图片.png

    改成这样就行了：

    /* 移动标题位置 CSS片段 */
.b3-typography>.h1,
.b3-typography>h1,
.b3-typography>.h2,
.b3-typography>h2,
.b3-typography>.h3,
.b3-typography>h3,
.b3-typography>.h4,
.b3-typography>h4,
.b3-typography>.h5,
.b3-typography>h5,
.b3-typography>.h6,
.b3-typography>h6,
.protyle-wysiwyg>.h1,
.protyle-wysiwyg>h1,
.protyle-wysiwyg>.h2,
.protyle-wysiwyg>h2,
.protyle-wysiwyg>.h3,
.protyle-wysiwyg>h3,
.protyle-wysiwyg>.h4,
.protyle-wysiwyg>h4,
.protyle-wysiwyg>.h5,
.protyle-wysiwyg>h5,
.protyle-wysiwyg>.h6,
.protyle-wysiwyg>h6 {
    margin-left: -20px; /* 负值可以根据需要进行调整 */
}
    另外.protyle-wysiwyg>h6 这种其实是多余的，思源并没有使用<h>标签，不过我懒得删了
    zxhd86 • • 1 赞同
  • 其他回帖
  • JeffreyChen •
    付费者 支持者 捐赠者 作者

    我现在用这个：

    /* 移动标题位置 CSS片段 */
.b3-typography .h1,
.b3-typography h1,
.b3-typography .h2,
.b3-typography h2,
.b3-typography .h3,
.b3-typography h3,
.b3-typography .h4,
.b3-typography h4,
.b3-typography .h5,
.b3-typography h5,
.b3-typography .h6,
.b3-typography h6,
.protyle-wysiwyg .h1,
.protyle-wysiwyg h1,
.protyle-wysiwyg .h2,
.protyle-wysiwyg h2,
.protyle-wysiwyg .h3,
.protyle-wysiwyg h3,
.protyle-wysiwyg .h4,
.protyle-wysiwyg h4,
.protyle-wysiwyg .h5,
.protyle-wysiwyg h5,
.protyle-wysiwyg .h6,
.protyle-wysiwyg h6 {
    margin-left: -20px; /* 负值可以根据需要进行调整 */
}
    1 回复
  • JeffreyChen •
    付费者 支持者 捐赠者 作者

    我才刚刚自己写好，就看到你回答了。

    不过这个代码不起作用，移动的是文档标题。

  • JeffreyChen •
    付费者 支持者 捐赠者 作者

    顶一顶

  • 查看全部回帖
JeffreyChen
思源是支持 Markdown 语法输入的块编辑器，不是 Markdown 文件编辑器； 思源笔记同步教程：ld246.com/article/1692089679062
回帖
6466
 帖子
131
 积分
3996

近期热议

推荐标签 标签

  • 996

    “工作 996， 生病 ICU”

    13 引用 • 200 回帖 • 11 关注
  • Q&A

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

    8447 引用 • 38477 回帖 • 154 关注
  • danl
    • 146 关注
  • 笔记

    好记性不如烂笔头。

    308 引用 • 793 回帖
  • 禅道

    禅道是一款国产的开源项目管理软件，她的核心管理思想基于敏捷方法 scrum，内置了产品管理和项目管理，同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能，在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来，完整地覆盖了项目管理的核心流程。

    5 引用 • 15 回帖 • 102 关注
  • V2Ray
    1 引用 • 15 回帖 • 1 关注
  • SpaceVim

    SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合，以模块的方式组织管理插件以
    及相关配置，为不同的语言开发量身定制了相关的开发模块，该模块提供代码自动补全，
    语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
    即用的 Vim-IDE。

    3 引用 • 31 回帖 • 105 关注
  • 安装

    你若安好，便是晴天。

    132 引用 • 1184 回帖 • 1 关注
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    209 引用 • 358 回帖 • 1 关注
  • 爬虫

    网络爬虫（Spider、Crawler），是一种按照一定的规则，自动地抓取万维网信息的程序。

    106 引用 • 275 回帖 • 1 关注
  • Sandbox

    如果帖子标签含有 Sandbox ，则该帖子会被视为“测试帖”，主要用于测试社区功能，排查 bug 等，该标签下内容不定期进行清理。

    409 引用 • 1246 回帖 • 587 关注
  • Ubuntu

    Ubuntu（友帮拓、优般图、乌班图）是一个以桌面应用为主的 Linux 操作系统，其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词，意思是“人性”、“我的存在是因为大家的存在”，是非洲传统的一种价值观，类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    126 引用 • 169 回帖
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言，内置支持类型。它的解释器被称为 JavaScript 引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTML 网页上使用，用来给 HTML 网页增加动态功能。

    728 引用 • 1273 回帖 • 1 关注
  • 面试

    面试造航母，上班拧螺丝。多面试，少加班。

    325 引用 • 1395 回帖 • 1 关注
  • Notion

    Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

    7 引用 • 40 回帖
  • TensorFlow

    TensorFlow 是一个采用数据流图（data flow graphs），用于数值计算的开源软件库。节点（Nodes）在图中表示数学操作，图中的线（edges）则表示在节点间相互联系的多维数据数组，即张量（tensor）。

    20 引用 • 19 回帖 • 1 关注
  • 创造

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

    178 引用 • 997 回帖
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    71 引用 • 535 回帖 • 789 关注
  • 酷鸟浏览器

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

    3 引用 • 59 回帖 • 26 关注
  • 七牛云

    七牛云是国内领先的企业级公有云服务商，致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景，七牛先后推出了对象存储，融合 CDN 加速，数据通用处理，内容反垃圾服务，以及直播云服务等。

    27 引用 • 225 回帖 • 163 关注
  • 新人

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

    52 引用 • 228 回帖
  • Markdown

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

    167 引用 • 1520 回帖
  • ZooKeeper

    ZooKeeper 是一个分布式的，开放源码的分布式应用程序协调服务，是 Google 的 Chubby 一个开源的实现，是 Hadoop 和 HBase 的重要组件。它是一个为分布式应用提供一致性服务的软件，提供的功能包括：配置维护、域名服务、分布式同步、组服务等。

    59 引用 • 29 回帖 • 14 关注
  • Webswing

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

    1 引用 • 15 回帖 • 637 关注
  • Sillot

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

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

    主仓库地址：Hi-Windom/Sillot

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

    注意事项：

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

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

    2 引用 • 76 关注
  • VirtualBox

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

    10 引用 • 2 回帖

最新标签