如何在Web开发中使用Markdown

通过

一个直接开始的简单的指南。

作为网页开发者和内容创造者，我们通常会花费大量时间来编写包装在里面的文本HTML.代码。如果我们告诉你有更好的办法对付Markdown呢?让你能够专注于写作而不是代码?

Markdown是2004年John Gruber和Aaron Swartz于2004年开发的纯文本，轻量级标记语言。最初创建的是通过将普通文本文件转换为结构有效的HTML或XHTML来更轻松地制作XHTML / HTML，Markdown可以用于几乎任何类型的写作：稿件，教程，注释，Web内容等。

虽然你第一次开始出局时，爆曲可能有点令人恐惧。但是一旦你掌握了它，你就会快速意识到花费了多少时间来制定代码而不是键入您的内容。

01.选择Markdown编辑器

当您使用Web的Markdown时，了解您可能面临的基本语法和限制是很重要的。在开始之前，您需要某种类型的编辑器和用户网站的解释器。或者，您可以在发布之前转换标记。

你需要某种编辑器开始

你需要某种编辑器开始

您可以选择几个编辑器。字母非常棒，因为它提供了广泛的输出选项，包括HTML和PDF。另一个不错的选择是StackEdit-免费在线标记编辑器。当然，任何纯文本编辑器都将工作。

Jetpack与WordPress一起使用

Jetpack与WordPress一起使用

如果你不打算将你的Markdown转换成HTML，你可以为你的网站获得一个插件(或中断程序)。对于WordPress,Jetpack.对Markdown有很好的支持，它允许你直接在帖子和评论中使用Markdown -只要你启用这个选项。

和任何标记语言一样，Markdown也有自己的语法。注意:Markdown有许多不同的口味或品种。在本文中，我们将只讨论公共共享语法。

02.设置标题

在HTML中，有六种标题样式:< >强h1,< >强h2,< >强h3,< >强h4,< >强h5和< >强编辑。要在Markdown中重新创建这些，请使用一系列HASHTAG符号（< >强#） - 对应于标题号 - 然后是标题文本。例如，创建一个< >强<标题>标签，用一个标签< >强#;对于一个< >强< h2 >标签，使用两个hashtags< >强##;等等等等。

减价输入:

##标题1 ##标题2 ###标题3 ####标题4 #####标题5 ######标题6

HTML输出:

标题1
 
标题2
 
标题3< h3> 
标题4
 
标题5< h5> 
标题6< h6>

03.标记的段落

段落由< >强

在HTML标签。在Markdown中，它们由一个或多个空白行分隔。与HTML一样，空白被忽略。所以如果你添加20行空白，你仍然只有一个段落。

减价输入:

那只敏捷的棕色狐狸跳过了那只懒惰的狗。懒惰的狗不在乎，因为他是一只懒狗。

HTML输出:

那只敏捷的棕色狐狸跳过了那只懒惰的狗。< / p > < p >懒惰的狗不在乎,因为他是一只懒惰的狗。< / p >

04.风格的线条休息

排队中断，它以HTML表示< >强< br >标记，使用单个换行符添加，前一行末尾有两个空格。

减价输入:

那只敏捷的棕色狐狸跳过了那只懒惰的狗。

HTML输出:

The quick brown fox
jumps over The lazy dog. >(>跳过懒狗)

05.标记重点

有两种方法可以向您的文本添加：斜体（< >强< em >(HTML格式)或粗体(< >强< >强在HTML)。

在Markdown中，你可以使用一两个星号(< >强*)。你也可以用下划线(_)，但我坚持用星号，因为还有其他的Markdown在其他事情上也用下划线。

减价输入:

*斜体文本* **粗体文本**

HTML输出:

斜体文本 粗体文本

注意:您也可以使用三个星号创建粗体斜体文本:< >强* * *粗体和斜体文本***。

06.创建水平的规则

创建水平规则(或< >强<人力资源>在HTML中)，使用三个或更多的连字符(< >强---),星号(< >强***)或等号(< >强= = =)。这是您更喜欢的选择哪一个，但只是确保您在上方和下面包含空线。

减价输入:

学习新东西总是很有趣的。——当然是!

HTML输出:

学习新的东西总是很有趣。 
 
它肯定是！

在HTML中，使用图像添加图像< >强< img >使用标签和链接使用< >强标签。

在Markdown中，图像以感叹号(< >强!），然后是方括号（< >强[]）对于'alt text'和括号（< >强()）对于图像的路径。您还可以在双引号中包含可选标题（< >强”“)。

对于链接，它几乎是相同的，除了没有感叹号。

减价输入:

[Alt](/path/to/image.jpg "可选标题")[Link Text](http://example.com "可选标题")

注意：您还可以使用参考链接和图像，但此处没有介绍。

HTML输出:

 链接文本

08.制作清单

HTML中有两种类型的列表：已订购（< >强< ol >)及无序(< >强< ul >)。在Markdown中，对有序列表使用数字和星号(< >强*)或连字符(< >强-)为无序列表。

减价输入:

1.项目1 2。第二项*第一项*第二项-第一项-第二项

HTML输出:

李< ol > < >第1项李< / > < >李第二项李< / > < / ol > < ul > <李>第一项李< / > < >李第二项李< / > < / ul > < ul > <李>第一项李< / > < >李第二项李< / > < / ul >

09.添加内联代码和代码块

当您在HTML中使用代码时，您可以使用它作为内联元素包含< >强标签;或作为预格式化文本块使用< >强

 组合。

      
在Markdown中，这些元素在每侧上的单个反向速度界定（< >强”）;或者通过使用围栏式，其中包括在代码块上方和下方的三个反响（< >强' ' ')。

      
减价输入:

      
变量“numberOfPoints”保存着玩家的分数。如果球员。赢{numberOfPoints += 1}

      
HTML输出:

      
numberOfPoints变量保存玩家的分数。如果玩家< pre > <代码>。

10.风格块

类在HTML中添加Blockquotes< >强

标签。在Markdown中，使用大于符号（< >强>）在线之前。

减价输入:

>这是我的blockquote。>>这是同一块的一部分。>这是一个新的blockquote。

HTML输出:

 
这是我的blockquote。 
 
这是同一块的一部分。  
 
这是一个新的blockquote。

11.嵌入内联HTML

有时需要创建不支持的HTML元素;例如，您可能需要一个< >强<表>或者< >强

标签。

如果是这种情况，您可以混合使用Markdown和HTML，但有一些限制。例如，您不能在块级HTML标记中包含Markdown。

阅读更多：

相关文章