markdown学习笔记(个人向) Part.1

markdown学习笔记(个人向) Part.1


1. 推荐插件

  1. markdown
    • 安装支持markdown的插件;
  2. markdown-preview-github-styles
    • 可以将VS Code上默认的markdown预览样式修改成github上常用的形式,很大程度上提高文件的可读性;
  3. vscode-wordcount-cjk
    • 用于统计markdown文档的字数;
  4. markdown-preview-enhanced
    • 最常用的markdown插件,内置了非常多的其他插件;
    • 支持功能众多:
      1. 外部文件导入;
      2. 支持html,pdf,word等格式文档导出;
      3. 可以使用html语言和自定义css;
      4. 可以快速拷贝上传图片;
      5. 可以使用Mermaid,PlantUML,gnuplet等外部图像工具;
  5. markdownlint:
    • 对编写markdown文档进行格式检查,并给出相应的提示;
    • 对于养成严格的编写习惯有帮助;
  6. markdown-index
    • 等同于 markdown add index 命令,给段落标题批量添加编号;
  7. auto close tag:
    • 编写html时自动填充关闭标签,对于在markdown中调用其他html标签或者设置字段的自定义格式有帮助;
  8. markdown-all-in-one:
    • 上述markdown-preview-enhanced的下位替代,提供了很多的功能:
      1. 列表的自动化处理;
      2. 提供数学公式的支持;
      3. 提供键盘快捷键的支持;
  9. Pangu-Markdown
    • 自动为 Markdown 文件的中英文之间添加空格,中英文符号转换等;
  10. markdown emoji
    • 快速插入markdown表情;

2. 基本语法

事实上,markdown是一种被包装的html文件,在markdown中可以直接使用html编写你需要的内容,也可以使用markdown语法编写对应的组件简化操作,如:<p>标题</p> = # 标题

2.1 预设定

  • 在markdown中,我们可以使用
    ---xxx
    ---
    
    的格式来设置一篇markdown文章的各项属性,它一般写在文章的最开头位置;
  • 可以在--- ---之间设置的文章属性有:
    1. title:文章的标题;
    2. author:文章的作者;
    3. date: 文章的创建时间;
    4. 添加导出配置(在后文中细说);

2.2 标题

2.3 目录

  • 在Markdown Preview Enhanced中创建目录有两种方式:
    1. 采用列表的形式,每个目录项的格式是[目录项名称](#目录项名称),例如:

      - [1. 章节1](#章节1)- [1.1. 子章节1](#子章节1)
      

      效果是:

      • 1. 章节1
        • 1.1. 子章节1
    2. 直接使用Markdown Preview Enhanced 支持的[TOC],将其填在想要创建目录的位置即可。例如:

      [TOC]
      ### 1. 章节1
      #### 1.1 子章节1.1
      

      效果是:
      在这里插入图片描述

      值得注意的是:[TOC]是自动识别同一层级的所有标题并统计的,如果想要某个标题不被[TOC]统计,则可以在标题后添加 {ignore=true} ,便可在预览和pdf界面的目录中忽略它;

2.4 文字标记

  • 对于markdown中的文字,可以使用各种各样的方式进行修饰;
  • 以下为一些实例:
    **粗体**  
    *斜体*
    ~~删除线~~、{--删除线--}
    <u>下划线</u>、<ins>下划线</ins>、{++下划线++}
    ==高亮==
    `区域标记`
    <big>变大</big>
    <small>变小</small>
    <span style="color:red" >自定义样式</span>
    这是^上标^
    这是~下标~
    
    其效果为:
    粗体
    斜体
    删除线
    {++下划线++}
    高亮
    区域标记
    变大
    变小
    自定义样式
    这是上标
    这是下标

2.5 注释和引用

  • 在markdown中,注释和引用都是两种备注形式,一般在大段外部文献说明时使用引用,在案例或者自身理解、注疏时使用注释;

  • 注释一般有三种:

    1. 代码块:

      • 一般用于展示代码或者分类说明;
      • 使用方式即:
        <!-- 用```包住注释段 -->
        ```lang{cmd=your_cmd opt1=value1 opt2=value2 ...}
        相关代码
        
      • lang是指代码块中的代码类型(如java,markdown,python),markdown会根据代码类型自动添加语法高亮
      • 如果你想执行代码块中的代码,则需要在VS Code设置中检索enableScriptExecution并打开为true。但是注意VS Code的脚本执行功能并不会保证代码块内代码执行的安全性,如果你运行了他人的恶意代码,就可能导致系统崩溃,数据被窃取等不良后果。所以这个设置一般是关闭的。打开之后,在{}内输入cmd或者cmd=truecmd="xxx"调用系统变量处预置的编辑器执行脚本;
      • 如果你只想要执行后的结果不想要执行的代码信息,可以在opt处改成hide = true或者hide,以省略代码信息;
      • 如果你想设置你的代码效果,可以在opt处填写output xxx,其中xxx可以是htmlmarkdowntextpng(base64图片)或者none(隐藏输出结果) ;
      • 如果你想唯一标识一段代码段,可以给它添加idopt
      • 如果你想在代码块中看到代码行数,可以在opt处填写.line-numbers
      • 如果你想下一个代码块继续执行上一个代码块的内容,可以在opt处填写continue,这种情况默认是下一个继续上一个的;如果你想继续指定代码块的内容,可以使用continue its_id的形式,执行its_id的代码块内容;
      • 如果你想在markdown文件被保存时自动运行代码块,则可以在opt处填写run_on_save = true,其默认是false的;
      • 如果你想直接插入代码块运行结果到markdown文件中,则可以在opt处填写modify_source = true,其默认是false的;
      • 如果你想高亮对应的代码行数,可以在opt处填写highlight=行数,其默认是false

      一个简单的例子是:

      ```python {cmd .line-numbers id="test1" highlight=2}
      for i in range(10):a += i
      print("The result is: %d" %a)
      
      其结果是:  
      

      在这里插入图片描述

    2. 灰体注释:

      • 在行首使用>并空一格,后边的文字便可以背景灰化降低对比度象征内容的补充;
      • 例如:
        > 这是灰体注释
        
        效果是:

        这是灰体注释

    3. markdown内注释:

      • 由于markdown与html互相兼容,因此可以在markdown内使用html的注释标签<!-- -->,在预览时不会呈现到文档中。VS Code对此的快捷键是ctrl + /;
      • 例如:
        <!-- 这是HTML注释 -->
        这是正文内容
        
  • 引用又叫脚注,即我们在论文中常见的内容出处。在markdown上,我们可以使用[^x]来引用,例如:

    Content [^1]
    ---
    [^1]: Hi! This is a footnote
    

    实际效果是:
    在这里插入图片描述

    其中,点击[1]可以跳转对应的引用,点击返回键又可以跳转回原有文章的位置;

2.6 缩写

  • 在markdown中,我们可以使用*[缩写词]: 全称的方式来定义缩写,并且在文章中使用对应的缩写词就可以在光标悬浮在缩写词上时弹出全称浮窗;
  • 例如:
    *[HTML]: Hyper Text Markup LanguageHTML is the standard markup language for creating Web pages.
    
    其显示效果如下:
    在这里插入图片描述

2.7 任务列表

  • markdown支持在文档中使用未确认或已确认两种形态的任务列表。
  • 其形式如下:
    - [x] 已确认形式
    - [ ] 未确认形式(`记得空格`)
    
    效果如下:
    • 已确认形式
    • 未确认形式(记得空格

2.8 分割线与空行、空格

  • 类似于HTML中的<hr>标签或者Element-Plus中的<el-divider>,markdown支持在文档中使用分割线;

  • 其形式如下:

    <!-- 下边就是 -->
    ---
    

    效果是:


  • 值得注意的是:在一段文字下使用---不会在下方生成分割线,而是对文字进行放大,若要添加分割线需要空一行

  • 若要让文字之间段间距提高,可以使用<br/>标签或者自定义块的上下左右边界,例如:

    这是第一段
    <br/>
    这是第二段
    <!-- margin-xxx意味着容器相对于其他容器的上下左右距离是多少,距离单位自行查阅html -->
    <div style="margin-top: 20px;margin-left: 20px;">这是第三段</div>
    

    其展示效果如下:
    这是第一段


    这是第二段

    这是第三段

  • 在markdown中添加空格有很多种形式,space或者tab均可以实现,但是不管输入多少次都只能添加一个空格,如果要添加多个可以使用html的&nbsp;,例如:

    <!-- 一般空格 -->
    前半部分        后半部分(`tab添加`)
    前半部分 后半部分(`space添加`)
    <!-- &nbsp;空格 -->
    前半部分&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;后半部分
    

    其效果为:
    前半部分 后半部分
    前半部分 后半部分

    前半部分       后半部分

2.9 列表

  • 列表是markdown中的一个核心功能,分为有序列表和无序列表、定义列表三种;

  • 无序列表有两种实现方法:

    1. 列表项前面加一个星号(*)或减号(-),例如:
      - 列表1
      * 列表2
      
      其效果如下:
      • 列表1
      • 列表2
    2. 使用html的标签,例如:
      <!-- html中的实现 -->
      <ul><li>列表1</li><li>列表2</li>
      </ul>
      
      效果是一样的;
  • 有序列表也有两种形式:

    1. 列表项前面加数字. ,例如:
      <!-- 一般除了第一个外,markdown会自动填充的 -->
      1. 列表项1
      2. 列表项2
      
      其效果为:
      1. 列表项1
      2. 列表项2
    2. 使用html的标签,例如:
      <!-- 表项的种类上,<ol>是有序列表,<ul>是无序列表,<li>是表项内容 -->
      <ol><li>列表项1</li><li>列表项2</li><li>列表项3</li>
      </ol>
      
      其结果同上;
  • 最后一种,也是写文章中常用的定义列表,常用于定义某种命题或者概念;

    • 其实现方法是使用html标签,例如;
      <!-- <dl>是包含部分,d意为defined -->
      <dl><!-- dt是名称 --><dt>术语1</dt><!-- dd是定义 --><dd>术语1的解释</dd><dt>术语2</dt><dd>术语2的解释</dd>
      </dl>
      
      其效果为:
      术语1
      术语1的解释
      术语2
      术语2的解释

2.10 表格

  • 一般情况下,markdown的表格不允许合并行或列,除非你打开markdown-preview-enhanced的配置项 enableExtendedTableSyntax ,其默认是false
  • 表格通过|||进行分列,用换行表示分行,;例如:
    <!-- 第二行用--注释表格,用:表示对齐-->
    <!-- 在左边表示左对齐,在右边表示右对齐,两边都有就居中对齐 -->
    |aaaaa|bbbbb|ccccc|
    <!-- 列对齐格式说明 -->
    |:--|:--:|--:|
    |c|d|e|
    <!-- 默认左边合并右边空着的表格,格式遵循左边的 -->
    |a1||a2|
    <!-- 如果是要右边合并左边的表格,则在左边添加>符号,此时格式也遵循右边 -->
    |>|b1|b2|
    |C1|C2||
    <!-- 为了保持空表格不被合并,需要使用&nbsp;符号替代空格 -->
    |D1|&nbsp;|D2|
    |E1|E2|E3|
    <!-- 上下合并需要在下方被合并的表格中添加^符号,且遵循同列的格式 -->
    |^|F1|F2|
    
    其效果是():
    在这里插入图片描述

2.11 告诫块

  • 即我们常说的Admonition,用于在文档中插入带样式的提示、警告、说明等信息;
  • 其标准格式是:
    !!! type 标题/问题内容/回答
    
  • 其中type有以下几种:
    类型样式效果使用场景
    note/primary/important淡蓝色-笔常规提醒
    info天青色-感叹号补充说明
    warning/caution淡橙色-感叹号提醒读者注意
    tip/hint淡绿色-火焰技巧/建议
    success淡绿色-打勾表示操作成功的提示
    danger红色-闪电表示危险需要注意
    error/failure红色-打叉错误提示
    question绿色-问号用于提问或者思考
    abstract蓝色-段落用于展示摘要
    quote灰色-引号用于展示引用
    bug红色-虫子用于描述bug
    example天青色-列表用于举例子
  • 例如:
    !!! question 中国有几个省级行政单位?23个省、5个自治区、4个直辖市、2个特别行政区、1个地区
    
    其效果是:
    在这里插入图片描述

3. 特殊功能

3.1 数学、物理公式插入

  • 在Markdown Preview Enhanced中默认使用KaTex或者MathJax进行公式渲染;
  • 插入分为两种:
    1. 行内插入:
      • 使用 $···$ 或者\(···\)的格式进行插入;
      • 例如:
        质能方程是$E=mc^2$
        
        其结果为:
        质能方程是E=mc2E=mc^2E=mc2
    2. 行外插入:
      • 使用 $$···$$ 或者\[···\]的格式进行插入;
      • 或者直接写代码块
        ```math
        E=mc^2
        
        结果是: 
        $$E=mc^2$$  
        
  • 插入的公式采用latex语法进行表述,以下将进行简要介绍:
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

3.2 图片、超链接插入

  • 链接使用[···](···)的格式使用,如:
    [百度](https://www.baidu.com)
    
    效果是:
    百度

  • 图片使用![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=%C2%B7%C2%B7%C2%B7&pos_id=img-CY8HgDeT-1751874807233)的格式使用,如:
    ![图片](https://i-blog.csdnimg.cn/img_convert/a807cbc37c464409643622f20f8eba5b.png)
    
    效果是:
    图片
  • 如果使用图片的链接是本地的,则使用![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=%E7%9B%B8%E5%AF%B9%E8%B7%AF%E5%BE%84&pos_id=img-ym2qcZbg-1751874807233)的格式使用,其中:
    1. ./:当前目录;
    2. ../:上一级目录;
    3. folder/:指定目录;

3.3 Emoji表情

  • 使用:···:的格式使用,例如:😄:smile:、👍:+1:、❤️:heart:、🚀:rocket:、👎:-1:、🚁:helicopter:;

4. 图像插件

4.1 CriticMarkup

- !!! warning 注意
**CriticMarkup** 仅可用于 markdown-it parser,不与 pandoc parser 兼容。

  • 目前有四种语法:
    1. 添加 {++ ++},效果是下划线;
    2. 删除 {-- --},效果是删除线;
    3. 高亮 {== ==},效果是加亮;
    4. 注释 {>> >>},但是实测无效

4.2 Mermaid

  • markdown支持非常多的图像渲染,其中mermaid是其中非常好用的一种;
  • 它是是一个基于 JavaScript 的图表绘制工具,能极大简化普通人在文档中使用图表的难度;
  • 调用方法即使用代码块,代码块中添加mermaid标签,然后编写代码:
    ```mermaid
    <!-- 你想写的主要内容 -->
    
  • Mermaid提供了多种图标可供使用,包括流程图、时序图、类图、状态图、甘特图、饼图等,接下来将逐个介绍:
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/web/87930.shtml
繁体地址,请注明出处:http://hk.pswp.cn/web/87930.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ZooKeeper 实现分布式锁

1. 分布式锁概述 在分布式系统中&#xff0c;为了保证共享资源在并发访问下的数据一致性&#xff0c;需要引入分布式锁。分布式锁是一种在分布式环境下控制多个进程对共享资源进行互斥访问的机制。它与单机环境下的锁&#xff08;如Java中的synchronized或Lock&#xff09;不同…

Linux线程——基础全解

一、什么是线程&#xff08;Thread&#xff09;&#xff1f;✅ 定义&#xff1a;线程是程序执行的最小单位。即线程&#xff08;Thread&#xff09;是操作系统能够进行运算调度的最小单位&#xff0c;它被包含在进程之中&#xff0c;是进程中的实际运作单位。一个进程可以并发多…

Java基础--封装+static

目录 什么是封装&#xff1f; 什么是访问限定符&#xff1f; static静态修饰符 用static修饰的类变量或类方法的注意事项&#xff1a; 什么是封装&#xff1f; 封装是面向对象的三大特性之一&#xff0c;指的是将一个类中的实现细节进行隐藏&#xff0c;对外只提供一些开放…

DAY 51 复习日

作业&#xff1a;day43的时候我们安排大家对自己找的数据集用简单cnn训练&#xff0c;现在可以尝试下借助这几天的知识来实现精度的进一步提高import torch import torch.nn as nn import torch.nn.functional as F import torchvision import torchvision.transforms as trans…

针对网络爬虫的相关法律法规整理

在中国&#xff0c;网络爬虫的法律法规涉及多个层面&#xff0c;包括个人信息保护、数据安全、网络安全、知识产权、反不正当竞争等。以下是详细的法律法规分析及合规指南&#xff1a; 1. 核心法律法规及适用场景​ ​​&#xff08;1&#xff09;《民法典》——隐私权与个人信…

1.1_5_2 计算机网络的性能指标(下)

继续来看计算机网络的性能指标&#xff0c;接下来我们探讨时延&#xff0c;时延带宽积和往返时延&#xff0c;以及信道利用率这几个性能指标。 首先来看时延这个性能指标&#xff0c;英文叫delay&#xff0c;也有的教材&#xff0c;把它翻译为延迟。所谓的时延&#xff0c;就是…

PP-OCRv2:超轻OCR系统的万能包

PP-OCRv2&#xff1a;超轻OCR系统的万能包摘要光学字符识别&#xff08;OCR&#xff09;系统已广泛应用于多种场景&#xff0c;但设计兼顾精度与效率的OCR系统仍具挑战性。我们此前提出的超轻量OCR系统PP-OCR在平衡两者方面取得进展。本文进一步提出PP-OCRv2&#xff0c;通过五…

常见的软件版本开源协议

开源软件许可证核心指南 一、许可证基础分类 1. 宽松型许可证&#xff08;Permissive&#xff09; 核心特征&#xff1a;允许闭源衍生&#xff0c;仅保留版权声明适用场景&#xff1a;商业集成、快速开发代表协议&#xff1a; &#x1f4dc; MIT &#x1f4dc; Apache 2.0 &…

基于FPGA的一维序列三次样条插值算法verilog实现,包含testbench

目录 1.前言 2.算法运行效果图预览 3.算法运行软件版本 4.部分核心程序 5.算法仿真参数 6.算法理论概述 7.参考文献 8.算法完整程序工程 1.前言 三次样条插值是一种在数据拟合和信号处理中广泛应用的技术&#xff0c;它通过构造分段三次多项式来逼近给定的离散数据点&a…

RAG 之 Prompt 动态选择的三种方式

“如果我有5个prompt模板&#xff0c;我想只选择一个每次都自动五选一能做到吗怎么做&#xff1f;” 完全可以做到。这在复杂的RAG或Agentic工作流中是一个非常普遍且关键的需求&#xff0c;通常被称为“条件路由&#xff08;Conditional Routing&#xff09;”或“动态调度&am…

【ROS2 自动驾驶学习】02-安装ROS2及其配套工具

目录 一、设置语言环境 二、添加存储库 三、添加软件源 四、安装ROS2 五、配置环境 六、测试ROS2 七、安装一些工具 7.1 terminator 7.2 colcon工具 7.3 tf工具 7.4 joint-state-publisher工具 7.5 urdf 八、安装三方库 8.1 Eigen 8.2 yaml-cpp 8.3 matplotl…

系统学习Python——并发模型和异步编程:基础知识

分类目录&#xff1a;《系统学习Python》总目录 并行是并发的一种特殊情况。**所有并行系统都是并发的&#xff0c;但不是所有并发系统都是并行的。**在21世纪初&#xff0c;我们可以使用单核设备在GNU Linux上同时处理100个进程。一台拥有4个CPU核的现代笔记本计算机&#xff…

睿尔曼系列机器人——以创新驱动未来,重塑智能协作新生态(下)

在智能制造与人工智能深度融合的当下&#xff0c;机器人技术正经历从 “功能替代” 到 “价值共创” 的深刻跃迁。睿尔曼&#xff0c;作为全球超轻量仿人机械臂领域的先行者&#xff0c;始终秉持 “让机器人触手可及” 的使命&#xff0c;凭借底层技术的突破性进展&#xff0c;…

表征工程(Representation Engineering, RepE)

表征工程(Representation Engineering, RepE) 近年来,表征工程(Representation Engineering, RepE)在提升AI系统透明度和可控性方面取得了显著进展。 一、大模型可解释性与可控性的突破 核心论文:《Representation Engineering: A Top-Down Approach to AI Transparen…

国产ARM+FPGA工业开发平台——GM-3568JHF

一、引言 随着物联网和国产替代需求的快速发展&#xff0c;嵌入式系统面临计算性能与硬件灵活性的双重挑战。GM-3568JHF开发板基于国产“ARMFPGA”异构架构&#xff0c;结合瑞芯微RK3568J处理器与紫光同创Logos-2 FPGA芯片&#xff0c;支持国产自主操作系统&#xff0c;满足通…

RISCV Linux 虚拟内存精讲系列一 Sv39

笔者认为&#xff0c;Linux 操作系统&#xff08;Operating System&#xff09;最核心的机制是虚拟内存&#xff08;Virtual Memory&#xff09;。因为&#xff0c;操作系统主要作用是将硬件环境抽象起来&#xff0c;给在其中运行的应用&#xff08;Applications&#xff09;提…

【apply from: “$flutterRoot/packages/flutter_tools/gradle/flutter.gradle“作用】

这行代码的作用是将 Flutter 的 Gradle 构建脚本集成到 Android 项目中&#xff0c;具体细节如下&#xff1a;作用解析&#xff1a;引入 Flutter 构建逻辑 flutter.gradle 是 Flutter SDK 的核心构建脚本&#xff0c;它负责&#xff1a; 编译 Dart 代码为原生二进制文件&#x…

深入理解JavaScript设计模式之命令模式

深入理解JavaScript设计模式之命令模式 文章目录深入理解JavaScript设计模式之命令模式定义简单命令模式组合命令模式使用命令模式实现文本编辑器目标关键类说明实现的效果交互逻辑流程所有代码&#xff1a;总结定义 命令模式也是设计模式种相对于变焦简单容易理解的一种设计模…

CSS 网页布局:从基础到进阶

CSS 网页布局&#xff1a;从基础到进阶 引言 随着互联网的飞速发展&#xff0c;网页设计已经成为了一个不可或缺的领域。CSS&#xff08;层叠样式表&#xff09;作为网页设计中的关键工具&#xff0c;用于控制网页元素的样式和布局。本文将为您全面解析CSS网页布局&#xff0c;…

【人工智能】大语言模型(LLM) NLP

大语言模型&#xff08;LLM&#xff09;& NLP1.大语言模型&#xff08;LLM&#xff09;1.1 一句话解释1.2 更形象的比喻1.3 为什么叫 “大” 模型1.4 它能做什么1.5 现实中的例子2.对比 NLP2.1 用 “汽车进化” 比喻 NLP → LLM2.2 为什么说 LLM 属于 NLP2.3 LLM 的 “革命…