Markdown 基本用法说明

最新推荐文章于 2025-07-10 18:05:01 发布
原创 最新推荐文章于 2025-07-10 18:05:01 发布 · 3.7k 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#markdown #编辑器

Markdown 基本用法说明

标题Header

两种表现形式：
1. #，一个#就是一级标题即h1，######就是h6[atx]
2. 在文本下加===,—,前为一级，后者为二级[Setext]

A First Level Header

A Second Level Header

Header 3

输出为HTML：

<h1>A First Level Header</h1>
<h2>A Second Level Header</h2>

<h3>Header 3</h3>

段落

一个段落是由一个以上的连接的行句组成，而一个以上的空行则会划分出不同的段落（空行的定义是显示上看起来像是空行，就被视为空行，例如有一行只有空白和 tab，那该行也会被视为空行），一般的段落不需要用空白或换行缩进。

Now is the time for all good men to come to
the aid of their country. This is just a

regular paragraph.
The quick brown fox jumped over the lazy
dog’s back.

<p>Now is the time for all good men to come to
the aid of their country. This is just a
regular paragraph.</p>
<p>The quick brown fox jumped over the lazy
dog's back.</p>

区块引用

使用’ > ’ 尖角号表示区块引用。

This is a blockquote.

This is the second paragraph in the blockquote.

This is an H2 in a blockquote

<blockquote>
<p>This is a blockquote.</p>
<p>This is the second paragraph in the blockquote.</p>
<h2>This is an H2 in a blockquote</h2>
</blockquote>

修辞和强调

  • 一个*或者_表示斜体
  • 两个**或者两个__表示粗体
  • 三个* 或者_表示粗斜体
  • ~~表示删除线

Some of these words are emphasized.
Some of these words are emphasized also.

Use two asterisks for strong emphasis.
Or, if you prefer, use two underscores instead.

And this is the strikethrough. 

<p>Some of these words <em>are emphasized</em>.
Some of these words <em>are emphasized also</em>.</p>
<p>Use two asterisks for <strong>strong emphasis</strong>.
Or, if you prefer, <strong>use two underscores instead</strong>.</p>
<p>And this is the <s>strikethrough</s></p>

超链接

Markdown 支持两种形式的链接语法： 行内式和参考式，两种都是使用中括号来把文字转成链接，行内式一般使用较多。

行内式

行内形式是直接在后面用括号直接接上链接

This is an example link.

This is an example link.

输出为HTML

<p>This is an <a href="http://example.com/">example link</a>.</p>
<p>This is an <a href="http://example.com/" title="With a Title">example link</a>.</p>

语法说明：
* []里写链接文字
* ()里写链接地址, 里面的 “” 可以为链接指定title属性
* “title” 与链接地址间有空格

参考式

参考形式为链接定一个名称，之后在文件的其他地方定义该链接的内容，这种形式一般用在学术论文上面，它可以对链接进行统一方便的管理。

I get 10 times more traffic from Google than fromYahoo or MSN.

输出为HTML

<p>I get 10 times more traffic from <a href="http://google.com/" title="Google">Google</a> than from <a href="http://search.yahoo.com/" title="Yahoo Search">Yahoo</a> or <a href="http://search.msn.com/" title="MSN Search">MSN</a>.</p>

语法说明：
* 参考式链接分为两部分
* 文中的写法 [链接文字][链接标记]
* 文本的任意位置添加[链接标记]:linkaddr “title”
* 链接地址与链接标题前有一个空格
* 也可以写成[链接文字][],即链接文字本身做为链接标记
* [链接文字]：链接地址的形式，见代码的最后一行。

短链接

http://example.com/;

address@example.com;

输出为HTML

<http://example.com/>;
<address@example.com>;

语法说明：
Markdown 支持以比较简短的自动链接形式来处理网址和电子邮件信箱，只要是用<>包起来， Markdown 就会自动把它转成链接。一般网址的链接文字就和链接地址一样

锚点

网页中，锚点其实就是页内超链接，也就是链接本文档内部的某些元素，实现当前页面中的跳转。比如我这里写下一个锚点，点击回到目录，就能跳转到目录。 在目录中点击这一节，就能跳过来。还有下一节的注脚。这些根本上都是用锚点来实现的。

注意：
1. Markdown Extra 只支持在标题后插入锚点，其它地方无效。
2. Leanote 编辑器右侧显示效果区域暂时不支持锚点跳转，所以点来点去发现没有跳转不必惊慌，但是你发布成笔记或博文后是支持跳转的。

语法描述：
在你准备跳转到的指定标题后插入锚点{#标记}，然后在文档的其它地方写上连接到锚点的链接。

代码：

## 0. 目录{#index}

跳转到[目录](#index)

显示效果：

跳转到目录

图片

图片的语法和链接很像，也有两种写法：行内式和参考式。

行内形式：

alt text

参考形式：

alt text

HTML输出均为：

<img src="/path/to/img.jpg" alt="alt text" title="Title" />

语法说明：
* alt 和 title 都不是必须的，可以省略，但建议写上。
* 文档要插入图片的地方![图片Alt][标记]与后面地址间要有空行或其他字符隔开

代码

在一般的段落文字中，你可以使用反引号 ` 来标记代码区段，区段内的 & 、 < 和 > 都会被自动的转换成 HTML 实体，而三个“`包围起来的区域在可以将HTML代码原样输出(前面的代码块也是这么实现的)：

I strongly recommend against using any <blink> tags.

I wish SmartyPants used named entities like &mdash;
instead of decimal-encoded entites like &#8212;.

输出HTML为:

<p>I strongly recommend against using any
<code>&lt;blink&gt;</code> tags.</p>
<p>I wish SmartyPants used named entities like
<code>&amp;mdash;</code> instead of decimal-encoded
entites like <code>&amp;#8212;</code>.</p>

列表

无序列表

Markdown使用 * + - 表示无序列表。

* Red     + Red    - Red
* Green   + Green  - Green
* Blue    + Blue   - Blue

上面这三种方式其表现结果都一样

有序列表

Markdown使用数字接着一个英文句点(.)来表示有序列表。

书写顺序        展示结果为                       
1. Bird         1.Bird      
2. McHale       2.McHale    
3. Parish       3.Parish    
6. Jack         4.Jack      
5. Tom          5.Tom       
4. Jerry        6.Jerry

列表标记上使用的数字并不会影响输出的 HTML 结果，最终还是按书写顺序来排序；
HTML输出为：

<ol>
<li>Bird</li>
<li>McHale</li>
<li>Parish</li>
<li>Jack</li>
<li>Tom</li>
<li>Jerry</li>
</ol>

列表缩进

列表项目标记通常是放在最左边，但是其实也可以缩进，最多 3 个空格，项目标记后面则一定要接着至少一个空格或制表符。
要让列表看起来更漂亮，可以把内容用固定的缩进整理好：
* Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
viverra nec, fringilla in, laoreet vitae, risus.
* Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
Suspendisse id sem consectetuer libero luctus adipiscing

这样在编写段看起来整齐多了,当然下面这这段显示也是一样的:

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
    viverra nec, fringilla in, laoreet vitae, risus.
  • Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
    Suspendisse id sem consectetuer libero luctus adipiscing.

包含段落的列表

列表项目可以包含多个段落，每个项目下的段落都必须缩进 4 个空格或是 1 个制表符
1. This is a list item with two paragraphs. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Aliquam hendrerit
mi posuere lectus.
Vestibulum enim wisi, viverra nec, fringilla in, laoreet
vitae, risus. Donec sit amet nisl. Aliquam semper ipsum
sit amet velit.
2. Suspendisse id sem consectetuer libero luctus adipiscing

同样的不这么对编写时不这么对齐，显示时也是一样的

包含引用的列表

如果要在列表项目内放进引用，那 > 就需要缩进：

  • A list item with a blockquote:

    This is a blockquote
    inside a list item.

输出为HTML

包含引用代码区块的列表

如果要放代码区块的话，该区块就需要缩进两次，也就是 8 个空格或是 2 个制表符：

  • 一列表项包含一个列表区块：

    <代码写在这>

输出HTML为:

<p>这是一个普通段落：</p>
<pre><code>这是一个代码区块。
</code></pre>

特殊情况

如行首出现数字-句点-空白，这样会被认为是一个列表(实际上不是),比如:

1986. What a great season.

输出为HTML为:
1986. What a great season.

为避免这样的情况出现，可以在句点前面加上反斜杠(转义)：

1986. What a great season.

分隔线

在一行中用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西。你也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线：

输出为HTML

<hr>
<hr>
<hr>
<hr>
<hr>

表格

  • 使用HTML表格代码编写
  • 使用分割符: | 来分开各列; 自然行的分为行
  • 表头与表主题间以: -|- 分开
  • 分割行还可以为不同的列指定对齐方向,默认为左对齐，在-右边加上:就右对齐
学号姓名分数
小明男75
小红女79
小陆男92
学号姓名分数
小明男75
小红女79
小陆男92
产品价格
Leanote 高级账号60元/年
Leanote 超级账号120元/年

输出为HTML

<table>
    <thead>
        <tr>
            <th>学号</th><th>姓名</th><th>分数</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>小明</td><td>男</td><td>75</td>
        </tr>
        <tr>
            <td>小红</td><td>女</td><td>79</td>
        </tr>
        <tr>
            <td>小陆</td><td>男</td><td>92</td>
        </tr>
        </tbody>
        </table>

<table>
    <thead>
        <tr>
            <th>产品</th><th style="text-align:right">价格</th>
        </tr>
        </thead>
    <tbody>
        <tr>
            <td>Leanote 高级账号</td><td style="text-align:right">60元/年</td>
        </tr>
        <tr>
            <td>Leanote 超级账号</td><td style="text-align:right">120元/年</td>
        </tr>
    </tbody>
</table>
【云原生之Docker实战】使用Docker部署Alist网盘直链程序
jks212454的博客
09-25 5243
【云原生之Docker实战】使用Docker部署Alist网盘直链程序
LaTeX、KaTeX、Markdown 的用法
m0_73085893的博客
04-05 1492
LaTeX是一种基于TeX的排版系统，由美国计算机科学家莱斯利·兰伯特在20世纪80年代初开发。它主要用于文档排版，尤其是数学公式的排版。LaTeX通过一系列宏命令，将复杂的排版任务简化为简单的文本输入，使得用户能够专注于内容的创作，而无需过多关注排版细节。LaTeX广泛应用于学术领域，如数学、物理、计算机科学等，是撰写学术论文、报告、书籍等文档的重要工具。其核心优势在于能够高效地处理复杂的数学公式、图表和多语言文本，同时保持文档的一致性和美观性。
markdown的使用技巧
11-19
markdown的使用,我们经常使用word,txt等之类的文件来作为我们及时工具但当我们需要使用的时候查看起来非常不便于是我选择了Markdown这样的工具作为我的及时记录工具
Markdown 使用介绍
最新发布
weixin_49708630的博客
07-10 664
本文介绍了Markdown的常用语法功能，包括基础快捷键、标题与目录、文本样式、各类列表、链接图片插入、表格制作、代码块、特殊元素（注脚和数学公式）以及图表绘制（流程图和序列图）。通过语法代码与实际效果的对照展示，帮助用户快速掌握这一轻量级标记语言的核心用法，满足日常写作中的排版需求。最后还提及了文件的导出与导入操作，适合作为Markdown入门参考手册。
markdown的使用说明
jlihan的博客
12-12 4229
(注：效果路径为C:\Users\asus\Pictures\Saved Pictures\Snipaste_2020-09-03_13-19-11.png。语法：# (一级标题) ## (二级标题) ### (三级标题) …来创建一个标签，就如上面的方程式序列中展示的那样，之后使用。在需要的时候，你可以使用。来创造一组默认左对齐的条件表达式,在每一行插入。来指定需要对齐的内容,并在每一行结尾处使用。语句来允许交换图表的显示,并通过在开头使用。语句来允许交换图表的显示,并通过在开头使用。
手把手教会你使用Markdown【从入门到精通一篇就够了】
热门推荐
qq_40818172的博客
08-10 23万+
手把手教会你使用Markdown【从入门到精通一篇就够了】
markdown语法的使用说明
04-10
脚注是Markdown文档中的注释部分，对文本中的某个词或者短语进行说明，使用方括号和冒号来创建（[^脚注标识]: 脚注内容），脚注标识通常放在需要说明的词或短语的后面。 通过以上介绍，大家对Markdown的基本语法有...
Markdown基本语法
xx的博客
01-28 943
Markdown简单上手教程
markdown编辑神器-typora软件下载和使用说明
10-08
下面我们将详细介绍 Typora 的下载与使用方法。 1. **下载 Typora** - 访问 Typora 的官方网站 (https://www.typora.io/)，在下载页面选择适合您操作系统的版本，包括Windows、macOS和Linux。 - 下载完成后，按照...
在ASP.NET Core Mvc集成MarkDown的方法
10-15
*** Core MVC与MarkDown的集成方法涉及多个知识点，包括*** Core MVC框架的基础、MarkDown语法的特点和使用场景、如何在Web项目中引入和使用MarkDown编辑器，以及前后端交互和图片上传处理等。下面详细说明这些知识...
markdown使用说明
jyckder的专栏
04-22 989
都没符文
markdown 说明
LiuChangCHN的博客
11-30 248
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
Markdown的使用
不屈的铝合金的博客
08-11 2467
Markdown是一种轻量级的标记语言，允许人们使用易读易写的纯文本格式编写文档，然后转换成结构化的HTML（超文本标记语言）文档。Markdown的设计目的是使文本内容的排版变得简单，无需关注复杂的HTML标签。用户在编辑时只需使用一些特定的符号和语法，就可以轻松地为文本添加格式，如粗体、斜体、标题、列表、链接和图片等元素。Markdown文档便于人们阅读和编写，同时也方便转换为多种格式，广泛应用于GitHub、技术文档、博客写作、笔记软件等领域。
Markdown 语法说明 (简体中文版)
lihui126的专栏
05-16 1413
声明： 这份文档派生(fork)于繁体中文版，在此基础上进行了繁体转简体工作，并进行了适当的润色。此文档用 Markdown 语法编写，你可以到这里查看它的源文件。「繁体中文版的原始文件可以查看这里 。」–By @riku 注： 本项目托管于 GitCafe上，请通过”派生”和”合并请求”来帮忙改进本项目。
MarkDown使用指南
技术改变世界
04-13 847
MarkDown使用指南 1MarkDown简介 Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档。 Markdown 语言在 2004 由约翰·格鲁伯（英语：John Gruber）创建。 Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。 Markdown 编写的文档后缀为 .md, .markdown。 2. MarkDown编辑器 有很多编辑器可以用来书写MarkDown，比如我们常用的VSC
Markdown及其语法详细介绍（全面）
QHCV的博客
02-19 1万+
Markdown 是一种轻量级的标记语言，广泛用于文档编辑和博客写作等领域。相比于传统的文字处理软件，Markdown 具有简洁、易读、易写的特点，可以方便地将文本转换为各种格式的文档。
结合ts，说明react-markdown的用法
05-30
<think>好的，我现在需要帮助用户解决在React中结合TypeScript使用react-markdown预览Markdown文件的问题。首先，我需要回顾用户之前的对话和提供的引用内容，确保回答的一致性和准确性。用户之前的问题是关于如何在React中实现Markdown预览，现在他们想了解如何结合TypeScript使用react-markdown。用户还提到了几个引用，其中引用[1]提到了react-markdown-editor-lite，一个基于React的轻量编辑器；引用[2]展示了使用react-syntax-highlighter的代码块组件；引用[3]是react-markdown-editor-lite的使用教程。这些引用可能对当前问题有帮助，但用户现在关注的是react-markdown与TypeScript的结合使用。 首先，我需要确认react-markdown是否支持TypeScript。查阅官方文档，react-markdown本身是用TypeScript编写的，因此天然支持TypeScript类型。但用户可能需要类型定义的指导和示例。接下来，我需要构建一个使用TypeScript的React组件示例。基本步骤包括安装必要的依赖，如react-markdown、类型定义文件@types/react-markdown，以及语法高亮库如react-syntax-highlighter。然后，创建组件并处理类型。这里需要注意TypeScript的类型声明，例如组件的props应该定义content为string类型。在代码示例中，用户之前的问题中提到了代码高亮的部分，引用[2]中的CodeBlock组件可以作为参考。需要调整该组件以适配TypeScript，例如明确props的类型，可能使用React.ComponentProps或定义接口。另外，用户可能需要在组件中使用remark插件，如remarkGfm和rehypeRaw，这些需要正确导入并传递给ReactMarkdown组件。同时，语法高亮部分需要处理language的匹配，这里可能需要使用正则表达式来提取语言类型，并确保类型安全。安全方面，用户之前的问题提到了XSS过滤，使用rehypeRaw时需要谨慎。在TypeScript中，可能需要额外的类型断言或配置来确保安全。 样式方面，引用[2]中的github-markdown-css可以继续使用，但需要确保在TypeScript项目中正确导入CSS文件，并在组件中应用对应的类名。 最后，生成相关问题需要考虑用户可能的后续需求，例如自定义组件、数学公式支持、性能优化等，这些都需要结合之前的引用和用户的问题来设计。 总结步骤：安装依赖、创建TypeScript组件、处理类型、集成语法高亮、应用样式、注意事项和相关问题。确保每个部分都符合TypeScript的最佳实践，并参考用户提供的引用内容进行适当调整。</think>### 在 React + TypeScript 中使用 react-markdown 实现 Markdown 预览的完整指南 --- #### 一、基础集成步骤 1. **安装核心依赖** ```bash npm install react-markdown @types/react-markdown remark-gfm rehype-raw npm install react-syntax-highlighter @types/react-syntax-highlighter ``` 2. **创建 TypeScript 组件** ```tsx import React from 'react'; import ReactMarkdown from 'react-markdown'; import remarkGfm from 'remark-gfm'; import rehypeRaw from 'rehype-raw'; import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism'; interface MarkdownPreviewProps { content: string; } const MarkdownPreview: React.FC<MarkdownPreviewProps> = ({ content }) => { return ( <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]} components={{ code({ node, inline, className, children, ...props }) { const match = /language-(\w+)/.exec(className || ''); return !inline && match ? ( <SyntaxHighlighter style={vscDarkPlus} language={match[1]} PreTag="div" {...props as React.ComponentProps<typeof SyntaxHighlighter>} > {String(children).replace(/\n$/, '')} </SyntaxHighlighter> ) : ( <code className={className} {...props}> {children} </code> ); } }} > {content} </ReactMarkdown> ); }; export default MarkdownPreview; ``` --- #### 二、类型处理要点 1. **Props 类型定义** ```tsx interface MarkdownPreviewProps { content: string; // 明确内容类型为字符串 className?: string; // 可选样式类 } ``` 2. **语法高亮组件类型断言** ```tsx // 处理 react-syntax-highlighter 的 TypeScript 类型 {...props as React.ComponentProps<typeof SyntaxHighlighter>} ``` --- #### 三、文件加载方案 1. **本地文件加载（通过 Webpack）** ```tsx // 需要配置 webpack 的 markdown-loader import mdContent from './document.md'; // 在组件中使用 <MarkdownPreview content={mdContent} /> ``` 2. **动态加载远程内容** ```tsx const [content, setContent] = useState(''); useEffect(() => { fetch('https://example.com/doc.md') .then(res => res.text()) .then(text => setContent(text)); }, []); ``` --- #### 四、样式优化方案 1. **应用 GitHub 风格样式** ```bash npm install github-markdown-css ``` ```tsx import 'github-markdown-css'; // 包裹组件 <div className="markdown-body"> <MarkdownPreview content={content} /> </div> ``` --- #### 五、安全注意事项 1. **HTML 内容过滤** ```tsx // 使用自定义组件过滤危险 HTML components={{ img: ({ node, ...props }) => ( <img {...props} alt={props.alt || ''} onError={(e) => e.currentTarget.style.display = 'none'} /> ) }} ``` --- ### 高级功能扩展 1. **数学公式支持** ```tsx npm install remark-math rehype-katex @types/katex ``` ```tsx import remarkMath from 'remark-math'; import rehypeKatex from 'rehype-katex'; import 'katex/dist/katex.min.css'; // 修改组件配置 remarkPlugins={[remarkGfm, remarkMath]} rehypePlugins={[rehypeRaw, rehypeKatex]} ``` --- ### 常见问题解决 1. **图片路径问题** ```tsx // 自定义图片组件处理相对路径 components={{ img: ({ src, alt }) => ( <img src={require(`../../public/${src}`)} alt={alt} style={{ maxWidth: '100%' }} /> ) }} ``` ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值