【MarkDown】使用Html样式和折叠语法
MarkDown很方便,但基本语法有些不足:比如无法使用折叠语法,无法让文字有不同的颜色。
这些功能可以实现,不过需要使用Html语法进行扩展。这篇文章主要是整理一下这些技巧,方便更好的使用。
一、折叠语法:<details>
标签
1.1、代码:
<details>
<summary>点击时的区域标题:点击查看详细内容</summary>
<p> - 测试 测试测试</p>
<pre><code> title,value,callBack可以缺省 </code> </pre>
</details>
<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 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样式和折叠语法的更多相关文章
- Markdown_04_折叠语法
目录 一.折叠语法 参考资料 一.折叠语法 主要使用的是 html5的 details标签 (1)示例如下: <details> <summary>折叠文本</summa ...
- MarkDown折叠语法
1.语法代码 程序员的本质 程序的进阶和优化 1.简化人的操作,更少的代码做更多的事情 2.节省时间效率,在更短的时间内做更多的事情 3.占用内存,占更少的内存做更多的事情 <details&g ...
- markdown的css样式(自己写的)
markdown的css样式,这些是我自己配置的,感觉可以的话你可以添加下,不适合自己的话可以仿照第二种自己写个比较好的css样式. 第一种 /* RESET ==================== ...
- 【blog】Markdown的css样式推荐
参考博客 分享一款Markdown的css样式:https://www.cnblogs.com/zhangjk1993/p/5442676.html 美化Markdown输出的HTML文档:http: ...
- 转 .md即markdown文件的基本常用编写语法(图文并茂)
原文链接:.md即markdown文件的基本常用编写语法(图文并茂) 序言: 很久没有写博客了,感觉只要是不写博客,人就很变得很懒,学的知识点感觉还是记不住,渐渐地让我明白,看的越多,懂的越少(你这话 ...
- .md 即 markdown 文件的基本常用编写语法
0. 前言 Markdown 是一种纯文本格式的标记语言.通过简单的标记语法,它可以使普通文本内容具有一定的格式.现在的项目都使用了 git 仓库,再加上远程仓库 github 托管,那就难免要写一些 ...
- markdown的流程图实现和代码语法着色
用flowchart为markdown添加流程图 举个例子如下,根据这个例子大家就能看懂我到底是怎么实现的 <!DOCTYPE html> <html> <head> ...
- [Markdown]纯文本标记语言MarkdowPad2--MD语法知识
##1.标题 代码 注:# 后面保持空格 # h1 ## h2 ### h3 #### h4 ##### h5 ###### h6 ####### h7 // 错误代码 ######## h8 // ...
- Markdown温故知新(4):更多扩展语法及HTML
1.强调(删除 & 高亮) 2.脚注(注脚) 3.数学公式 4.更多扩展语法 5.终极扩展之内嵌 HTML 5.1.文本修饰类标签 5.2.内容排版类标签 5.3.图片及多媒体标签 5.4.锚 ...
随机推荐
- Excel去除单元格中的汉字
Alt+F11,插入,模块 Function RemoveChinese(rng As Range) s = Len(rng.Text) For i = 1 To s txt = StrConv(Mi ...
- SSL and SSL Certificates Explained
Secure Sockets Layer (SSL) and Transport Layer security (TLS ) are protocols that provide secure com ...
- php安全处理
1.php.ini 修改 open_basedir='d:\wwwroot' //配置只能访问指定的网站目录 2.php.ini 修改 disable_funcitons=system,passthr ...
- unity, access scene ambient
lighting面板里设置的ambient color,在shader里访问是通过UNITY_LIGHTMODEL_AMBIENT这个变量. 它定义在UnityShaderVariables.cgin ...
- C# LDAP
Lightweight Directory Access Protocol OpenLDAP
- atitit。html css框架Bootstrap Foundation的比较与不同 attilax大总结
atitit.html css框架Bootstrap Foundation的比较与不同 attilax大总结 1. Bootstrap Foundation的比较与不同1 2. Bootstrap ...
- hdu 3304 Interesting Yang Yui Triangle
hdu 3304 Interesting Yang Yui Triangle 题意: 给出P,N,问第N行的斐波那契数模P不等于0的有多少个? 限制: P < 1000,N <= 10^9 ...
- flink on yarn 用户代码获取keytab本地文件和principal的方法
flink on yarn的情况下配置的keytab文件会根据每次yarn application 分配taskmanager的变化都是不一样的,在部分场景下用户代码也需要获得keytab文件在yar ...
- csu-1328 近似回文词 和 最长回文字符串
原博文地址:http://blog.csdn.net/u012773338/article/details/39857997 最长回文子串 描述:输入一个字符串,求出其中最长的回文子串.子串的含义是: ...
- 【转】Apache虚拟主机的配置和泛解析域名的绑定
基于IP地址的虚拟主机配置 Listen 80 DocumentRoot /www/example1 ServerName www.example1.com DocumentRoot /www/exa ...
- 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)/
目录 一.折叠语法 参考资料 一.折叠语法 主要使用的是 html5的 details标签 (1)示例如下: <details> <summary>折叠文本</summa ...
1.语法代码 程序员的本质 程序的进阶和优化 1.简化人的操作,更少的代码做更多的事情 2.节省时间效率,在更短的时间内做更多的事情 3.占用内存,占更少的内存做更多的事情 <details&g ...
markdown的css样式,这些是我自己配置的,感觉可以的话你可以添加下,不适合自己的话可以仿照第二种自己写个比较好的css样式. 第一种 /* RESET ==================== ...
参考博客 分享一款Markdown的css样式:https://www.cnblogs.com/zhangjk1993/p/5442676.html 美化Markdown输出的HTML文档:http: ...
原文链接:.md即markdown文件的基本常用编写语法(图文并茂) 序言: 很久没有写博客了,感觉只要是不写博客,人就很变得很懒,学的知识点感觉还是记不住,渐渐地让我明白,看的越多,懂的越少(你这话 ...
0. 前言 Markdown 是一种纯文本格式的标记语言.通过简单的标记语法,它可以使普通文本内容具有一定的格式.现在的项目都使用了 git 仓库,再加上远程仓库 github 托管,那就难免要写一些 ...
用flowchart为markdown添加流程图 举个例子如下,根据这个例子大家就能看懂我到底是怎么实现的 <!DOCTYPE html> <html> <head> ...
##1.标题 代码 注:# 后面保持空格 # h1 ## h2 ### h3 #### h4 ##### h5 ###### h6 ####### h7 // 错误代码 ######## h8 // ...
1.强调(删除 & 高亮) 2.脚注(注脚) 3.数学公式 4.更多扩展语法 5.终极扩展之内嵌 HTML 5.1.文本修饰类标签 5.2.内容排版类标签 5.3.图片及多媒体标签 5.4.锚 ...
Alt+F11,插入,模块 Function RemoveChinese(rng As Range) s = Len(rng.Text) For i = 1 To s txt = StrConv(Mi ...
Secure Sockets Layer (SSL) and Transport Layer security (TLS ) are protocols that provide secure com ...
1.php.ini 修改 open_basedir='d:\wwwroot' //配置只能访问指定的网站目录 2.php.ini 修改 disable_funcitons=system,passthr ...
lighting面板里设置的ambient color,在shader里访问是通过UNITY_LIGHTMODEL_AMBIENT这个变量. 它定义在UnityShaderVariables.cgin ...
Lightweight Directory Access Protocol OpenLDAP
atitit.html css框架Bootstrap Foundation的比较与不同 attilax大总结 1. Bootstrap Foundation的比较与不同1 2. Bootstrap ...
hdu 3304 Interesting Yang Yui Triangle 题意: 给出P,N,问第N行的斐波那契数模P不等于0的有多少个? 限制: P < 1000,N <= 10^9 ...
flink on yarn的情况下配置的keytab文件会根据每次yarn application 分配taskmanager的变化都是不一样的,在部分场景下用户代码也需要获得keytab文件在yar ...
原博文地址:http://blog.csdn.net/u012773338/article/details/39857997 最长回文子串 描述:输入一个字符串,求出其中最长的回文子串.子串的含义是: ...
基于IP地址的虚拟主机配置 Listen 80 DocumentRoot /www/example1 ServerName www.example1.com DocumentRoot /www/exa ...