代码编织梦想

20200410 Markdown学习笔记——Typora

前言

今天是2020年的4月10日,下午15.53. 受新冠疫情的影响, 今年在家度过了一个令人难以忘记的假期. 但伴随的还有低下的学习效率. 在学习时总会觉得学下去就更需要学.

这篇文档可以说是下一个文档《Latex学习笔记》的铺垫,因为在我看来,在掌握Latex之前学会使用Markdwon和正在使用的这个软件Typora是有必要的。

更新日志: 学习过程的更新和自白在接下来这一段体现:

这份学习笔记于2020年4月10日开始,首先我是按照知乎上一篇大佬的文章 来一步步实现(实际就是誊抄)下来的,虽然花费的时间有点多,大概两个小时左,但我觉得还是比价值。至少在抄完后有了相对系统的认识和技能使用。
另外我也发现了一些比较有参考价值的文章对Markdown做了更为细致的描写:
https://zhuanlan.zhihu.com/p/33698205
https://zhuanlan.zhihu.com/p/33698261
做相对细致全面的归纳总结是有价值的。

Last updated by xxw on April 10,2020

一、概述

Markdown诞生自Daring Fireball 之手, 点击

https://daringfireball.net/projects/markdown/syntax

可以找到最早版本的语法标准。然而,他的语法标准因解析器和编辑器而异,Typroa使用的是 GitHub Flavored Markdown 标准

​ 需要的注意的是在Markdown中的HTML代码块可以被识别但不会被解析和编译。同样要注意的是,保存之后的文档格式可能会对最初的编写的文档格式有所微调。
在这里插入图片描述

二、块元件

2.1 段落和行间隔

在Typroa中,[Enter]—插入一个新的段落
[Shift+Enter] 创建一个比段落间距更小的行间距。 然而,大多数的Markdown解析器忽略这个方式创建的行间距,

但是你可以通过在这一行的最后插入两个空格 [Space] 或者插入
令解析器强制识别

2.2 标题

可以通过在一行的开头 使用**1-6个#**来创建标题,对应1-6个级别的标题:

# 一级标题

## 二级标题

### 三级标题

2.3 引用

Markdown使用邮件风格的>符号来创建引用块。 例如:

这是一个由两个段落组成的引用块,这是第一个段落。

这是第二个段落,爱饭大色,发生发,发擦发放

这是另一个只有一个段落的引用块。两个代码块间可以用一空行来分隔
在Typroa中,只要输入 > 之后输入需要的引用内容就可以生成引用块格式。Typroa在随后的输入过程中会自动为你添加 > 和行间隔。 引用块的内容同样使用 > 即可

2.4 普通清单

输入 清单事项1 就会创建一个无序列表, 这里 可以用- 和 +代替
输入 1. 清单事项1 就会创建一个有序列表, 他们的语法如下所示:

    1. ## 无序列表
      
      * 红色
      
      * 绿色
      
      * 蓝色
      
        ## 有序列表
      
        1. 红色
        2. 绿色
        3. 蓝色
      

2.5 任务清单

任务清单是一种特殊的列表,列表中的事项用

2.6 代码块

Typroa 仅仅支持GFM的代码块,源码块是不支持的。
输入 ‘’’ 后按下Enter

自定义代码块语言:在’’'后追加输入所需要的语法名称后,就会通过语法高亮来实现它:

For Example:

function test(){
consloe.log('notice the blank line before ')}

syntax highlighting:

require 'redcarpet'
markdown = Redcarpet.new('Hello World!')
puts markdown. to_html 

2.7 数学公式

你可以通过 MathJax 来实现LaTeX的数学符号表达
输入$$然后按下Enter 就会弹出一个支持Tex\Latex语法的输入框

∫ 0 1 f ( t ) d t = ∬ D g ( x , y ) d x d y . \int_0^1f(t)dt = \iint_Dg(x,y)dxdy. 01f(t)dt=Dg(x,y)dxdy.

2.8 表格

输入|标题一|标题二|然后按下Enter将会创建一个有两列的表格
创建表格之后,会随之出现一个顶部工具栏——可以通过工具栏实现调整大小,增添和删除表格的功能,你也可以使用

表格的源码语法是Typroa自动生成的
Markdown中的语法如下所示:

First HeaderSecond Header

或者

First HeaderSecond Header
Content CellContent Cell
Content CellContent Cell

2.9 脚注

你可以创建一个脚注,如下所示:
脚注示范[^这是一个脚注]

你可以创建一个脚注,如下所示:
脚注示范[^这是一个脚注]

鼠标移动到脚注超链接可以看到脚注的文本内容

2.10 分割线

在一空行输入 *** 或者 - - - 然后按下Enter可以创建一条分割线



2.11 YAML Front Matter(这个还不太懂)

Typroa现在支持YAML Front Matter 在文章的顶部输入---然后按下Enter就会创建。或者从菜单插入一个元数据块

2.12 插入目录

输入[toc]然后按下Enter就会产生一个自动根据标题和标题等级自动创建的目录框

2.13 示意图

Typroa支持sequence,flowchart, 和mermaid(美人鱼?)之后的版本将会在设置面板中实现设置。

三、实时元件

事时元件将会在你输入完后立即解码和编译完成。通过鼠标移动到这些语法元件上会显示出这些元件的源码内容,下面将逐一介绍这些实时元件

3.1 链接

Markdown支持两种类型的链接:直接链接间接链接
上面的两种链接类型中,链接文本都用方框来定义

创建一个直接链接:通过在[ ]后追加带有链接的地址
在括号()中插入续传到的网址链接,还可以在链接后追加一个"文本"来定义所通过链接的网站标题。ForExample:

 这是一个[例子](http://example.com/ "栗子网站")网站的链接实例。
这个[栗子](http://example.com/)没有网站标题。

这是一个例子网站的链接实例。
这个栗子没有网站标题。

3.1.1 内部链接(实现好像有问题)

可以把()中链接换成所在文档的标题,这样通过点击这个链接就能实现文档内部跳转,For Example
Ctrl(Mac: Command) + Click这个链接就会跳转到标题二、块元件

3.1.2 引用链接

引用类型的链接会使用第二个[]用来放置一个对应想用链接地址的标签,ForEXample

这是个引用链接的[栗子][id]呦。

然后,你需要在文档的任何位置对标签作出有效的定义。

[id]:http://example/com/ "可选标题"

这是个引用链接的离子呦。
学习注记:好像实现[离子][ID]有点问题, 记得加 space在网站和标签之间

3.1.3 本地图片链接

语法规则包括下面两种写法:

![图片描述](图片路径"title")
![图片描述](图片路径) #这个图片描述可以不写

3.1.4 网络图片链接

觉得和 上一节没区别啊

3.2 URLs

Typroa允许你插入urls作为链接内容,用<括号>修饰。

<i@typora.io>就变成如下效果i@typora.io
顺便推荐一个个人觉得不错的壁纸网站https://unsplash.com/t/wallpapers``

Typora 也支持链接标准的URLs

3.3 图片

图片也类似链接,但需要额外的符号!防止在这一行的最开头。图片的语法结构如下所示

![图片名称](/path/to/img.jpg)
![图片名称](/path/to/img.jpg "可选名字")

也可以使用drag&drop动作从图片文件或者网页浏览器实现插入图片的操作

了解更多插入图片的技巧,请阅读http://support.typora.io//Images/

3.4 斜体

Markdown中斜体的语法标识:*_

*一个乘号表示的斜体*

_一个下划线表示的斜体_

一个乘号表示的斜体
一个下划线表示的斜体

GFM会忽视掉文本中的下划线,而下划线在编码和名字中使用普遍,例如

wfafa_fafafa

do_this_and_do_that_and_do_another_things

如果需要*_本身而不事编译成此处的强调标识,可以使用\来免除编译

*这个文是被乘号修饰的,但是不会变成斜体*

3.5 强调

两个**or__就会产生一个HTML标签实现强调加粗的效果。

3.6 代码

创建一个实时显示的代码块,用两个```符号修饰就可以

3.7 删除线

GFM中增添了使用符号添加删除线的语法1,而标准的Markdown无此功能

~~错误的文本~~显示为错误的文本

还是可以删除的吖——updated by xxw at 04-11:00.22

3.8 下划线

下划线功能由HTML的标签代码实现
<u>下划线</u>显示为下划线

3.9 表情

输出表情需借助:符号
例子:
:smile显示为 😄

同时也可以直接从菜单栏中Edit-> Emoji&Symbols插入UTF8表情也可以

3.10 HTML

Typora不能使用HTML元素,但Typora可以解析和编译非常有限的HTML元素,作为Markdown功能的补充,这些优先的功能包括:

  • 下划线<u>underline</u> underline

  • 图片:mark-word-icon.png(HTML标签中的width, height 以及属于样式的width, height, zoom样式可以被识别和应用。)

  • 评论:

  • 超链接: <a href ="http://typroa.io" target="_blank">link</a>

    link

-给字体加颜色

给字体加颜色

加背景颜色

背景色是:orange

3.11 行内数学公式

需要再设设置面板的Markdown中启用他。然后使用$来启动Tex命令。

$\lim_{x \to \infty} \exp(-x) = 0$
lim ⁡ x → ∞ exp ⁡ ( − x ) = 0 \lim_{x \to \infty} \exp(-x) = 0 limxexp(x)=0

触发行内数学公式的实时编译需要:输入$后ClickEsc

3.12 下标

需要在设置面板的Markdown中启用他,之后用~来修饰下标文本

H~2~OX~long\ text~ 显示为 H2O 和Xlong text

3.13 上标

需要在设置面板的Markdown中启用他,之后用^来修饰下标文本

$X^2$ 显示为 X 2 X^2 X2

3.14 高亮

需要在设置面板的Markdown 栏启动它,之后使用==来修饰高亮文本,栗如:

==highlight== 显示为 highlight 。

[www.baidu.com “可选标题”]:
[https://www.baidu.com/ “可选标题”]:
[ID]:

4. Markdown画图

【参考文献】:

[1] https://wangjstu.github.io/2019/06/11/Draw-Diagrams-With-Markdown/index.html

[2] https://blog.csdn.net/backkom_jiu/article/details/79731176

4.1 时序图(Sequence)

Typroa画图是依据js-sequence实现。一个栗子:

A B C D Normal line Dashed line Open arrow Dashed open arrow A B C D Here is a title

其他栗子,可以去网上Copy下试下:

对象A 对象B 小三 C 对象B你好吗?(请求) 对象B的描述 对象A的描述(提示) 我很好(响应) 你好吗 对象B找我了 你真的好吗? 我们是朋友 没人陪我玩 对象A 对象B 小三 C 标题:复杂使用

4.2 流程图(Flowchart)

Typora流程图依托于flowchart.js实现。来看个例子:

Created with Raphaël 2.2.0 Start Your Operation Yes or No? End yes no

其他网上例子,你可以copy下去试下:

Created with Raphaël 2.2.0 开始框 处理框 判断框(是或否?) 输入输出框 结束框 子流程 yes no

4.3 Mermaid模式

Typora另外还结合Mermaid,支持了Mermaid模式下的时序图(sequence),流程图(flowchart)和甘特图(Gantt)。

4.3.1 时序图(mermaid sequence)

Alice Bob Hello Bob, how are you? Not so good :( Feeling fresh like a daisy alt [ is sick ] [ is well ] Thanks for asking opt [ Extra response ] Alice Bob 标题:复杂使用

其他网上例子,可以copy下去试试哦:

张三 李四 王五 王五你好吗? 与疾病战斗 loop [ 健康检查 ] 合理 食物 看医生... 很好! 你怎么样? 很好! 张三 李四 王五 标题:复杂使用

4.3.2 流程图(mermaid flowchart)

One
Two
Hard edge
Round edge
Decision
Result one
Result two

4.3.3甘特图(mermaid Gantt)

Mon 06 Mon 13 Mon 20 Completed task Active task Future task Future task2 Completed task in the critical line Implement parser and jison Create tests for parser Future task in critical line Create tests for renderer Add to mermaid Describe gantt syntax Add gantt diagram to demo page Add another diagram to demo page Describe gantt syntax Add gantt diagram to demo page Add another diagram to demo page A section Critical tasks Documentation Last section Adding GANTT diagram functionality to mermaid

5. 快捷键{#index}

个人认为快捷键和语法交换着用更好,当然在完全熟悉键盘操作后,语法是更好的选择。

功能快捷键语法
加粗Ctrl+B加粗 or 加粗
斜体Ctrl+I斜体 or 斜体
引用Ctrl+Shift+Q>引用
插入链接Ctrl+k[]()
插入代码Ctrl+Shift+K<br />

跳转到11123

6.制作代办事宜——To do列表

  • 已处理的事情1
  • 已处理的事情1
  • 未处理的事情1
  • 未处理的事情1

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接: https://blog.csdn.net/GODSuner/article/details/107412444

android oss_数据库采用开放许可证,JavaScript在Android上运行更快,政府使用更多OSS,以及更多新闻...-爱代码爱编程

android oss 在本期开放源代码新闻摘要中,我们将介绍与开放源代码,Facebook和Uber最新开放源代码版本,伦敦金融城的房屋建筑应用程序等息息相关的数据库供应商! Cloudera和YugaByte完全拥抱开源 去年,少数几个主要的开源数据库供应商加强了对代码的控制,以保持竞争力。 两家供应商逆势而上,全

从位运算表达式中看JVM的栈帧设计,这下我彻底看懂了-爱代码爱编程

0x00 前情提要 最近接盘了公司的分布式文件存储系统,其底层不出意外的采用FastDFS以及HBase作为存储中间件,在熟悉代码的时候,对FastDFS客户端的部分代码产生了疑惑,如果你看完没有疑惑就没必要继续往下阅读了,关掉页面左转,刷刷沸点,摸摸鱼不香吗? 如下图所示这是一个将字节数组转换为long的函数, 格式为big-endian(大端)

Java EE和 Java Web 应用考试2-爱代码爱编程

Java(EE)企业架构师认证的主作业 第1节:应用程序设计概念和原理 通过为其创建UML图来记录给定的系统架构解释面向对象方法进行系统设计的主要优点。包括封装,继承和接口使用对体系结构特征的影响。描述“关注点分离”的原理如何应用于Java平台企业版(Java EE)应用程序的主要系统层。层包括客户端(GUI和Web),Web(Web容器),业务(EJ

pki和证书_PKI的位和字节-爱代码爱编程

pki和证书 在前两篇文章中-密码学和公用密钥基础结构简介以及私钥如何在PKI和密码学中工作? —我以一般方式讨论了密码学和公共密钥基础结构(PKI)。 我谈到了称为证书的数字捆绑包如何存储公钥和标识信息。 这些捆绑包包含很多复杂性,当您需要深入了解时,对格式有一个基本的了解会很有用。 抽象主义 密钥,证书签名请求,证书和其他PK

sysadmin默认密码_从sysadmin过渡到DevOps工程师的案例-爱代码爱编程

sysadmin默认密码 今年是2019年, DevOps是热门话题。 如果您愿意的话,系统管理员(sysadmin)的日子已经过去了,但是,确实如此吗? 格局已经发生变化,就像技术上经常发生的那样。 现在有一个叫做DevOps的东西,没有Ops就不可能存在。 在我们今天所知道的DevOps演进之前,我认为自己处于过道的Ops一侧。 作为

python常用技巧-爱代码爱编程

1、 list深度拷贝 l1 = [1,2,3] l2 = list(l1) l1 == l2 #True l1 is l2 #False 2、input()采集一个字符串 ‘1 4 2 3’,将其转化为list #方法一 k4=[int(x) for x in input().split()] #方法二 kk=hh.split() kk

手机rpg游戏存档在哪_在免费RPG日尝试新游戏-爱代码爱编程

手机rpg游戏存档在哪 您是否曾经考虑过尝试《龙与地下城》,但不知道如何开始? 您是否在年轻时玩过Traveler,并一直在考虑重返业余爱好? 您是否对角色扮演游戏(RPG)感到好奇,但不确定是否要玩角色扮演游戏? 您是台式游戏概念的新手,并且直到现在还从未听说过RPG? 哪个配置文件适合您并不重要,因为免费RPG日适合每个人! 首个“免

mysql 建立索引更慢_如何运用“提前发布,经常发布”来建立更好的品牌-爱代码爱编程

mysql 建立索引更慢 开源的重要性,尤其是“早发布,经常发布”(RERO)的格言,很难被夸大。 随着各种规模和规模的组织发现开放的协作流程可以做什么,这种在命令行中诞生的方法已经影响了整个世界。 看看周围。 证据无处不在:在我们的电话,汽车,学校和医院中。 如果我们仍然按照以前的方式来构建软件,那么在这些领域以及无数其他领域的

raspberry pi4_Raspberry Pi 4在这里!-爱代码爱编程

raspberry pi4 Raspberry Pi的最新版本Raspberry Pi 4于今天发布,比预期的要早。它采用了新的1.5GHz Arm芯片和VideoCore GPU,并增加了一些新功能:双HDMI 4K显示输出; USB3端口; 千兆以太网; 以及多达4GB的多个RAM选项。 Ras

sysadmin默认密码_从sysadmin过渡到DevOps工程师的案例-爱代码爱编程

sysadmin默认密码 今年是2019年, DevOps是热门话题。 如果您愿意的话,系统管理员(sysadmin)的日子已经过去了,但是,确实如此吗? 格局已经发生变化,就像技术上经常发生的那样。 现在有一个叫做DevOps的东西,没有Ops就不可能存在。 在我们今天所知道的DevOps演进之前,我认为自己处于过道的Ops一侧。 作为

freedos_FreeDOS年满25岁:起源故事-爱代码爱编程

freedos 6月29日是FreeDOS 25周年。 对于任何开放源代码软件项目而言,这都是一个重要的里程碑,而我为过去25年中在此项目上所做的工作感到自豪。 我也为我们如何构建FreeDOS而感到自豪,因为它是开源软件模型如何工作的一个很好的例子。 在当时,MS-DOS是功能强大的操作系统。 自从父母用新的IBM机器取代了老化的App

盲打每分钟资源10几个字_每个系统管理员应了解的10个资源-爱代码爱编程

盲打每分钟资源10几个字 每个人都知道系统管理员是不可能的忙人。 因此,有时候他们似乎是超人的。 sysadmin的肮脏秘诀(许多开放源代码用户共享该秘密)是,他们实际上并未像看上去一样完成所有工作。 sysadmin工具包中最出色的工具之一是它们具有重用他人已经为他们完成的工作的能力。 一个好的系统管理员知道要完成一项大工作时该转向哪里