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自定义侧滑菜单 ...
随机推荐
- opengl读取灰度图生成三维地形并添加光照
转自:https://www.cnblogs.com/gucheng/p/10152889.html 准备第三方库 glew.freeglut.glm.opencv 准备一张灰度图 最终效果 代码如下 ...
- acme自动证书申请
安装acme.sh curl https://get.acme.sh | sh acme.sh默认安装到了当前家目录. [root@iZbp17hycbhnayg00ohec9Z ~]# ~/.acm ...
- vscode failed to excute git
将代码提交到github时 提示 “failed to excute git” 解决:配置git git config --global user.email "youremailid@ex ...
- Google深度学习开源框架TenseorFlow安装
Google近期发布了TensorFlow,考录到Google出品,必属精品,估计这玩意会火,不过火钳刘明已经来不及了 今天才想着安装来试试 TensorFlow官网:https://www.tens ...
- Spring Boot之从Spring Framework装配掌握SpringBoot自动装配
Spring Framework模式注解 模式注解是一种用于声明在应用中扮演“组件”角色的注解.如 Spring Framework 中的 @Repository 标注在任何类上 ,用于扮演仓储角色的 ...
- pom.xml文件导入了坐标,也没有报错,为什么还是没有相关的jar包的?
为什么会出现这样的错误呢?仔细想了想,赶紧去本地仓库看看jar也没有导入进来 解决问题的思路,就是把假的jar包文件删除掉,然后在IDEA上的坐标复制删除粘贴,IDEA就会重新导入jar包,这时就成功 ...
- 5. JDBC/ODBC服务器
Spark SQL也提供JDBC连接支持,这对于让商业智能(BI)工具连接到Spark集群上以及在多用户间共享一个集群的场景都非常有用.JDBC服务器作为一个独立的Spark驱动器程序运行,可以在多用 ...
- Pycharm专业版配置远程服务器并自动同步代码
一.使用场景 如果每次都在本机上面写代码,然后传到服务器上面,在服务器上面运行就太麻烦了.这样的方式十分繁琐,效率很低. 因此,希望可以像下面一样操作: 可以直接在本机上码代码 自动将代码同步到远程服 ...
- C#使用Selenium
介绍: Selenium 是一个用于Web应用程序测试的工具.Selenium测试直接运行在浏览器中,就像真正的用户在操作一样.支持的浏览器包括IE(7, 8, 9, 10, 11),Mozilla ...
- Android多线程操作,as快捷键笔记
Android studio 快捷键 cmd+p 快速查看该方法的参数定义 * * option + shift +上下 快速移动上下行 * * cmd + e 显示最近操作的文件 * * cmd + ...