Typora设置代码块Mac风格三个圆点
写作不停,美化不止!
mac小圆点效果
原本代码块样式就挺....干净的,光秃秃的,太单调了:
是吧很丑,于是自己发挥改成了这样:
好吧还是太单调,也没好看到哪里去,于是隔了两天又重新改,DuangDuangDuang!!
改成了自己想要的样子,主要的就是喜欢这个mac的三个小圆点,very nice!!写作欲望停不下来了我屮艸芔茻。
设置思路
提供下思路,如上图,typora通过控制台定位到代码块的元素,找到所有代码块通用的class(应主题而变),这个class就是给代码块设置样式的
那么将下面的代码类名改成相应的,放到css主题文件中即可
可能还需要进行一定的调整,稍微的有点繁琐
.box{
position: relative;
padding:40px 20px 20px;
}
.box::before {
content: '';
position: absolute;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #fc625d;
width: 12px;
height: 12px;
left: 12px;
-webkit-box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
z-index: 2;
}
上边代码就是将box(代码块编译后对应的元素)设置成相对布局,然后三个点是其子元素,设置成绝对布局,就是子绝父相,再是子元素设置成伪元素,插入在box的最前边,然后通过box-shadow阴影颜色设置,妙极了,高效率的思想值得学习!
设置后图标不显示可以将z-index属性适当调整,可以top,left适当调整.......
如果嫌麻烦可以直接是用我使用的主题,拿来即用,主题下载地址看我之间这篇文章:https://www.cnblogs.com/ruyan-lx/p/16807951.html
参考:
https://www.cnblogs.com/lavard/p/15240742.html
https://wenku.baidu.com/view/81431fd8cbd376eeaeaad1f34693daef5ef713cd.html
Typora设置代码块Mac风格三个圆点的更多相关文章
- Typora 修改代码块高亮样式
目录 方法一:下载自己喜欢的样式 方法二:获取Typora自制主题 方法三:自己撰写css样式文件 方法一:下载自己喜欢的样式 Typora的代码块语法高亮使用的是CodeMirror实现的,所以需要 ...
- idea设置代码块
转:https://blog.csdn.net/boy_Kenny/article/details/55223078?utm_source=blogxgwz4 idea设置代码块 1.代码模板场景介绍 ...
- Typora markdown代码块显示序号
打开偏好设置,找到代码块 打开显示行号 然后关闭Typora重新打开 此时代码块就有行号了
- Android Studio 中设置代码块自动补齐
AS中很多提示键,并不如Eclipse中做的好,需要我们自己去自定义.这里以switch...case为例,讲解一下如何设置代码自动补全. 1.进入settings --> Editor -- ...
- ios开发xcode中设置代码块
在开发中有很多重复的代码,很多开发者把常用的代码做成代码块提高开发效率. 在xcode里选中代码块的时候总是很不容易,点击选中的代码(文字),不要移动和松开鼠标左键,当竖线变成像拉长了的x(我也不知道 ...
- MyEclipse中设置代码块快捷键
如果想用快捷键生成一段自定义代码,可以通过下面方式设置: Java->Editor->Templates->New 如果要设置或者更改某个快捷键,如要设置保存全部文档的快捷键(系统默 ...
- 问题008:java 中代码块的风格有几种?单行注释可否嵌套?多行注释可否嵌套?
有两种:一种是次行风格,英文称为next-line 一种是是行尾风格,英文称为 end-of-line 举例 行尾风格 public class HelloWorld{ public static v ...
- vscode设置代码块
需要注意一点是,内容主体里面带有缩进的地方不能用 Tab,只能用空格
- phpstorm设置代码块快捷方式
File -> Settings -> Live Templates
随机推荐
- SpringBoot的创建和特性
一.SpringBoot的特点 创建独立的Spring应用程序 直接嵌入Tomcat.Jetty或Undertow(无需部署WAR文件) 提供自以为是的"starter"依赖项,以 ...
- Http 前端向后端传递List参数
场景 在日常项目开发中,前端向后端传参时,可能会遇到需要传 List 类型的参数.比如批量删除时将多个 ID 以集合的形式传给后台. 前端传参 此时前端传参有两种方式: 1.多个同名 key key ...
- a 标签 rel 属性值 opener 的作用
<a> 元素,原英文单词为 anchor 的缩写,所以又称之为锚点元素.锚点元素的 href 属性用来创建通向其他网页.文件.同一页面内的位置.电子邮件地址或任何其他 URL 的超链接. ...
- 快速创建springboot项目,并进行增删改
创建普通maven项目,pom依赖如下 <parent> <artifactId>spring-boot-starter-parent</artifactId> & ...
- Taurus.MVC 微服务框架 入门开发教程:项目集成:4、默认安全认证与自定义安全认证。
系列目录: 本系列分为项目集成.项目部署.架构演进三个方向,后续会根据情况调整文章目录. 本系列第一篇:Taurus.MVC V3.0.3 微服务开源框架发布:让.NET 架构在大并发的演进过程更简单 ...
- Javaweb__Jquery
今日内容 1. JQuery 基础: 1. 概念 2. 快速入门 3. JQuery对象和JS对象区别与转换 4. 选择器 5. DOM操作 6. 案例 JQuery 基础: 1. 概念: 一个Jav ...
- KDB_Database_Link 使用介绍
kdb_database_link 是 KingbaseES 为了兼容oracle 语法而开发的跨数据库访问扩展,可用于访问KingbaseES, Postgresql , Oracle .以下分别介 ...
- Springboot log4j2总结
Log4j2 PS: Log4j 已不再维护,而最新的是Log4j2, Log4j2 是全部重写了Log4j,并拥有更加优秀的性能 1. 引入依赖,和去掉logging的依赖 <dependen ...
- 操作系统学习笔记10 | I/O、显示器与键盘
从这一部分开始介绍操作系统的设备驱动,操作系统通过文件系统的抽象驱动设备让用户能够使用显示器.键盘等交互工具.并讲解printf和scanf是如何实现敲下键盘将字符显示到屏幕上的. 参考资料: 课程: ...
- setw()
setw() 头文件是 #include<iomanip> setw(2)是下一个数据输出宽度为2,超过2则以实际输出为准,不足2补空格.仅对下一个数据的输出有效,即只有一次效果.(set ...