写作不停,美化不止!

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风格三个圆点的更多相关文章

  1. Typora 修改代码块高亮样式

    目录 方法一:下载自己喜欢的样式 方法二:获取Typora自制主题 方法三:自己撰写css样式文件 方法一:下载自己喜欢的样式 Typora的代码块语法高亮使用的是CodeMirror实现的,所以需要 ...

  2. idea设置代码块

    转:https://blog.csdn.net/boy_Kenny/article/details/55223078?utm_source=blogxgwz4 idea设置代码块 1.代码模板场景介绍 ...

  3. Typora markdown代码块显示序号

    打开偏好设置,找到代码块 打开显示行号 然后关闭Typora重新打开 此时代码块就有行号了

  4. Android Studio 中设置代码块自动补齐

    AS中很多提示键,并不如Eclipse中做的好,需要我们自己去自定义.这里以switch...case为例,讲解一下如何设置代码自动补全. 1.进入settings -->  Editor -- ...

  5. ios开发xcode中设置代码块

    在开发中有很多重复的代码,很多开发者把常用的代码做成代码块提高开发效率. 在xcode里选中代码块的时候总是很不容易,点击选中的代码(文字),不要移动和松开鼠标左键,当竖线变成像拉长了的x(我也不知道 ...

  6. MyEclipse中设置代码块快捷键

    如果想用快捷键生成一段自定义代码,可以通过下面方式设置: Java->Editor->Templates->New 如果要设置或者更改某个快捷键,如要设置保存全部文档的快捷键(系统默 ...

  7. 问题008:java 中代码块的风格有几种?单行注释可否嵌套?多行注释可否嵌套?

    有两种:一种是次行风格,英文称为next-line 一种是是行尾风格,英文称为 end-of-line 举例 行尾风格 public class HelloWorld{ public static v ...

  8. vscode设置代码块

    需要注意一点是,内容主体里面带有缩进的地方不能用 Tab,只能用空格

  9. phpstorm设置代码块快捷方式

    File -> Settings -> Live Templates

随机推荐

  1. SpringBoot的创建和特性

    一.SpringBoot的特点 创建独立的Spring应用程序 直接嵌入Tomcat.Jetty或Undertow(无需部署WAR文件) 提供自以为是的"starter"依赖项,以 ...

  2. Http 前端向后端传递List参数

    场景 在日常项目开发中,前端向后端传参时,可能会遇到需要传 List 类型的参数.比如批量删除时将多个 ID 以集合的形式传给后台. 前端传参 此时前端传参有两种方式: 1.多个同名 key key ...

  3. a 标签 rel 属性值 opener 的作用

    <a> 元素,原英文单词为 anchor 的缩写,所以又称之为锚点元素.锚点元素的 href 属性用来创建通向其他网页.文件.同一页面内的位置.电子邮件地址或任何其他 URL 的超链接. ...

  4. 快速创建springboot项目,并进行增删改

    创建普通maven项目,pom依赖如下 <parent> <artifactId>spring-boot-starter-parent</artifactId> & ...

  5. Taurus.MVC 微服务框架 入门开发教程:项目集成:4、默认安全认证与自定义安全认证。

    系列目录: 本系列分为项目集成.项目部署.架构演进三个方向,后续会根据情况调整文章目录. 本系列第一篇:Taurus.MVC V3.0.3 微服务开源框架发布:让.NET 架构在大并发的演进过程更简单 ...

  6. Javaweb__Jquery

    今日内容 1. JQuery 基础: 1. 概念 2. 快速入门 3. JQuery对象和JS对象区别与转换 4. 选择器 5. DOM操作 6. 案例 JQuery 基础: 1. 概念: 一个Jav ...

  7. KDB_Database_Link 使用介绍

    kdb_database_link 是 KingbaseES 为了兼容oracle 语法而开发的跨数据库访问扩展,可用于访问KingbaseES, Postgresql , Oracle .以下分别介 ...

  8. Springboot log4j2总结

    Log4j2 PS: Log4j 已不再维护,而最新的是Log4j2, Log4j2 是全部重写了Log4j,并拥有更加优秀的性能 1. 引入依赖,和去掉logging的依赖 <dependen ...

  9. 操作系统学习笔记10 | I/O、显示器与键盘

    从这一部分开始介绍操作系统的设备驱动,操作系统通过文件系统的抽象驱动设备让用户能够使用显示器.键盘等交互工具.并讲解printf和scanf是如何实现敲下键盘将字符显示到屏幕上的. 参考资料: 课程: ...

  10. setw()

    setw() 头文件是 #include<iomanip> setw(2)是下一个数据输出宽度为2,超过2则以实际输出为准,不足2补空格.仅对下一个数据的输出有效,即只有一次效果.(set ...