Wangzf's Doc
post 2019-03-26 Markdown

RMarkdown、Rmd、Markdown

Markdown

Markdown 的维基百科1介绍是这样的：

Markdown是一种轻量级标记语言，创始人为约翰·格鲁伯。 它允许人们使用易读易写的纯文本格式编写文档， 然后转换成有效的XHTML（或者HTML）文档。 这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。

由于Markdown的轻量化、易读易写特性，并且对于图片， 图表、数学式都有支持，目前许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。如GitHub、Reddit、 Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、 简书等，甚至还能被用来撰写电子书。

TODO list

Markdown 的 To-Do List 的内容是由无序列表，复选框，图标几种功能的组合

  • 复选框(未选中)语法
# 未选中复选框列表

* [ ] todo item 1
* [ ] todo item 2
* [ ] todo item 3

  • 未选中复选框列表效果展示

    • todo item 1
    • todo item 2
    • todo item 3

  • 复选框(选中)语法

# 选中复选框列表

* [x] todo item 1
* [x] todo item 2
* [x] todo item 3

  • 选中复选框列表效果展示

    • todo item 1
    • todo item 2
    • todo item 3

上标、下标

上标、下标是一种文字的特殊写法，常用于化学式、数学公式、引用文字的脚注等。

Markdown 的原生语法不支持上、下标的写法。需要通过 html 标签实现此类效果。 在 Markdown 中，我们可以通过 <sub> 和 <sup> 标签来实现上标和下标

  • 语法示例
a<sup>2</sup> + b<sup>2</sup> =c<sup>2</sup>

  • 效果展示

    • a2 + b2 =c2

文档内引用

[text](#header-label)
[text](path)

脚注尾注

脚注和尾注都是对文章的补充说明。

  • 脚注通常与被注释内容出现在同一页，并位于该页面的最下方，一般用来解释专有名词、数据来源等
  • 尾注通常出现在文章的最后一页，写在文章全部正文之后，一般用来列明引用的文章列表等
  1. 添加引用的描述

要增加脚注/尾注，首先需要在文章的适当位置增加引用的描述

  • 脚注声明语法
[^引用ID]: 说明文字
  1. 引用部位添加引用注释

在需要增加引用标记的内容后面增加引用注释

  • 脚注引用注释语法
`[^引用ID]`
  1. 完整示例
<!-- 脚本引用 -->
- 这里是一个脚注[^脚注ID1]
- 这里是一个脚注[^脚注ID2]

<!-- 引用注释 -->
- [脚注ID1]: 此处是 **脚注** 的 *文本内容*
- [脚注ID2]: 此处是 **脚注** 的 *文本内容*
  • 这里是一个脚注2
  • 这里是一个脚注3

插入表情(Emogi)

  • 表情

    • :smile: => 😄
    • :joy: => 😂

  • 十二星座都可以

    • :aries: => ♈
    • :taurus: => ♉
    • :gemini: => ♊
    • :cancer: => ♋
    • :le\o => ♌
    • :virgo: => ♍
    • :libra: => ♎
    • :scorpius: => ♏
    • :sagittarius: => ♐
    • :capricorn: => ♑
    • :aquarius: => ♒
    • :pisces: => ♓
    • :ophiuchus: => ⛎
    • :six_pointed_star: => 🔯

  • 钟表时间

    • :clock930: => 🕤

  • 其他好用的

    • ✅
    • ✔️
    • ✖️
    • 🔲
    • ❗
    • ❌
    • ‼️
    • 🔗
    • ♻️
    • ❎
    • 🇨🇳
    • 🔍
    • :octocat:

插入视屏

  • HTML script
<div class="plyr__video-embed" id="player" width="100%">
  <iframe
    src="https://www.youtube.com/embed/bTqVqk7FSmY?origin=https://plyr.io&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1"
    allowfullscreen
    allowtransparency
    allow="autoplay"
    width="100%"
    height="400px"
  ></iframe>
</div>
  • 图片加视频连接
[![Machine Learning Meets Fashion](https://raw.githubusercontent.com/zalandoresearch/fashion-mnist/master/doc/img/ae143b2d.png)](https://youtu.be/RJudqel8DVA)

Machine Learning Meets Fashion

插入图片

  • markdown 方法
![text](/path/image.png)
  • html 方法
<image src="/path/image.png" width=100%>
<image src="/path/image.png" width=50%><image src="/path/image.png" width=50%>

生成目录

TOC

[TOC]

# Header 1

## Header 2

### Header 3

DocToc

npm install doctoc -g

cd project
doctoc file.md

blogdown

---
title: R Markdown 与 Rmd 与 Markdown 的测试
author: wangzf
date: '2022-03-26'
slug: rmarkdown-rmd-markdown
categories:
  - Markdown
tags:
  - note
output:
  blogdown::html_page:
    toc: true
    fig_width: 6
    dev: "svg"
---

html

<details><summary>Table of Contents</summary><p>

* [Header1-1](#header1-label)
* [Header1-2](#header2-label)
  - [Header2-1](##header2-1-label)
</p></details>

插入Note、Important

* method 1

***
**Note**
This is a note.
***

* method 2

> **_Note:_** 
> 
> The note content.

* method 3

<div class="warning" style='padding:0.1em; background-color:#E9D8FD; color:#69337A'>
<span>
<p style='margin-top:1em; text-align:center'>
<b>On the importance of sentence length</b></p>
<p style='margin-left:1em;'>
This is a note.<br><br>
This ia another note.
</p>
<p style='margin-bottom:1em; margin-right:1em; text-align:right; font-family:Georgia'> <b>- Gary Provost</b> <i>(100 Ways to Improve Your Writing, 1985)</i>
</p></span>
</div>

* method 3

| | |
|-|-|
|`NOTE` | This is a note.|

* method 4

|`NOTE` | This is a note.|
|-|-|

* method 5

| | |
|-|-|
|`NOTE` | This is a note.|

* method 6

<div class="warning" style='background-color:#E9D8FD; color: #69337A; border-left: solid #805AD5 4px; border-radius: 4px; padding:0.7em;'>
<span>
<p style='margin-top:1em; text-align:center'>
<b>On the importance of sentence length</b></p>
<p style='margin-left:1em;'>
This is a note.<br>
This ia another note.
</p>
<p style='margin-bottom:1em; margin-right:1em; text-align:right; font-family:Georgia'> <b>- Gary Provost</b> <i>(100 Ways to Improve Your Writing, 1985)</i>
</p></span>
</div>
  • method 1

Note This is a note.

  • method 2

Note:

This is a note.

  • method 3

On the importance of sentence length

This is a note.
This ia another note.

- Gary Provost (100 Ways to Improve Your Writing, 1985)

  • method 3
NOTE This is a note.
  • method 4
NOTE This is a note.
  • method 5
NOTE This is a note.
  • method 6

On the importance of sentence length

This is a note.
This ia another note.

- Gary Provost (100 Ways to Improve Your Writing, 1985)

代码高亮

Markdown 的代码高亮是对代码块语法的扩展。 即通过对代码块进行语法标注，对其在渲染输出时匹配不同的样式。

代码高亮模块是 Markdown 的一种扩展语法，通常通过第三方的高亮插件完成支持。 常见的高亮插件实现如 Typora 使用的 codemirror， 还有在网页中应用较多的 highlightjs 等。 大部分的 Markdown 编辑器或者编辑环境都已经集成好， 只要按照其语法规范，在文档完成渲染后即可得到带有高亮样式的代码块了。

Blog Markdown

数学公式

<!-- markdown/RMarkdown -->
`$a^{2}+b^{2} = c^{2}$`

<!-- RMarkdown -->
# markdown/RMarkdown
$a^{2}+b^{2} = c^{2}$

  • markdown/RMarkdown

    • $a^{2}+b^{2} = c^{2}$

  • RMarkdown

    • $a^{2}+b^{2} = c^{2}$

插入 HTML

RMarkdwon

参考资料

  1. 百度百科也可以看看 ↩︎

  2. 此处是 脚注 的 文本内容 ↩︎

  3. 此处是 脚注 的 文本内容 ↩︎