除非您真的精通HTML ,否则直接使用HTML撰写文章是不理想的。 首先,您必须使用标签正确包装内容以便对其进行格式化,其次,您必须从代码编辑器到浏览器来回查看外观。

如果您是经常写Web的作家,我认为使用Markdown进行写作更好。 Markdown允许您以纯文本形式编写内容,以后可以将其转换为有效HTML格式,并且借助工具,您可以立即看到输出。

此外,新发布平台采用Markdown作为编写内容的主要方式似乎存在一种趋势,例如Ghost , AnchorCMS和ScriptoGram 。 它们使平台保持简单,而不会被繁琐的WYSIWYG JavaScript库所阻塞。

在这篇文章中,我们将向您展示如何以Markdown格式编写代码,以及一些使您轻松编写代码的工具。 让我们检查一下。

Markdown语法备忘单

Markdown编写有几种符号来构成内容。 我们来看一下。

段

要形成一个段落,只需将其写下来,然后按Enter键即可开始一个新段落。 下面的例子:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

将被翻译成。

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
加粗斜体

您可以使用星号标记来设置粗体或斜体。 从技术上讲, 斜体为单星号, 粗体为双星号。

*Lorem ipsum*
**Lorem ipsum**

上面的示例将形成如下。

<em>Lorem ipsum</em>
<strong>Lorem ipsum</strong>

如果要使文本变为粗体和斜体,只需用三重星号将它们包裹起来,就像这样。

***Lorem ipsum***
标题

在Markdown中,标题用井号标记。 一个哈希标记表示标题级别1,两个哈希标记表示标题级别2,依此类推。

#Heading 1
##Heading 2
###Heading 3
####Heading 4
#####Heading 5
######Heading 6

上面的示例将转换为:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
有序和无序列表

要创建无序列表,请以星号或破折号开头。

* this is list
* this is list
* this is list

- this is list
- this is list
- this is list

要创建无序列表,请使用数字启动行,如下所示。

1. this is list 1
2. this is list 2
3. this is list 3
4. this is list 4
5. this is list 5

您可以仅使用空格来区分列表级别。

1. Hello
   2. Hello
      3. Hello

它们将以HTML格式转换为<ul>和<ol> 。

线

您可以使用破折号或等号创建等于<hr>的行。 这是一个例子。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.

--------------------------------

Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

================================

输出将如以下屏幕快照所示。

块引用

要形成blockquote,请使用>符号启动行,如下所示。

> Duis aute irure dolor in reprehenderit in voluptate velit esse
> cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
> proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

此示例将使用<blockquote>元素包装

链接

要创建可点击的文本链接,您可以使用方括号将文本换行,并在括号中加上URL,就像这样。

[Hongkiat.com](https://www.hongkiat.com/blog/)
图片

添加图像类似于添加文本链接。 在Markdown中,图像带有感叹号。 像这样,将图片替换文字括在方括号中,并将图片网址括在括号中。

![image](http://imageurl.jpg)

您也可以通过这种方式插入图像标题。

![image](http://imageurl.jpg "Image Title")

局限性

值得注意的是,如Markdown的作者所述,“ Markdown的格式语法仅解决了可以以纯文本形式传达的问题”。 因此,Markdown不会涵盖一些HTML标记,例如table , pre和div 。

Markdown编辑器

以下是几种Markdown编辑器,可帮助您轻松编写它。


翻译自: https://www.hongkiat.com/blog/web-content-with-markdown/

更多推荐