什么是Markdown?

目录生成

[toc]

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

由于 Markdown 的轻量化、易读易写特性,并且对于图片,图表、数学式都有支援,目前许多网站都广泛使用 Markdown 来撰写说明文件或是用于论坛上发表讯息。如何方的个人小站GitHubRedditStack ExchangeOpenStreetMapSourceForge简书等,甚至还能被用来撰写电子书。

Markdown 如今已成为世界上最受欢迎的标记语言之一

  1. 专注于文字内容;
  2. 纯文本,易读易写,可以方便地纳入版本控制;
  3. 语法简单,没有什么学习成本,能轻松在码字的同时做出美观大方的排版。

为什么要用Markdown?

  1. Markdown 无处不在。StackOverflow、CSDN、掘金、简书、GitBook、有道云笔记、V2EX、光谷社区等。主流的代码托管平台,如 GitHub、GitLab、BitBucket、Coding、Gitee 等等,都支持 Markdown 语法,很多开源项目的 README、开发文档、帮助文档、Wiki 等都用 Markdown 写作。
  2. Markdown 是纯文本可移植的。几乎可以使用任何应用程序打开包含 Markdown 格式的文本文件。如果你不喜欢当前使用的 Markdown 应用程序了,则可以将 Markdown 文件导入另一个 Markdown 应用程序中。这与 Microsoft Word 等文字处理应用程序形成了鲜明的对比,Microsoft Word 将你的内容锁定在专有文件格式中。
  3. Markdown 是独立于平台的。你可以在运行任何操作系统的任何设备上使用任何文本工具创建 Markdown 格式的文本。
  4. Markdown 能适应未来的变化。即使你正在使用的应用程序将来会在某个时候不能使用了,你仍然可以使用文本编辑器读取 Markdown 格式的文本。当涉及需要无限期保存的书籍、大学论文和其他里程碑式的文件时,这是一个重要的考虑因素。

用什么写Markdown?

  1. 编程/文本工具
    1. Visual Studio Code
    2. IntelliJ IDEA(包括 Android Studio、WebStorm 等)
    3. Sublime Text
    4. Nodepad++
    5. Atom
  2. 在线编辑器
    1. 何方的个人小站
    2. Markdown 中文网站
    3. Editor.md
    4. 小书匠
    5. 菜鸟工具
    6. MaHua
  3. 其他软件
    1. MarkdownPad
    2. BookPad
    3. 小书匠
    4. Typora

这是一级标题

这是二级标题

正文在此输入!

句末空两格或者句间空一行可以换行

文字加粗

文字倾斜

下面是有序列表

  1. 内容1,注意数字加点后需要空格
  2. 不加空格会发现回车无法自动补全
    1. tab可以进行缩进
    2. 再来一个
  3. backspace取消缩进

下面是无序列表

  • 这是没有编号的列表
  • 记得要空格
  • 减号也可以哈
  • 加号也可以

插入图片,复制粘贴即可,因为安装了插件

Alt text
不同模块

这里是啥

也可以把图片下载下来,保存到该文件夹下

这是三级标题

这是四级标题

这是五级标题
这是六级标题

开始插入公式,两个美元符号中间输入公式

\lim_{x \to \infin}\frac{sin(x)}{x}=1

需要在一段文字中 插入公式。

句中插入公式是两边各一个前面加一个空格

句间插入公式是两边各两个<span data-formula=",快捷键是两遍ctrl+m

公式补充说明 公式补充说明

" aria-hidden="true">x_a+xb+x{a+b}<span data-formula="

其他公式玩法可以参考MATHJAX常见问题

插入表格

表格第一行是表头

表格第二行代表怎么对齐,左对齐在左边加上冒号,右对齐在右边加上冒号,居中对齐在两边都加上冒号

表格默认左对齐

不同列之间用竖线分割开来

文本中的表格不好看,可以进行格式化,快捷键是Alt+Shift+f

小明 大明 姚明
1.5 1.4 2.3
2 2 3

表格插入简单方法:Markdown Tables Generator

插入链接

复制链接,选中需要做链接的文字,粘贴即可,因为安装了插件

这是一个百度链接

添加代码块

" aria-hidden="true">

其他公式玩法可以参考MATHJAX常见问题

插入表格

表格第一行是表头

表格第二行代表怎么对齐,左对齐在左边加上冒号,右对齐在右边加上冒号,居中对齐在两边都加上冒号

表格默认左对齐

不同列之间用竖线分割开来

文本中的表格不好看,可以进行格式化,快捷键是Alt+Shift+f

小明 大明 姚明
1.5 1.4 2.3
2 2 3

表格插入简单方法:Markdown Tables Generator

插入链接

复制链接,选中需要做链接的文字,粘贴即可,因为安装了插件

这是一个百度链接

添加代码块

s = "Python syntax highlighting"
print s
var s = "JavaScript syntax highlighting";
alert(s);

分割线 单独一段就打上三个减号


引用

在需要引用的一行前面加上>

这是引用 这也是引用,记得空格

Markdown没有什么字体类型、颜色和大小的设置,只有标题级别段落,因此Markdown是一种以内容为中心的写作方式

其他Markdown的学习内容可以去以下几个网站:

Markdown Cheatsheet

MathJax basic tutorial and quick reference

Markdown All in One

LimFX是面向科研工作者的一个发表平台。它能够方便地让科研工作者建立自己的主页,发表自己的文章。它还支持一定的科研管理功能,比如支持课题、自动生成周报等等。这些我们以后再多说,我们今天就谈发表文章。在LimFX上发表文章可以说事简单的不能在简单了。只要你注册了账号,就能建立一个类似于Hugo个人主页的个人页面。 最关键的事,在LimFX上法表文章非常的流畅,世界第一流畅,没有之一,period。 这样可以可以让我们focus on 我们的内容了。

如何使用LimFX完成文章发表?

写作完成后,打开需要发表的文章,然后按下ctrl+shift+p打开command pallet,输入limfx,选择limfx-this document命令。或者直接点击如下图所示的按钮。

Alt text

如果要修改文章也是十分简单的,只要在本地修改markdown文件,然后在运行一次limfx-this document命令,也就是点击那个按钮,在弹出来的网页中再点击一次“发布”就可与更新了。之前的封面,关键词摘要都还在。

如果发表的过程中遇到了什么问题,请把目录下面的limfxinfo.json文件删掉,再重来一次就会变成一片新的文章。

大家还在可以再写作的时候按按下ctrl+shift+p打开command pallet,输入limfx-prepublish,他会在光标处插入一段注释,这个是不会显示出来的,但是你可以在里面填上关键词和摘要,这样就不用在网页上再输入一次了。

Ctrl+k,松开按z,即可进入专心写作模式,退出模式按两下esc

Markdown学习网站

标题

标题1

标题2

自定义标题id

标题1 {#head1}

标题2 {#head2}

标题3 {#head3}

标题4 {#head4}

标题5 {#head5}
标题6 {#head6}

粗体 粗体 两个下划线

斜体 斜体 一个下划线

粗斜体 粗斜体 三个下划线 粗斜体 一个下划线 粗斜体 两个下划线

带删除线的字

有序列表可以以指定数字开头,无序列表可以以+、-或*开头

全部以1开头

  1. 列表1
  2. 列表2
  3. 列表3

全部以2开头

  1. 列表1
  2. 列表2
  3. 列表3

以指定数字开头 4. 列表4 5. 列表5

  • 无序列表1
  • 无序列表2

有序列表嵌套

  1. 内容1
    1. 内容2
      1. 内容3
  2. 内容4

无序列表嵌套

  • 内容1
    • 内容2
      • 内容3
  • 内容4

列表混合嵌套

  1. 内容1
    • 内容2
      • 内容3
  2. 内容4
  3. 内容5

任务列表

  1. [x] 已经选中的项目
  2. [ ] 未选中的项目
  • [x] Java
  • [ ] Python
列表1
列表2
列表3
列表4

这是行内代码 ` 代码中如果要出现反引号

代码块

围栏式代码块

const a=1;
const b=1;

分隔线




给链接添加标题title

Markdown 标题

这是粗体链接

带链接的图片

将生成图片的代码放到超链接的名称里面即可实现 Alt text

带title的图片

Alt text

Markdown中可以输入emoji表情

更多emoji表情

在Markdown中内嵌HTML

请在下面表单中输入您的用户名和密码

表格中也可以使用其他元素

第一列 第二列
粗体 斜体
行内代码 超链接
🐱 带颜色的字

脚注

脚注引用: [1]

脚注定义:

行内脚注[2] 不需要显式声明

图表

流程图

flowchart LR
    A[直角矩形] -->|链接文本| B(圆角矩形)
    B --> C{选择}
    C -->|一| D[结果一]
    C -->|二| E[结果二]

时序图

sequenceDiagram
          autonumber
          par Action 1
            Alice->>John: Hello John, how are you?
          and Action 2
            Alice->>Bob: Hello Bob, how are you?
          end
          Alice->>+John: Hello John, how are you?
          Alice->>+John: John, can you hear me?
          John-->>-Alice: Hi Alice, I can hear you!
          Note right of John: John is perceptive
          John-->>-Alice: I feel great!
              loop Every minute
                John-->Alice: Great!
            end

类图

classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
        +String beakColor
        +swim()
        +quack()
    }
    class Fish{
        -int sizeInFeet
        -canEat()
    }
    class Zebra{
        +bool is_wild
        +run()
    }

状态图

stateDiagram-v2
    [*] --> Still
    Still --> [*]

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

实体关系图

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

用户旅行图

journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me

甘特图

gantt
    dateFormat  YYYY-MM-DD
    title       Adding GANTT diagram functionality to mermaid
    excludes    weekends
    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)

    section A section
    Completed task            :done,    des1, 2014-01-06,2014-01-08
    Active task               :active,  des2, 2014-01-09, 3d
    Future task               :         des3, after des2, 5d
    Future task2              :         des4, after des3, 5d

    section Critical tasks
    Completed task in the critical line :crit, done, 2014-01-06,24h
    Implement parser and jison          :crit, done, after des1, 2d
    Create tests for parser             :crit, active, 3d
    Future task in critical line        :crit, 5d
    Create tests for renderer           :2d
    Add to mermaid                      :1d
    Functionality added                 :milestone, 2014-01-25, 0d

    section Documentation
    Describe gantt syntax               :active, a1, after des1, 3d
    Add gantt diagram to demo page      :after a1  , 20h
    Add another diagram to demo page    :doc1, after a1  , 48h

    section Last section
    Describe gantt syntax               :after doc1, 3d
    Add gantt diagram to demo page      :20h
    Add another diagram to demo page    :48h

需求图

requirementDiagram

    requirement test_req {
    id: 1
    text: the test text.
    risk: high
    verifymethod: test
    }

    element test_entity {
    type: simulation
    }

    test_entity - satisfies -> test_req

Git记录图

gitGraph
       commit
       commit
       branch develop
       checkout develop
       commit
       commit
       checkout main
       merge develop
       commit
       commit

C4模型图

C4Context
      title System Context diagram for Internet Banking System
      Enterprise_Boundary(b0, "BankBoundary0") {
        Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
        Person(customerB, "Banking Customer B")      
        Person_Ext(customerC, "Banking Customer C", "desc")            

        Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")

        System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")  

        Enterprise_Boundary(b1, "BankBoundary") {
         
          SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")      

          System_Boundary(b2, "BankBoundary2") {  
            System(SystemA, "Banking System A")  
            System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")        
          } 

          System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.") 
          SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.") 

          Boundary(b3, "BankBoundary3", "boundary") {  
            SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")        
            SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.") 
          }
        }
      }
      
      BiRel(customerA, SystemAA, "Uses")
      BiRel(SystemAA, SystemE, "Uses")
      Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
      Rel(SystemC, customerA, "Sends e-mails to")

      UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
      UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
      UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
      UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
      UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
      
      UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")

文本下划线

这是一段加了下划线的文本

键盘文本

键盘文本

Ctrl + X

加粗键盘文本

键盘文本

ctrl + x

放大文本

这是一段普通文本这是一段放大文本

放大粗体文本

这是一段放大粗体文本

这是一段放大粗体文本

缩小文本

这是一段普通文本这是一段缩小文本

缩小斜体文本

这是一段缩小斜体文本

这是一段缩小斜体文本

多彩文本

这是一段橘色文本

color的颜色支持英文单词、16进制rgbrgba

多彩粗体文本

这是一段加粗的水鸭色文本

这是一段加粗的水鸭色文本

这是一段加粗的水鸭色文本

多彩斜体文本

This is an italic teal text

This is an italic teal text

多彩粗斜体文本

This is a bold italic teal text

This is a bold italic teal text

文本高亮

这里是一段高亮文本

上标

x2

这里是上标内容

X2

下标

H2O

这里是下标内容

H2O

转义字符

*这段文本被一对星号包裹,但不会倾斜*

嵌入音频

嵌入视频

补充说明:width ( 宽度 ) height ( 高度 ) ,可以自己设置,直接输入数字即可,单位默认是 px(像素) 也可以使用 百分比width=100% 代表水平撑满整个窗口 height=50% 代表垂直撑满半个窗口;Video标签 支持的视频格式 :MP4 ogg webm

嵌入页面

补充说明:iframe标签 除了嵌入页面,也可以嵌入在线视频,主流的视频网站都会提供嵌入代码;iframe视频嵌入教程;B站 的视频,得在 // 前面补充 http:

注释


  1. logo ↩︎

  2. 啦啦啦 ↩︎


本文章使用limfx的vscode插件快速发布