Markdown自定义CSS样式
前言
当我第一次接触到Markdown时,我就深深爱上了它。这简洁的界面,编程式的书写都令我爱不释手,最重要的是,还能够支持自定义html、css。
自定义CSS样式
说到Markdown,就不得不提及Typora这个软件,本例子即是在此软件的环境下完成。想要自定义CSS,首先得有一定的htm,css基础。
1.寻找Typora的主题CSS文件
确认typora软件用的主题
文件 -> 外观 -> 打开主题文件 -> 找到对应的css文件,因为我用的主题是Night,所以我应该找night.css
2.新建主题名.user.css
文件
新建一个night.user.css文件,在里面编写自己的css,从上图中可看到我已经创建好了,记住,用的什么主题,就新建对应的css文件(主题名.user.css)。在编写文章时,主题名.user.css文件中的样式优先级会更高。
比如在文件中添加一行css:
// 全局文字为绿色
span {color: green;
}
效果如下:
图片居中且添加图注
当我们在Typora上插入图片,图片是自动居中的,这是Typora内置的设置,但如果查阅文章的源码,发现其实并没做处理,如果直接复制粘贴源代码到其他平台发布,图片是默认左对齐。
如何使图片居中?
Markdown支持内嵌html、css代码。只需要会一点这方面的知识,就能够实现居中,甚至可以充分自定义文章的样式。
在Markdown中插入图片的默认格式如下:
![图片描述](图片链接)
提取图片链接,放到以下代码中,将代码直接粘贴到编辑区,即可实现图片居中:
<div align="center"><img src="图片链接">
</div>
如果想添加图注,可以这样写:
<div align="center"><img src="图片链接"><p>图注</p>
</div>
比如你看上面的图片都是向左对齐(除了分辨率高占满全屏的图片),引用这个方式之后就居中了↓
我居中了!
如果还不满意,自定义这些css吧。
结合讨论
通过以上两个实验,可以知道能够精细化定义css样式,我们在文本中添加html代码,自定义类选择器或ID选择器,然后在全局css文件中编写选择器样式,即可像web一样做出很多优美的定制化样式。
Markdown自定义CSS样式相关推荐
- 自定义css样式美化博客园
写在前面 csdn的markdown放到博客园里感觉风格迥异,所以还是找个好点的css吧,css这个我没有深入了解,拼凑了一个css.对于有python代码,而且需要自动生成目录的博文很有帮助,其他的 ...
- Layui自定义css样式
Layui自定义css样式 一般原始的样式并不满足开发需求,那么如何自定义layui 样式呢? <style>body {background-color: #009688;color: ...
- Java使用QQ邮箱或网易163邮箱发送自定义CSS样式邮件
Java使用QQ邮箱或网易163邮箱发送自定义CSS样式邮件 前言 一.战前准备 1.导入依赖 2.配置文件 3.邮箱工具类 二.战争开始 1.QQ邮箱发送 2.网易邮箱发送 战后反思 前言 我们可能 ...
- 一键换肤 自定义css样式实现
在项目中有很多时候都有一键换肤的需求.刚好接了这样的一个需求,就把过程记录下来. 我用了自定义css来实现. 创建皮肤样式文件 定义css样式名称 样式名称必须是以 – 开头 文件内引用皮肤样式 设置 ...
- 分享一款Markdown的css样式
使用 本样式在这个样式的基础上做了一些修改, 主要是对于表格和代码块以及一些细节的修改. 主要目的是用在chrome的扩展 Markdown Preview Plus中, 替换其内置的样式. 由于 M ...
- extjs 添加css样式_ExtJS自定义css样式
[ 1.使用工具: <1>Firebug: 能方便得出页面中各个元素的css标记名: (1) Firebug 的下载.安装: ...
- 自定义css样式结合js控制audio做音乐播放器
最近工作需求需要播放预览一些音乐资源,所以自己写了个控制audio的音乐播放器. 实现的原理主要是通过js调整audio的对象属性及对象方法来进行控制: 1.通过play().pause()来控制音乐 ...
- 解决Vue用v-html、v-text渲染后台富文本框文本内容样式修改问题,用自定义css样式无法渲染出对应效果的问题
举例: 如果您要加载富文本框内容的DOM id是detail 那么就这么写scss样式 #detail {font-size: 14px;text-align: center;&>> ...
- Echarts tooltip 自定义 css 样式 带小三角的背景样式
var geoCoordMap = { '上海': [121.4648,31.2891], '东莞': [113.8953,22.901], '东营': [118.7073,3 ...
- [JS]JS模拟Alert弹出框效果--自定义CSS样式
function alertMsg(msg, mode) { //mode为空,即只有一个确认按钮,mode为1时有确认和取消两个按钮msg = msg || '';mode = mode || 0; ...
最新文章
- Android RecyclerView 基本使用
- -bash: jps: command not found
- 【网络协议】TCP中的四大定时器
- ASP.NET Core 中的 ORM 之 Dapper
- C# Task 循环任务_C# Task.Run调用外部参数
- Python自动化运维之15、网络编程之socket、socketserver、select、twisted
- matlab实现均衡变换,MATLAB如何实现图像增强灰度变换直方图均衡匹配
- 【年度重磅】《2021营销自动化应用基准报告》正式发布!
- 格林时间转yyyy-MM-dd hh:mm:ss
- 《精通开关电源设计》笔记
- GBK编码和UTF-8编码区别各所占用字节数
- Python语言实现用于动物分类的产生式系统
- 指纹识别综述(11): 专利
- APS高级排程在钣金冲压行业的应用
- 手机端微信突然弹出电脑端已登录,是什么原因?
- 录屏储存失败因为5823_为什么屏幕录制失败因为5823
- 用计算机的声音编辑工具录制一段语音信号,语音信号的频谱分析实验指导
- Java调试大法,来了~
- Java 在Excel单元格中应用一种/多种字体样式
- 核与线程 CPU 4核8线程 的解释
热门文章
- 通过chrome的拓展程序访问其他网页
- 文件系统 83 linux,Linux文件系统
- MySQL(11)-----多表创建及描述表关系(多对多的分析和实现)
- 第三视角Beta答辩总结
- 【vue】elementUI报错:_self.$scopedSlots.default is not a function
- mvn package时,报错A required class is missing: com/thoughtworks/xstream/io/HierarchicalStreamDriver...
- Canvas旋转元素
- CoreData的用法
- ubuntu 终端透明
- IOS - UITableView分批显示数据 实现点击加载更多