markdown种嵌入html标签,实现自定义样式
转:https://www.cnblogs.com/buwuliao/p/9578918.html
-----------------------------------------------------------------------------------------------
MarkDown很方便,但基本语法有些不足:比如无法使用折叠语法,无法让文字有不同的颜色。
这些功能可以实现,不过需要使用Html语法进行扩展。这篇文章主要是整理一下这些技巧,方便更好的使用。
一、折叠语法:<details>
标签
1.1、代码:
<details>
<summary>点击时的区域标题:点击查看详细内容</summary>
<p> - 测试 测试测试</p>
<pre><code> title,value,callBack可以缺省 </code> </pre>
</details>
summary
:折叠语法展示的摘要
details
:折叠语法标签
pre
:以原有格式显示元素内的文字是已经格式化的文本。
blockcode
:表示程序的代码块。
code
:指定代码范例。
1.2、实际效果:
点击时的区域标题:点击查看详细内容
- 测试 测试测试
title,value,callBack可以缺省
二、其他HTML语法:
2.1 源码:
<span style='color:red'>This is red</span> //字体颜色
<ruby> 漢 <rt> ㄏㄢˋ </rt> </ruby> // 特殊字
<kbd>Ctrl</kbd>+<kbd>F9</kbd> // 按键标识
<span style="font-size:2rem; background:yellow;">**Bigger**</span> //字体大小和背景
<font face="微软雅黑" color="red" size="6">字体及字体颜色和大小</font>
<font color="#0000ff">字体颜色</font>
<p align="left">居左文本</p>
<p align="center">居中文本</p>
<p align="right">居右文本</p>
使用span
或者font
标签,同时用style
属性控制样式。
2.2 实际效果:
This is red
漢ㄏㄢˋ
Ctrl+F9
Bigger
字体及字体颜色和大小
字体颜色
居左文本
居中文本
居右文本
三、参考来源:
- markdown嵌入折叠标签 | 東引甌越 https://www.sunyazhou.com/2017/10/25/20171025markdown-skill/
- 让你的md文档可折叠化展示 · Issue #155 · iuap-design/blog https://github.com/iuap-design/blog/issues/155 (比上一个好点的感觉)
- HTML Support in Typora https://support.typora.io/HTML/#html-entities (其他的HTML语法和使用)
- Markdown的常用语法(个人总结) | ConnorLin's Blog http://connorlin.github.io/2016/05/06/Markdown%E7%9A%84%E5%B8%B8%E7%94%A8%E8%AF%AD%E6%B3%95(%E4%B8%AA%E4%BA%BA%E6%80%BB%E7%BB%93)/
markdown种嵌入html标签,实现自定义样式的更多相关文章
- 巧妙利用label标签实现input file上传文件自定义样式
提到上传文件,一般会想到用input file属性来实现,简单便捷,一行代码即可 但input file原生提供的默认样式大多情况下都不符合需求,且在不同浏览器上呈现的样式也不尽相同 我们往 ...
- H5 音频标签自定义样式修改以及添加播放控制事件
说明: 需求要求这个音频标签首先要是可适配移动端浏览器的,音频样式就是参考微信做的. 最终效果如下: 具体实现 思路: H5 的 <audio> 标签是由浏览器负责实现默认样式的.所以不同 ...
- H5 <audio> 音频标签自定义样式修改以及添加播放控制事件
H5 <audio> 音频标签自定义样式修改以及添加播放控制事件 Dandelion_drq 关注 2017.08.28 14:48* 字数 331 阅读 2902评论 3喜欢 3 说明: ...
- IIS 配置 FTP 网站 H5 音频标签自定义样式修改以及添加播放控制事件
IIS 配置 FTP 网站 在 服务器管理器 的 Web服务器IIS 上安装 FTP 服务 在 IIS管理器 添加FTP网站 配置防火墙规则 说明:服务器环境是Windows Server 200 ...
- WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式
一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: Che ...
- WPF自定义控件与样式(7)-列表控件DataGrid与ListView自定义样式
一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: Dat ...
- android自定义样式大全:shape,selector,layer-list,style,动画全部内容
原文:http://keeganlee.me/post/android/20150830 以下摘取了部分内容: shape 一般用shape定义的xml文件存放在drawable目录下,若项目没有该目 ...
- windows phone (12) 小试自定义样式
原文:windows phone (12) 小试自定义样式 样式在BS开发中经常用到,在wp中系统也提供了解决办法,就是对设置的样式的一种资源共享,首先是共享资源的位置,它是在App类中,之前我们已经 ...
- [置顶]
bootstrap自定义样式-bootstrap侧边导航栏的实现
前言 bootstrap自带的响应式导航栏是向下滑动的,有时满足不了个性化的需求,需要做一个类似于android drawerLayout 侧滑的菜单,这就是我要实现的bootstrap自定义侧滑菜单 ...
随机推荐
- centos 如何修改docker镜像和容器的默认存放路径
原因:通过df -h查看磁盘利用的时候,目前挂载的太小了,所以尝试挂载到其他地方 1 先看看默认存放的路径在哪儿 方法1:docker info 方法2:sudo docker info | grep ...
- webpack打包时候去掉console.log配置
new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false, drop_console: true,//console pure ...
- appium 弹窗处理
测试过程中遇到两类弹窗: 系统权限弹窗具体业务弹窗系统权限弹窗Android系统权限弹窗一般出现在安装 app 后首次打开,如:定位权限.电话权限等.我们可以按顺序执行测试用例,将该类操作放到 Ini ...
- 切换 Python2 Python3
sudo update-alternatives --install /usr/bin/python python /usr/bin/python2 100 sudo update-alternati ...
- Coursera,Udacity,Edx 课程列表(更新ing)
Coursera,Udacity,Edx 课程列表(更新ing) Coursera有很多特别好的课程,平时没有机会听到国外大牛的课程,通过Coursera算是可以弥补一下吧,国外的课程普遍比国内的老师 ...
- JAVA多态中的隐藏和覆盖
Java的引用变量有两个类型,一个是编译时类型,一个是运行时类型 编译时类型:由声明该变量时使用的类型决定 运行时类型:由该变量指向的对象类型决定 如果编译时类型和运行时类型不一致,会出现所谓的多态. ...
- Zabbix案例实践|Zabbix屏蔽告警
近期项目中,客户要求在凌晨00:00到02:00的CPU屏蔽虚拟化监控上ESXI的红色告警,红色告警是由于某台vmCPU利用率过高而产生的.做法如下:1. 找到红色告警的触发器,通过触发器找到监控项, ...
- 29 匿名内部类、函数型接口、lamda表达式的引入
匿名内部类 参考:https://www.runoob.com/w3cnote/java-inner-class-intro.html 进入后搜索匿名内部类. 函数型接口 函数式接口(Function ...
- Django-model更上层楼
一 QuerySet对象 1.1可切片 使用Python 的切片语法来限制查询集记录的数目 .它等同于SQL 的LIMIT 和OFFSET子句. Entry.objects.all()[:5] # ( ...
- jwt 0.9.0(二)jwt官网资料总结
1.JWT描述 Jwt token由Header.Payload.Signature三部分组成,这三部分之间以小数点”.”连接,JWT token长这样: eyJhbGciOiJIUzI1NiIsIn ...