Markdown 样式大全

1. 键盘

A

  1. <kbd>Backspace</kbd>

2. 路径

/usr/local/nginx/sbin/nginx

  1. <span style="color:#4185c4;">/usr/local/nginx/sbin/nginx</span>

3. 彩色字体背景

Nginx is not running !

  1. <b style="color:red;">Nginx&nbsp;is&nbsp;not&nbsp;running&nbsp;!</b>

Nginx is running !

  1. <b style="color:green;">Nginx&nbsp;is&nbsp;running&nbsp;!</b>

 Nginx is running ! 

  1. <b style="background-color:green;color:white;"> Nginx is running ! </b>

4. 折叠

展开查看内容

这是展开后的内容。

  1. <details>
  2. <summary>展开查看内容</summary>
  3. 这是展开后的内容。
  4. </details>

5. 锚点链接

在 Typora 中,按住Ctrl+鼠标左键 进行跳转。

  • Markdown 原始写法 [名称](#id)

    原生锚点1

    原生锚点2

    跳转到原生锚点1

    跳转到原生锚点2

    1. ### 原生锚点1
    2. ### 原生锚点2
    3. [跳转到原生锚点1](#原生锚点1)
    4. [跳转到原生锚点2](#原生锚点2)

    如果有重复的标题,从 开始添加编号后缀-1,例如:

    Hello

    ...

    Hello

    ...

    A link to first header, a link to second one.

    1. # Hello
    2. ...
    3. # Hello
    4. ...
    5. A [link](#hello-1) to first header, a [link](#hello-2) to second one.
  • HTML 语法 <a href="#id">名称</a>

    titleA

    titleB

    to titleA

    to titleA

    1. <h3 id="titleA">titleA</h3><h3 id="titleB">titleB</h3>[to titleA](#titleA)[to titleA](#titleB)

6. 待办列表

    • [ ] 记得找个女朋友
    • [ ] 天凉了,记得加衣喔
      • [x] 今日份单词打卡
      • [x] 了解tree shaking和dce
  1. 1. - [ ] 记得找个女朋友2. - [ ] 天凉了,记得加衣喔 1. - [x] 今日份单词打卡 2. - [x] 了解tree shakingdce

7. 脚注

你好[1]

  1. 你好[^脚注][^脚注]: 这是一个脚注

8.自定义列表

  1. Credits: John: MikeUI Designer: Xiao Ming

Typora 暂不支持。

9. 复杂表格

Markdown 绝大多数编辑器都是支持 html 语言,Markdown 本身不支持复杂的表格,所以使用 html 来编辑即可。

  • 使用跨行或者跨列时,使用 th 标签
  • 跨行: rowspan 的的参数就是要跨的行数
  • 跨列: colspan 的参数就是要跨的列数
真实情况 预测结果
正例 反例
正例 TP(真正例) FN(假反例)
反例 FP(假正例) TN(真反例)
  1. <table align="center">
  2. <tr>
  3. <th rowspan="2">真实情况</th>
  4. <th colspan="2">预测结果</th>
  5. </tr>
  6. <tr>
  7. <td>正例</td>
  8. <td>反例</td>
  9. </tr>
  10. <tr>
  11. <td>正例</td>
  12. <td>TP(真正例)</td>
  13. <td>FN(假反例)</td>
  14. </tr>
  15. <tr>
  16. <td>反例</td>
  17. <td>FP(假正例)</td>
  18. <td>TN(真反例)</td>
  19. </tr>
  20. </table>

10. 文本高亮

…… 海森堡在 1927 年首先提出 ……

  1. …… <mark>海森堡在 1927 年首先提出</mark> ……

注意:文档编写使用的是 Typora,部分效果博客园未支持。


  1. 这是一个脚注

Markdown 样式美化大全的更多相关文章

  1. css input checkbox复选框控件 样式美化的多种方案

    checkbox复选框可能是网站中常用的html元素,但大多数人并不满意它的默认样式,这篇文章就讲讲如何实现input checkbox复选框控件 样式美化效果. 资源网站大全 https://55w ...

  2. css input[type=file] 样式美化,input上传按钮美化

    css input[type=file] 样式美化,input上传按钮美化 参考:http://www.haorooms.com/post/css_input_uploadmh

  3. div仿checkbox表单样式美化及功能

    div仿checkbox表单样式美化及功能(checkbox的样式不好看)素材在底部: 效果图: window.css .bj { position: absolute; top: 0; left: ...

  4. input[type='file']样式美化及实现图片预览

    前言 上传图片是常见的需求,多使用input标签.本文主要介绍 input标签的样式美化 和 实现图片预览. 用到的知识点有: 1.input标签的使用 2.filelist对象 和 file对象 3 ...

  5. input type=file 上传文件样式美化(转载)

    input type=file 上传文件样式美化 来源:https://www.jianshu.com/p/6390595e5a36 在做input文本上传时,由于html原生的上传按钮比较丑,需要对 ...

  6. input file 文件上传标签的样式美化

    input file 文件上传标签的样式美化 将<input type="file">的透明度设置为0: <input type="file" ...

  7. 表单多文件上传样式美化 && 支持选中文件后删除相关项

    开发中会经常涉及到文件上传的需求,根据业务不同的需求,有不同的文件上传情况. 有简单的单文件上传,有多文件上传,因浏览器原生的文件上传样式及功能的支持度不算太高,很多时候我们会对样式进行美化,对功能进 ...

  8. html checkbox样式美化

    思路:使用label结合checkbox,背景图片进行美化. 原理: 1. for 属性规定 label 与哪个表单元素绑定,显式绑定和隐式绑定,均可实现checkbox的选用与取消效果,具体见:&l ...

  9. CSS样式整理大全

    转载自:http://www.cnblogs.com/laihuayan/archive/2012/07/27/2611111.html 字体属性:(font) 大小 {font-size: x-la ...

随机推荐

  1. python+selenium基础篇,文件上传

    1.百度查询图片,上传文件 2.实现代码如下: from selenium import webdriverfrom time import sleepdr=webdriver.Firefox()dr ...

  2. list 分批导入db, 每1000条数据一批 , 从字符串中获取数字,小数, 版本号比较

    //这个有个弊端: 分组后分批导入, 是阻塞的,我没有导入完成,别人就不能导入, 这里可以优化成异步,线程池 public static void main(String[] args) { Rand ...

  3. Redis 入门权威指北

    前言 看看业务遇到了什么问题? 我们要从互联网架构的演变之路开始说起Redis的前世今生. 在我们小的时候,网络世界好像就是只有通过大屁股台式机才能进入一样,彼时的手机只是用来打打电话,发发短信,网上 ...

  4. HTML基本标签及语法

    HTML简介 什么是HTML 本文素材来源于黑马程序员Pink老师 HTML 指的是超文本标记语言(Hyper Text Markup Language) ,它是用来描述网页的一种语言. HTML 不 ...

  5. k8s-记一次安全软件导致镜像加载失败

    近期在现场项目中遇到了一个镜像加载失败的问题,相关报错如下: Error processing tar file(exit status 1): symlink . /usr/bin/X11: per ...

  6. 代码实测:给redis中的key取一个正确的名字多么重要

    redis对写入的key长度有限制吗? 太长的key对性能有影响吗? key越长对性能影响越大? 如何评估键长度对性能的影响? talk is cheap, show me the code! 今天我 ...

  7. IDEA2020.2版本设置类和方法的自定义注释模板

    IDEA是目前普遍使用的Java开发编辑器,添加自定义的注释模板,一方面便捷好用,另外一方面可以规范开发.IDEA中设置模板分两种:1.创建Java类的注释,2.方法的注释. 一.Java类的注释模板 ...

  8. 『无为则无心』Python基础 — 5、Python开发工具的安装与使用

    目录 1.Pycharm下载 2.Pycharm安装 3.PyCharm界面介绍 4.基本使用 (1)新建Python项目 (2)编写Python代码 (3)执行代码查看结果 (4)设置PyCharm ...

  9. 宝,我今天CR了,C的什么R? 走过场的CR

    原创:猿天地(微信公众号ID:cxytiandi),欢迎分享,转载请保留出处. CodeReview我相信目前很多公司都会有这么一个流程,关键是这个流程有没有用就很难讲.主要还是取决于你对CR的理解以 ...

  10. Java安全之反序列化回显与内存马

    Java安全之反序列化回显与内存马 0x00 前言 按照我个人的理解来说其实只要能拿到Request 和 Response对象即可进行回显的构造,当然这也是众多方式的一种.也是目前用的较多的方式.比如 ...